@progress/sitefinity-nextjs-sdk/pages/render-lazy-widgets.client.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 { RenderWidgetService } from '../services/render-widget-service';
import { ServiceMetadata } from '../rest-sdk/service-metadata';
import { useEffect } from 'react';
import { EVENTS, useSfEvents } from './useSfEvents';
export function RenderLazyWidgetsClient({ metadata, taxonomies, url, registry }) {
    RenderWidgetService.widgetRegistry = registry;
    ServiceMetadata.serviceMetadataCache = metadata;
    ServiceMetadata.taxonomies = taxonomies;
    const [_, setWidetsModels] = useSfEvents(EVENTS.PERSONALIZED_WIDGETS_LOADED, false);
    useEffect(() => {
        const correlationId = Date.now().toString(36) + Math.random().toString(36).substring(2);
        if (typeof window !== 'undefined') {
            window['sfCorrelationId'] = correlationId;
            const renderLazyWidgetsUrl = `/render-lazy?pageUrl=${encodeURIComponent(url)}&correlationId=${correlationId}&referer=${encodeURIComponent(document.referrer)}&`;
            const sendRequest = function () {
                fetch(renderLazyWidgetsUrl).then((response) => {
                    response.text().then((lazyWidgetsHtml) => {
                        const fakeHtmlElement = document.createElement('html');
                        fakeHtmlElement.innerHTML = lazyWidgetsHtml;
                        const wrappingElement = fakeHtmlElement.querySelector('div[id=\'widgetPlaceholder\']');
                        if (!wrappingElement) {
                            return;
                        }
                        const childrenLazyWidgets = wrappingElement.querySelectorAll('div');
                        if (childrenLazyWidgets && childrenLazyWidgets.length > 0) {
                            const models = {};
                            childrenLazyWidgets.forEach(lazyWidgetContainer => {
                                const widgetId = lazyWidgetContainer.getAttribute('id');
                                if (widgetId) {
                                    const isCSR = lazyWidgetContainer.getAttribute('data-sfmodel');
                                    if (isCSR) {
                                        const model = JSON.parse(lazyWidgetContainer.innerHTML);
                                        models[widgetId] = {
                                            ssr: false,
                                            data: model
                                        };
                                        return;
                                    }
                                    else {
                                        const renderResult = lazyWidgetContainer.innerHTML;
                                        models[widgetId] = {
                                            ssr: true,
                                            data: renderResult
                                        };
                                    }
                                }
                            });
                            if (Object.keys(models).length) {
                                setWidetsModels(models);
                            }
                        }
                    });
                });
            };
            if (window.InsightInitScript) {
                if (window.InsightInitScript.cookiesManaged) {
                    sendRequest();
                }
                else {
                    window.addEventListener('insCookiesMngmntDone', sendRequest);
                }
            }
            else {
                sendRequest();
            }
        }
    }, [setWidetsModels, url]);
    return null;
}