@builder.io/sdk-react 0.5.9 → 0.6.1

package/dist/components/content/components/enable-editor.js

@@ -1,271 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState, useRef, useEffect } from "react";
-import { evaluate } from "../../../functions/evaluate/index.js";
-import { fetch } from "../../../functions/get-fetch.js";
-import { isBrowser } from "../../../functions/is-browser.js";
-import { isEditing } from "../../../functions/is-editing.js";
-import { createRegisterComponentMessage } from "../../../functions/register-component.js";
-import { _track } from "../../../functions/track/index.js";
-import builderContext from "../../../context/builder.context.js";
-import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing.js";
-import { checkIsDefined } from "../../../helpers/nullable.js";
-import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction.js";
-import { logger } from "../../../helpers/logger.js";
-import { fetchOneEntry } from "../../../functions/get-content/index.js";
-import { isPreviewing } from "../../../functions/is-previewing.js";
-import { fastClone } from "../../../functions/fast-clone.js";
-function EnableEditor(props) {
-    const elementRef = useRef(null);
-    const [canTrackToUse, setCanTrackToUse] = useState(() => checkIsDefined(props.canTrack) ? props.canTrack : true);
-    const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
-    function mergeNewContent(newContent) {
-        const newContentValue = {
-            ...props.builderContextSignal.content,
-            ...newContent,
-            data: {
-                ...props.builderContextSignal.content?.data,
-                ...newContent?.data,
-            },
-            meta: {
-                ...props.builderContextSignal.content?.meta,
-                ...newContent?.meta,
-                breakpoints: newContent?.meta?.breakpoints ||
-                    props.builderContextSignal.content?.meta?.breakpoints,
-            },
-        };
-        props.setBuilderContextSignal((PREVIOUS_VALUE) => ({
-            ...PREVIOUS_VALUE,
-            content: newContentValue,
-        }));
-    }
-    const [lastUpdated, setLastUpdated] = useState(() => 0);
-    const [shouldSendResetCookie, setShouldSendResetCookie] = useState(() => false);
-    function processMessage(event) {
-        const { data } = event;
-        if (data) {
-            switch (data.type) {
-                case "builder.configureSdk": {
-                    const messageContent = data.data;
-                    const { breakpoints, contentId } = messageContent;
-                    if (!contentId ||
-                        contentId !== props.builderContextSignal.content?.id) {
-                        return;
-                    }
-                    if (breakpoints) {
-                        mergeNewContent({
-                            meta: {
-                                breakpoints,
-                            },
-                        });
-                    }
-                    setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
-                    break;
-                }
-                case "builder.contentUpdate": {
-                    const messageContent = data.data;
-                    const key = messageContent.key ||
-                        messageContent.alias ||
-                        messageContent.entry ||
-                        messageContent.modelName;
-                    const contentData = messageContent.data;
-                    if (key === props.model) {
-                        mergeNewContent(contentData);
-                        setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
-                    }
-                    break;
-                }
-            }
-        }
-    }
-    function evaluateJsCode() {
-        // run any dynamic JS code attached to content
-        const jsCode = props.builderContextSignal.content?.data?.jsCode;
-        if (jsCode) {
-            evaluate({
-                code: jsCode,
-                context: props.context || {},
-                localState: undefined,
-                rootState: props.builderContextSignal.rootState,
-                rootSetState: props.builderContextSignal.rootSetState,
-            });
-        }
-    }
-    const [httpReqsData, setHttpReqsData] = useState(() => ({}));
-    const [clicked, setClicked] = useState(() => false);
-    function onClick(event) {
-        if (props.builderContextSignal.content) {
-            const variationId = props.builderContextSignal.content?.testVariationId;
-            const contentId = props.builderContextSignal.content?.id;
-            _track({
-                type: "click",
-                canTrack: canTrackToUse,
-                contentId,
-                apiKey: props.apiKey,
-                variationId: variationId !== contentId ? variationId : undefined,
-                ...getInteractionPropertiesForEvent(event),
-                unique: !clicked,
-            });
-        }
-        if (!clicked) {
-            setClicked(true);
-        }
-    }
-    function evalExpression(expression) {
-        return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
-            code: group,
-            context: props.context || {},
-            localState: undefined,
-            rootState: props.builderContextSignal.rootState,
-            rootSetState: props.builderContextSignal.rootSetState,
-        }));
-    }
-    function handleRequest({ url, key }) {
-        fetch(url)
-            .then((response) => response.json())
-            .then((json) => {
-            const newState = {
-                ...props.builderContextSignal.rootState,
-                [key]: json,
-            };
-            props.builderContextSignal.rootSetState?.(newState);
-            httpReqsData[key] = true;
-        })
-            .catch((err) => {
-            console.error("error fetching dynamic data", url, err);
-        });
-    }
-    function runHttpRequests() {
-        const requests = props.builderContextSignal.content?.data?.httpRequests ?? {};
-        Object.entries(requests).forEach(([key, url]) => {
-            if (url && (!httpReqsData[key] || isEditing())) {
-                const evaluatedUrl = evalExpression(url);
-                handleRequest({
-                    url: evaluatedUrl,
-                    key,
-                });
-            }
-        });
-    }
-    function emitStateUpdate() {
-        if (isEditing()) {
-            window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
-                detail: {
-                    state: fastClone(props.builderContextSignal.rootState),
-                    ref: {
-                        name: props.model,
-                    },
-                },
-            }));
-        }
-    }
-    useEffect(() => {
-        if (!props.apiKey) {
-            logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
-        }
-        if (isBrowser()) {
-            if (isEditing()) {
-                setForceReRenderCount(forceReRenderCount + 1);
-                window.addEventListener("message", processMessage);
-                registerInsertMenu();
-                setupBrowserForEditing({
-                    ...(props.locale
-                        ? {
-                            locale: props.locale,
-                        }
-                        : {}),
-                    ...(props.includeRefs
-                        ? {
-                            includeRefs: props.includeRefs,
-                        }
-                        : {}),
-                    ...(props.enrich
-                        ? {
-                            enrich: props.enrich,
-                        }
-                        : {}),
-                });
-                Object.values(props.builderContextSignal.componentInfos).forEach((registeredComponent) => {
-                    const message = createRegisterComponentMessage(registeredComponent);
-                    window.parent?.postMessage(message, "*");
-                });
-                window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
-            }
-            if (props.builderContextSignal.content) {
-                const variationId = props.builderContextSignal.content?.testVariationId;
-                const contentId = props.builderContextSignal.content?.id;
-                _track({
-                    type: "impression",
-                    canTrack: canTrackToUse,
-                    contentId,
-                    apiKey: props.apiKey,
-                    variationId: variationId !== contentId ? variationId : undefined,
-                });
-            }
-            // override normal content in preview mode
-            if (isPreviewing()) {
-                const searchParams = new URL(location.href).searchParams;
-                const searchParamPreviewModel = searchParams.get("builder.preview");
-                const searchParamPreviewId = searchParams.get(`builder.preview.${searchParamPreviewModel}`);
-                const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
-                /**
-                 * Make sure that:
-                 * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered  *  at the same time, e.g. header/page/footer.  * - the API key is the same, since we don't want to preview content from other organizations.
-                 * - if there is content, that the preview ID is the same as that of the one we receive.
-                 *
-                 * TO-DO: should we only update the state when there is a change?
-                 **/
-                if (searchParamPreviewModel === props.model &&
-                    previewApiKey === props.apiKey &&
-                    (!props.content || searchParamPreviewId === props.content.id)) {
-                    fetchOneEntry({
-                        model: props.model,
-                        apiKey: props.apiKey,
-                        apiVersion: props.builderContextSignal.apiVersion,
-                    }).then((content) => {
-                        if (content) {
-                            mergeNewContent(content);
-                        }
-                    });
-                }
-            }
-            evaluateJsCode();
-            runHttpRequests();
-            emitStateUpdate();
-        }
-    }, []);
-    useEffect(() => {
-        if (props.content) {
-            mergeNewContent(props.content);
-        }
-    }, [props.content]);
-    useEffect(() => { }, [shouldSendResetCookie]);
-    useEffect(() => {
-        evaluateJsCode();
-    }, [
-        props.builderContextSignal.content?.data?.jsCode,
-        props.builderContextSignal.rootState,
-    ]);
-    useEffect(() => {
-        runHttpRequests();
-    }, [props.builderContextSignal.content?.data?.httpRequests]);
-    useEffect(() => {
-        emitStateUpdate();
-    }, [props.builderContextSignal.rootState]);
-    useEffect(() => {
-        return () => {
-            if (isBrowser()) {
-                window.removeEventListener("message", processMessage);
-                window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
-            }
-        };
-    }, []);
-    return (React.createElement(builderContext.Provider, { value: props.builderContextSignal }, props.builderContextSignal.content ? (React.createElement(React.Fragment, null,
-        React.createElement("div", { key: forceReRenderCount, ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": props.builderContextSignal.content?.id, "builder-model": props.model, ...{}, ...(props.showContent
-                ? {}
-                : {
-                    hidden: true,
-                    "aria-hidden": true,
-                }), className: props.classNameProp }, props.children))) : null));
-}
-export default EnableEditor;

