@builder.io/sdk-react 0.4.3 → 0.4.5

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

@@ -0,0 +1,32 @@
+'use client';
+import * as React from "react";
+import { useState } from "react";
+import InlinedStyles from "../../inlined-styles";
+import { getCss } from "./content-styles.helpers";
+import { getFontCss } from "./content-styles.helpers";
+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/sdk/components/content/components/enable-editor.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type BuilderEditorProps = Omit<ContentProps, "customComponents"> & {
+    customComponents: Dictionary<ComponentInfo>;
+    builderContextSignal: BuilderContextInterface;
+    setBuilderContextSignal: any;
+    children?: any;
+};
+import type { BuilderContextInterface } from "../../../context/types.js";
+import type { ContentProps } from "../content.types.js";
+import type { Dictionary } from "../../../types/typescript.js";
+import type { ComponentInfo } from "../../../types/components.js";
+declare function EnableEditor(props: BuilderEditorProps): JSX.Element;
+export default EnableEditor;

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

@@ -0,0 +1,278 @@
+'use client';
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+import { evaluate } from "../../../functions/evaluate.js";
+import { getContent } from "../../../functions/get-content/index.js";
+import { fetch } from "../../../functions/get-fetch.js";
+import { isBrowser } from "../../../functions/is-browser.js";
+import { isEditing } from "../../../functions/is-editing.js";
+import { isPreviewing } from "../../../functions/is-previewing.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 { TARGET } from "../../../constants/target.js";
+import { logger } from "../../../helpers/logger.js";
+function EnableEditor(props) {
+    const elementRef = useRef(null);
+    const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
+    function mergeNewContent(newContent) {
+        props.setBuilderContextSignal((PREVIOUS_VALUE) => ({
+            ...PREVIOUS_VALUE,
+            content: {
+                ...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,
+                },
+            },
+        }));
+    }
+    const [canTrackToUse, setCanTrackToUse] = useState(() => checkIsDefined(props.canTrack) ? props.canTrack : true);
+    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;
+                }
+                case "builder.patchUpdates": {
+                    // TODO
+                    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: 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);
+                registerInsertMenu();
+                setupBrowserForEditing({
+                    ...(props.locale
+                        ? {
+                            locale: props.locale,
+                        }
+                        : {}),
+                    ...(props.includeRefs
+                        ? {
+                            includeRefs: props.includeRefs,
+                        }
+                        : {}),
+                    ...(props.enrich
+                        ? {
+                            enrich: props.enrich,
+                        }
+                        : {}),
+                });
+                Object.values(props.builderContextSignal.registeredComponents).forEach((registeredComponent) => {
+                    const message = createRegisterComponentMessage(registeredComponent);
+                    window.parent?.postMessage(message, "*");
+                });
+                window.addEventListener("message", processMessage);
+                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)) {
+                    getContent({
+                        model: props.model,
+                        apiKey: props.apiKey,
+                        apiVersion: props.apiVersion,
+                    }).then((content) => {
+                        if (content) {
+                            mergeNewContent(content);
+                        }
+                    });
+                }
+            }
+            evaluateJsCode();
+            runHttpRequests();
+            emitStateUpdate();
+        }
+    }, []);
+    useEffect(() => {
+        if (props.content) {
+            mergeNewContent(props.content);
+        }
+    }, [props.content]);
+    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", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": props.builderContextSignal.content?.id, "builder-model": props.model, key: forceReRenderCount, ...(TARGET === "reactNative"
+                ? {
+                    dataSet: {
+                        // currently, we can't set the actual ID here. // we don't need it right now, we just need to identify content divs for testing.
+                        "builder-content-id": "",
+                    },
+                }
+                : {}), ...(props.hideContent
+                ? {
+                    hidden: true,
+                    "aria-hidden": true,
+                }
+                : {}), className: props.classNameProp }, props.children))) : null));
+}
+export default EnableEditor;

package/dist/sdk/components/content/content.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ContentProps } from "./content.types.js";
+declare function Content(props: ContentProps): JSX.Element;
+export default Content;

package/dist/sdk/components/content/content.helpers.d.ts

