@progress/sitefinity-nextjs-sdk/widgets/lazy/lazy-component-for-ssr.js

Provides OOB widgets developed using the Next.js framework, which includes an abstraction layer for Sitefinity communication. Additionally, it offers an expanded API, typings, and tools for further development and integration.

'use client';
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { EVENTS, useSfEvents } from '../../pages/useSfEvents';
import React from 'react';
;
export function RenderLazyForSSR(props) {
    const [htmls] = useSfEvents(EVENTS.PERSONALIZED_WIDGETS_LOADED, true);
    const [renderValues, setRenderValues] = useState(null);
    useEffect(() => {
        if (htmls && htmls[props.id] && htmls[props.id].ssr) {
            const mock = document.createElement('div');
            mock.innerHTML = htmls[props.id].data;
            const renderNodes = [];
            mock.childNodes.forEach(x => {
                if (x.nodeType === Node.ELEMENT_NODE) {
                    const currentChild = x;
                    const tag = currentChild.tagName.toLowerCase();
                    const attributes = currentChild.attributes;
                    const attrObj = extractAttributes(attributes);
                    renderNodes.push({
                        tag,
                        innterHtml: currentChild.innerHTML,
                        attributes: attrObj
                    });
                }
            });
            setRenderValues(renderNodes);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [htmls]);
    return htmls && htmls[props.id] && htmls[props.id].ssr && renderValues?.length && (_jsx(_Fragment, { children: renderValues.map((x, i) => {
            return React.createElement(x.tag, {
                dangerouslySetInnerHTML: { __html: x.innterHtml },
                key: `lazy-${props.id}-${i}`,
                ...x.attributes
            });
        }) }));
}
function extractAttributes(attributes) {
    const attrObj = {};
    for (const attr of attributes) {
        let attrName = attr.name;
        switch (attrName) {
            case 'class':
                attrName = 'className';
                break;
            case 'novalidate':
                attrName = 'noValidate';
                break;
            case 'for':
                attrName = 'htmlFor';
                break;
            default: break;
        }
        attrObj[attrName] = attr.value;
    }
    return attrObj;
}