package/dist/components/content/components/styles.helpers.js

@@ -1,58 +0,0 @@
-const getCssFromFont = (font) => {
-    // TODO: compute what font sizes are used and only load those.......
-    const family = font.family + (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
-    const name = family.split(',')[0];
-    const url = font.fileUrl ?? font?.files?.regular;
-    let str = '';
-    if (url && family && name) {
-        str += `
-@font-face {
-font-family: "${family}";
-src: local("${name}"), url('${url}') format('woff2');
-font-display: fallback;
-font-weight: 400;
-}
-      `.trim();
-    }
-    if (font.files) {
-        for (const weight in font.files) {
-            const isNumber = String(Number(weight)) === weight;
-            if (!isNumber) {
-                continue;
-            }
-            // TODO: maybe limit number loaded
-            const weightUrl = font.files[weight];
-            if (weightUrl && weightUrl !== url) {
-                str += `
-@font-face {
-font-family: "${family}";
-src: url('${weightUrl}') format('woff2');
-font-display: fallback;
-font-weight: ${weight};
-}
-        `.trim();
-            }
-        }
-    }
-    return str;
-};
-export const getFontCss = ({ customFonts }) => {
-    // TODO: flag for this
-    // if (!this.builder.allowCustomFonts) {
-    //   return '';
-    // }
-    // TODO: separate internal data from external
-    return customFonts?.map(font => getCssFromFont(font))?.join(' ') || '';
-};
-export const getCss = ({ cssCode, contentId }) => {
-    if (!cssCode) {
-        return '';
-    }
-    if (!contentId) {
-        return cssCode;
-    }
-    // Allow using `&` in custom CSS code like @emotion
-    // E.g. `& .foobar { ... }` to scope CSS
-    // TODO: handle if '&' is within a string like `content: "&"`
-    return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
-};

package/dist/components/content/components/styles.js

@@ -1,32 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState } from "react";
-import InlinedStyles from "../../inlined-styles";
-import { getCss } from "./styles.helpers.js";
-import { getFontCss } from "./styles.helpers.js";
-function ContentStyles(props) {
-    const [injectedStyles, setInjectedStyles] = useState(() => `
-${getCss({
-        cssCode: props.cssCode,
-        contentId: props.contentId,
-    })}
-${getFontCss({
-        customFonts: props.customFonts,
-    })}
-
-.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-  margin: 0;
-}
-.builder-text > p, .builder-text > .builder-paragraph {
-  color: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  font-weight: inherit;
-  font-size: inherit;
-  text-align: inherit;
-  font-family: inherit;
-}
-`.trim());
-    return React.createElement(InlinedStyles, { styles: injectedStyles });
-}
-export default ContentStyles;