@@ -0,0 +1,7 @@
+import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../types/typescript';
+import type { ContentProps } from './content.types';
+export declare const getContextStateInitialValue: ({ content, data, locale, }: Pick<ContentProps, 'content' | 'data' | 'locale'>) => {
+    [x: string]: unknown;
+};
+export declare const getContentInitialValue: ({ content, data, }: Pick<ContentProps, 'content' | 'data'>) => Nullable<BuilderContent>;

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

@@ -0,0 +1,30 @@
+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/sdk/components/content/content.js

@@ -0,0 +1,97 @@
+'use client';
+import * as React from "react";
+import { useState, useEffect } from "react";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import { components } from "../../functions/register-component.js";
+import Blocks from "../blocks/blocks";
+import ContentStyles from "./components/content-styles";
+import { getContentInitialValue, getContextStateInitialValue, } from "./content.helpers.js";
+import { TARGET } from "../../constants/target.js";
+import { getRenderContentScriptString } from "../content-variants/helpers.js";
+import { wrapComponentRef } from "./wrap-component-ref.js";
+import EnableEditor from "./components/enable-editor";
+function Content(props) {
+    const [scriptStr, setScriptStr] = useState(() => getRenderContentScriptString({
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+        contentId: props.content?.id,
+        parentContentId: props.parentContentId,
+    }));
+    function contentSetState(newRootState) {
+        setBuilderContextSignal((PREVIOUS_VALUE) => ({
+            ...PREVIOUS_VALUE,
+            rootState: newRootState,
+        }));
+    }
+    const [customComps, setCustomComps] = 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, info) => ({
+        ...acc,
+        [info.name]: info,
+    }), {}));
+    function customComponentsInfo() {
+        // TO-DO: fix once we remove `useStore<any>` hack in Qwik generator.
+        return Object.values(customComps).reduce((acc, { component: _, ...info }) => ({
+            ...acc,
+            [info.name]: info,
+        }), {});
+    }
+    function tempContextSignalSetter() {
+        return setBuilderContextSignal;
+    }
+    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: undefined,
+        context: props.context || {},
+        apiKey: props.apiKey,
+        apiVersion: props.apiVersion,
+        registeredComponents: [
+            ...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, ...curr }) => ({
+            ...acc,
+            [curr.name]: {
+                component: TARGET === "vue3" ? wrapComponentRef(component) : component,
+                ...curr,
+            },
+        }), {}),
+        inheritedStyles: {},
+    }));
+    useEffect(() => {
+        if (!builderContextSignal.content) {
+            builderContextSignal.content = getContentInitialValue({
+                content: props.content,
+                data: props.data,
+            });
+        }
+    }, [props.content, props.data, props.locale]);
+    return (React.createElement(React.Fragment, null, builderContextSignal.content ? (React.createElement(React.Fragment, null,
+        React.createElement(EnableEditor, { content: props.content, model: props.model, data: props.data, context: props.context, apiKey: props.apiKey, apiVersion: props.apiVersion, customComponents: customComponentsInfo(), canTrack: props.canTrack, locale: props.locale, includeRefs: props.includeRefs, enrich: props.enrich, classNameProp: props.classNameProp, hideContent: props.hideContent, parentContentId: props.parentContentId, isSsrAbTest: props.isSsrAbTest, builderContextSignal: builderContextSignal, setBuilderContextSignal: tempContextSignalSetter() },
+            props.isSsrAbTest ? (React.createElement(React.Fragment, null,
+                React.createElement("script", { dangerouslySetInnerHTML: { __html: 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, components: customComps })))) : null));
+}
+export default Content;

package/dist/sdk/components/content/content.types.d.ts

@@ -0,0 +1,38 @@
+import type { BuilderRenderContext, RegisteredComponent, BuilderRenderState } from '../../context/types';
+import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../types/typescript';
+import type { ApiVersion } from '../../types/api-version';
+export interface ContentProps {
+    content?: Nullable<BuilderContent>;
+    model?: string;
+    data?: {
+        [key: string]: any;
+    };
+    context?: BuilderRenderContext;
+    apiKey: string;
+    apiVersion?: ApiVersion;
+    customComponents?: RegisteredComponent[];
+    canTrack?: boolean;
+    locale?: string;
+    /** @deprecated use `enrich` instead **/
+    includeRefs?: boolean;
+    enrich?: boolean;
+    /**
+     * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
+     */
+    classNameProp?: string;
+    hideContent?: boolean;
+    parentContentId?: string;
+    isSsrAbTest?: boolean;
+}
+export interface BuilderComponentStateChange {
+    state: BuilderRenderState;
+    ref: {
+        name?: string;
+        props?: {
+            builderBlock?: {
+                id?: string;
+            };
+        };
+    };
+}

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

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

package/dist/sdk/components/content/index.d.ts

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

package/dist/sdk/components/content/index.js

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

package/dist/sdk/components/content/wrap-component-ref.d.ts

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

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

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

package/dist/sdk/components/content-variants/content-variants.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+type VariantsProviderProps = ContentProps;
+import type { ContentProps } from "../content/content.types";
+declare function RenderContentVariants(props: VariantsProviderProps): JSX.Element;
+export default RenderContentVariants;

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

@@ -0,0 +1,37 @@
+'use client';
+import * as React from "react";
+import { useState } from "react";
+import { checkShouldRunVariants, getVariants, getVariantsScriptString, } from "./helpers";
+import Content from "../content/content";
+import { getDefaultCanTrack } from "../../helpers/canTrack";
+import InlinedStyles from "../inlined-styles";
+import { handleABTestingSync } from "../../helpers/ab-tests";
+function RenderContentVariants(props) {
+    const [variantScriptStr, setVariantScriptStr] = useState(() => getVariantsScriptString(getVariants(props.content).map((value) => ({
+        id: value.id,
+        testRatio: value.testRatio,
+    })), props.content?.id || ""));
+    const [shouldRenderVariants, setShouldRenderVariants] = useState(() => checkShouldRunVariants({
+        canTrack: getDefaultCanTrack(props.canTrack),
+        content: props.content,
+    }));
+    const [hideVariantsStyleString, setHideVariantsStyleString] = useState(() => getVariants(props.content)
+        .map((value) => `.variant-${value.id} { display: none; } `)
+        .join(""));
+    const [contentToRender, setContentToRender] = useState(() => checkShouldRunVariants({
+        canTrack: getDefaultCanTrack(props.canTrack),
+        content: props.content,
+    })
+        ? props.content
+        : handleABTestingSync({
+            item: props.content,
+            canTrack: getDefaultCanTrack(props.canTrack),
+        }));
+    return (React.createElement(React.Fragment, null,
+        shouldRenderVariants ? (React.createElement(React.Fragment, null,
+            React.createElement(InlinedStyles, { id: `variants-styles-${props.content?.id}`, styles: hideVariantsStyleString }),
+            React.createElement("script", { id: `variants-script-${props.content?.id}`, dangerouslySetInnerHTML: { __html: variantScriptStr } }),
+            getVariants(props.content)?.map((variant) => (React.createElement(Content, { key: variant.id, content: variant, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, hideContent: true, parentContentId: props.content?.id, isSsrAbTest: shouldRenderVariants }))))) : null,
+        React.createElement(Content, { model: props.model, content: contentToRender, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, classNameProp: `variant-${props.content?.id}`, parentContentId: props.content?.id, isSsrAbTest: shouldRenderVariants })));
+}
+export default RenderContentVariants;

package/dist/sdk/components/content-variants/helpers.d.ts

@@ -0,0 +1,17 @@
+import type { Nullable } from '../../helpers/nullable';
+import type { BuilderContent } from '../../types/builder-content';
+export declare const getVariants: (content: Nullable<BuilderContent>) => import("../../types/builder-content").BuilderContentVariation[];
+export declare const checkShouldRunVariants: ({ canTrack, content, }: {
+    canTrack: Nullable<boolean>;
+    content: Nullable<BuilderContent>;
+}) => boolean;
+type VariantData = {
+    id: string;
+    testRatio?: number;
+};
+export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
+export declare const getRenderContentScriptString: ({ parentContentId, contentId, }: {
+    contentId: string;
+    parentContentId: string;
+}) => string;
+export {};