@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;
        let attrValue = attr.value;
        switch (attrName) {
            case 'class':
                attrName = 'className';
                break;
            case 'novalidate':
                attrName = 'noValidate';
                break;
            case 'for':
                attrName = 'htmlFor';
                break;
            case 'style':
                // Convert style string to object
                attrValue = parseStyleString(attr.value);
                break;
            default: break;
        }
        attrObj[attrName] = attrValue;
    }
    return attrObj;
}
function parseStyleString(styleStr) {
    const styleObj = {};
    if (!styleStr) {
        return styleObj;
    }
    styleStr.split(';').forEach(rule => {
        const [property, value] = rule.split(':').map(s => s.trim());
        if (property && value) {
            // Handle CSS custom properties (variables) that start with --
            if (property.startsWith('--')) {
                styleObj[property] = value;
            }
            else {
                // Convert kebab-case to camelCase for React
                const camelProperty = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
                styleObj[camelProperty] = value;
            }
        }
    });
    return styleObj;
}