package/dist/components/content/content.helpers.js

@@ -1,30 +0,0 @@
-export const getContextStateInitialValue = ({ content, data, locale }) => {
-    const defaultValues = {};
-    // set default values for content state inputs
-    content?.data?.inputs?.forEach(input => {
-        if (input.name && input.defaultValue !== undefined && content?.data?.state && content.data.state[input.name] === undefined) {
-            defaultValues[input.name] = input.defaultValue;
-        }
-    });
-    const stateToUse = {
-        ...content?.data?.state,
-        ...data,
-        ...(locale ? {
-            locale
-        } : {})
-    };
-    return {
-        ...defaultValues,
-        ...stateToUse
-    };
-};
-export const getContentInitialValue = ({ content, data }) => {
-    return !content ? undefined : {
-        ...content,
-        data: {
-            ...content?.data,
-            ...data
-        },
-        meta: content?.meta
-    };
-};

package/dist/components/content/content.js

@@ -1,85 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState } from "react";
-import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
-import { components, serializeComponentInfo, } from "../../functions/register-component.js";
-import Blocks from "../blocks/blocks";
-import ContentStyles from "./components/styles";
-import { getContentInitialValue, getContextStateInitialValue, } from "./content.helpers.js";
-import { TARGET } from "../../constants/target.js";
-import { getRenderContentScriptString } from "../content-variants/helpers.js";
-import EnableEditor from "./components/enable-editor";
-import InlinedScript from "../inlined-script";
-import ComponentsContext from "../../context/components.context.js";
-function ContentComponent(props) {
-    const [scriptStr, setScriptStr] = useState(() => getRenderContentScriptString({
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-        variationId: props.content?.testVariationId,
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-        contentId: props.content?.id,
-    }));
-    function contentSetState(newRootState) {
-        setBuilderContextSignal((PREVIOUS_VALUE) => ({
-            ...PREVIOUS_VALUE,
-            rootState: newRootState,
-        }));
-    }
-    const [registeredComponents, setRegisteredComponents] = useState(() => [
-        ...getDefaultRegisteredComponents(),
-        // While this `components` object is deprecated, we must maintain support for it.
-        // Since users are able to override our default components, we need to make sure that we do not break such
-        // existing usage.
-        // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
-        // which is the new standard way of providing custom components, and must therefore take precedence.
-        ...components,
-        ...(props.customComponents || []),
-    ].reduce((acc, { component, ...info }) => ({
-        ...acc,
-        [info.name]: {
-            component: component,
-            ...serializeComponentInfo(info),
-        },
-    }), {}));
-    const [builderContextSignal, setBuilderContextSignal] = useState(() => ({
-        content: getContentInitialValue({
-            content: props.content,
-            data: props.data,
-        }),
-        localState: undefined,
-        rootState: getContextStateInitialValue({
-            content: props.content,
-            data: props.data,
-            locale: props.locale,
-        }),
-        rootSetState: contentSetState,
-        context: props.context || {},
-        apiKey: props.apiKey,
-        apiVersion: props.apiVersion,
-        componentInfos: [
-            ...getDefaultRegisteredComponents(),
-            // While this `components` object is deprecated, we must maintain support for it.
-            // Since users are able to override our default components, we need to make sure that we do not break such
-            // existing usage.
-            // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
-            // which is the new standard way of providing custom components, and must therefore take precedence.
-            ...components,
-            ...(props.customComponents || []),
-        ].reduce((acc, { component: _, ...info }) => ({
-            ...acc,
-            [info.name]: serializeComponentInfo(info),
-        }), {}),
-        inheritedStyles: {},
-    }));
-    return (React.createElement(ComponentsContext.Provider, { value: {
-            registeredComponents: registeredComponents,
-        } },
-        React.createElement(EnableEditor, { content: props.content, model: props.model, context: props.context, apiKey: props.apiKey, canTrack: props.canTrack, locale: props.locale, includeRefs: props.includeRefs, enrich: props.enrich, classNameProp: props.classNameProp, showContent: props.showContent, builderContextSignal: builderContextSignal, ...{
-                setBuilderContextSignal: setBuilderContextSignal,
-            } },
-            props.isSsrAbTest ? (React.createElement(React.Fragment, null,
-                React.createElement(InlinedScript, { scriptStr: scriptStr }))) : null,
-            TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
-                React.createElement(ContentStyles, { contentId: builderContextSignal.content?.id, cssCode: builderContextSignal.content?.data?.cssCode, customFonts: builderContextSignal.content?.data?.customFonts }))) : null,
-            React.createElement(Blocks, { blocks: builderContextSignal.content?.data?.blocks, context: builderContextSignal, registeredComponents: registeredComponents }))));
-}
-export default ContentComponent;

package/dist/components/content/content.types.js

@@ -1 +0,0 @@
-export {};

package/dist/components/content/index.js

@@ -1 +0,0 @@
-export { default } from './content';

package/dist/components/content/wrap-component-ref.js

@@ -1,6 +0,0 @@
-/**
- * Apply target-specific transformations to the component reference.
- *
- * See overrides/* for examples.
- */
-export const wrapComponentRef = (component) => component;

package/dist/components/content-variants/content-variants.js

@@ -1,52 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState, useEffect } from "react";
-import { checkShouldRunVariants, getScriptString, getVariants, getVariantsScriptString, } from "./helpers.js";
-import ContentComponent from "../content/content";
-import { getDefaultCanTrack } from "../../helpers/canTrack.js";
-import InlinedStyles from "../inlined-styles";
-import { handleABTestingSync } from "../../helpers/ab-tests.js";
-import InlinedScript from "../inlined-script";
-import { TARGET } from "../../constants/target.js";
-function ContentVariants(props) {
-    const [shouldRenderVariants, setShouldRenderVariants] = useState(() => checkShouldRunVariants({
-        canTrack: getDefaultCanTrack(props.canTrack),
-        content: props.content,
-    }));
-    function variantScriptStr() {
-        return getVariantsScriptString(getVariants(props.content).map((value) => ({
-            id: value.testVariationId,
-            testRatio: value.testRatio,
-        })), props.content?.id || "");
-    }
-    function hideVariantsStyleString() {
-        return getVariants(props.content)
-            .map((value) => `.variant-${value.testVariationId} { display: none; } `)
-            .join("");
-    }
-    function defaultContent() {
-        return shouldRenderVariants
-            ? {
-                ...props.content,
-                testVariationId: props.content?.id,
-            }
-            : handleABTestingSync({
-                item: props.content,
-                canTrack: getDefaultCanTrack(props.canTrack),
-            });
-    }
-    useEffect(() => {
-        /**
-         * We unmount the non-winning variants post-hydration in Vue.
-         */
-    }, []);
-    return (React.createElement(React.Fragment, null,
-        !props.__isNestedRender && TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
-            React.createElement(InlinedScript, { scriptStr: getScriptString() }))) : null,
-        shouldRenderVariants ? (React.createElement(React.Fragment, null,
-            React.createElement(InlinedStyles, { id: `variants-styles-${props.content?.id}`, styles: hideVariantsStyleString() }),
-            React.createElement(InlinedScript, { scriptStr: variantScriptStr() }),
-            getVariants(props.content)?.map((variant) => (React.createElement(ContentComponent, { key: variant.testVariationId, content: variant, showContent: false, classNameProp: undefined, model: props.model, data: props.data, context: props.context, apiKey: props.apiKey, apiVersion: props.apiVersion, customComponents: props.customComponents, canTrack: props.canTrack, locale: props.locale, includeRefs: props.includeRefs, enrich: props.enrich, isSsrAbTest: shouldRenderVariants }))))) : null,
-        React.createElement(ContentComponent, { ...{}, content: defaultContent(), classNameProp: `variant-${props.content?.id}`, showContent: true, model: props.model, data: props.data, context: props.context, apiKey: props.apiKey, apiVersion: props.apiVersion, customComponents: props.customComponents, canTrack: props.canTrack, locale: props.locale, includeRefs: props.includeRefs, enrich: props.enrich, isSsrAbTest: shouldRenderVariants })));
-}
-export default ContentVariants;

package/dist/components/content-variants/content-variants.types.js

@@ -1 +0,0 @@
-export {};