@builder.io/sdk-react 0.4.4 → 0.5.0

package/dist/components/content/content.js

@@ -0,0 +1,79 @@
+"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";
+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(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.d.ts

@@ -0,0 +1,24 @@
+import type { BuilderRenderState } from '../../context/types.js';
+import type { EnforcePartials } from '../../types/enforced-partials.js';
+import type { ContentVariantsProps } from '../content-variants/content-variants.types.js';
+interface InternalRenderProps {
+    /**
+     * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
+     */
+    classNameProp: string | undefined;
+    showContent: boolean;
+    isSsrAbTest: boolean;
+}
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsProps>;
+export interface BuilderComponentStateChange {
+    state: BuilderRenderState;
+    ref: {
+        name?: string;
+        props?: {
+            builderBlock?: {
+                id?: string;
+            };
+        };
+    };
+}
+export {};

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

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

package/dist/components/content/index.js

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

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

@@ -0,0 +1,9 @@
+type VariantsProviderProps = ContentVariantsProps & {
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    __isNestedRender?: boolean;
+};
+import type { ContentVariantsProps } from "./content-variants.types.js";
+declare function ContentVariants(props: VariantsProviderProps): JSX.Element;
+export default ContentVariants;

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

@@ -0,0 +1,46 @@
+"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("");
+    }
+    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: shouldRenderVariants
+                ? props.content
+                : handleABTestingSync({
+                    item: props.content,
+                    canTrack: getDefaultCanTrack(props.canTrack),
+                }), 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.d.ts

@@ -0,0 +1,20 @@
+import type { BuilderRenderContext, RegisteredComponent } from '../../context/types.js';
+import type { ApiVersion } from '../../types/api-version.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { Nullable } from '../../types/typescript.js';
+export interface ContentVariantsProps {
+    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;
+}

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

@@ -0,0 +1,41 @@
+import type { Nullable } from '../../helpers/nullable.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+export declare const getVariants: (content: Nullable<BuilderContent>) => {
+    testVariationId: string;
+    id: string;
+    data?: {
+        [key: string]: any;
+        title?: string;
+        blocks?: import("../../types/builder-block.js").BuilderBlock[];
+        inputs?: import("../../types/input.js").Input[];
+        state?: {
+            [key: string]: any;
+        };
+        jsCode?: string;
+        tsCode?: string;
+        httpRequests?: {
+            [key: string]: string;
+        };
+    };
+    name?: string;
+    testRatio?: number;
+    meta?: {
+        [key: string]: any;
+        breakpoints?: import("../../types/builder-content.js").Breakpoints;
+    };
+}[];
+export declare const checkShouldRunVariants: ({ canTrack, content }: {
+    canTrack: Nullable<boolean>;
+    content: Nullable<BuilderContent>;
+}) => boolean;
+type VariantData = {
+    id: string;
+    testRatio?: number;
+};
+export declare const getScriptString: () => string;
+export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
+export declare const getRenderContentScriptString: ({ contentId, variationId }: {
+    variationId: string;
+    contentId: string;
+}) => string;
+export {};

package/dist/{sdk/components/render-content-variants → components/content-variants}/helpers.js

@@ -1,17 +1,32 @@
-import { TARGET } from '../../constants/target';
-import { isBrowser } from '../../functions/is-browser';
-export const getVariants = (content) => Object.values(content?.variations || {});
-export const checkShouldRunVariants = ({ canTrack, content, }) => {
+import { TARGET } from '../../constants/target.js';
+import { isBrowser } from '../../functions/is-browser.js';
+export const getVariants = (content) => Object.values(content?.variations || {}).map(variant => ({
+    ...variant,
+    testVariationId: variant.id,
+    id: content?.id
+}));
+export const checkShouldRunVariants = ({ canTrack, content }) => {
     const hasVariants = getVariants(content).length > 0;
-    if (!hasVariants) {
+    /**
+     * We cannot SSR in React-Native.
+     */
+    if (TARGET === 'reactNative')
         return false;
-    }
-    if (!canTrack) {
+    if (!hasVariants)
         return false;
-    }
-    if (isBrowser()) {
+    if (!canTrack)
+        return false;
+    /**
+     * For Vue 2 and Vue 3, we need to (initially) render the variants. This is to avoid hydration mismatch errors.
+     * Unlike React, Vue's hydration checks are shallow and do not check the attributes/contents of each element, so we
+     * are able to modify the `hidden` HTML attributes and `display` CSS properties without causing a hydration mismatch error.
+     *
+     * NOTE: after the app is hydrated, we strip the variants from the DOM (on mount) to reduce the amount of HTML in the DOM.
+     */
+    if (TARGET === 'vue2' || TARGET === 'vue3')
+        return true;
+    if (isBrowser())
         return false;
-    }
     return true;
 };
 /**
@@ -27,13 +42,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
                 date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
                 expires = '; expires=' + date.toUTCString();
             }
-            document.cookie =
-                name +
-                    '=' +
-                    (value || '') +
-                    expires +
-                    '; path=/' +
-                    '; Secure; SameSite=None';
+            document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';
         }
         function getCookie(name) {
             const nameEQ = name + '=';
@@ -49,7 +58,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
         }
         const cookieName = `builder.tests.${contentId}`;
         const variantInCookie = getCookie(cookieName);
-        const availableIDs = variants.map((vr) => vr.id).concat(contentId);
+        const availableIDs = variants.map(vr => vr.id).concat(contentId);
         /**
          * cookie already exists
          */
@@ -77,26 +86,23 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
         return contentId;
     }
     const winningVariantId = getAndSetVariantId();
-    const styleEl = document.getElementById(`variants-styles-${contentId}`);
+    const styleEl = document.currentScript?.previousElementSibling;
     /**
      * For React to work, we need hydration to match SSR, so we completely remove this node and the styles tag.
      */
     if (isHydrationTarget) {
         styleEl.remove();
-        const thisScriptEl = document.getElementById(`variants-script-${contentId}`);
+        const thisScriptEl = document.currentScript;
         thisScriptEl?.remove();
     }
     else {
         /* update styles to hide all variants except the winning variant */
-        const newStyleStr = variants
-            .concat({ id: contentId })
-            .filter((variant) => variant.id !== winningVariantId)
-            .map((value) => {
+        const newStyleStr = variants.concat({
+            id: contentId
+        }).filter(variant => variant.id !== winningVariantId).map(value => {
             return `.variant-${value.id} {  display: none; }
         `;
-        })
-            .join('');
-        /* TO-DO: check if this actually updates the style */
+        }).join('');
         styleEl.innerHTML = newStyleStr;
     }
 }
@@ -122,8 +128,7 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget) {
     }
     const cookieName = `builder.tests.${defaultContentId}`;
     const variantId = getCookie(cookieName);
-    /** get parent div by searching on `builder-content-id` attr */
-    const parentDiv = document.querySelector(`[builder-content-id="${variantContentId}"]`);
+    const parentDiv = document.currentScript?.parentElement;
     const variantIsDefaultContent = variantContentId === defaultContentId;
     if (variantId === variantContentId) {
         if (variantIsDefaultContent) {
@@ -156,10 +161,7 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget) {
     }
     return;
 }
-const getIsHydrationTarget = (target) => target === 'react' ||
-    target === 'reactNative' ||
-    target === 'vue3' ||
-    target === 'vue2';
+const getIsHydrationTarget = (target) => target === 'react' || target === 'reactNative';
 const isHydrationTarget = getIsHydrationTarget(TARGET);
 /**
  * We hardcode explicit function names here, because the `.toString()` of a function can change depending on the bundler.
@@ -167,18 +169,21 @@ const isHydrationTarget = getIsHydrationTarget(TARGET);
  *
  * So we hardcode the function names here, and then use those names in the script string to make sure the function names are consistent.
  */
-const AB_TEST_FN_NAME = 'bldrAbTest';
-const CONTENT_FN_NAME = 'bldrCntntScrpt';
-export const getVariantsScriptString = (variants, contentId) => {
+const AB_TEST_FN_NAME = 'builderIoAbTest';
+const CONTENT_FN_NAME = 'builderIoRenderContent';
+export const getScriptString = () => {
     const fnStr = bldrAbTest.toString().replace(/\s+/g, ' ');
     const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, ' ');
     return `
-  const ${AB_TEST_FN_NAME} = ${fnStr}
-  const ${CONTENT_FN_NAME} = ${fnStr2}
-  ${AB_TEST_FN_NAME}("${contentId}", ${JSON.stringify(variants)}, ${isHydrationTarget})
+  window.${AB_TEST_FN_NAME} = ${fnStr}
+  window.${CONTENT_FN_NAME} = ${fnStr2}
   `;
 };
-export const getRenderContentScriptString = ({ parentContentId, contentId, }) => {
+export const getVariantsScriptString = (variants, contentId) => {
+    return `
+  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
+};
+export const getRenderContentScriptString = ({ contentId, variationId }) => {
     return `
-  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
 };

package/dist/components/inlined-script.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    scriptStr: string;
+    id?: string;
+}
+declare function InlinedScript(props: Props): JSX.Element;
+export default InlinedScript;

package/dist/components/inlined-script.js

@@ -0,0 +1,6 @@
+"use client";
+import * as React from "react";
+function InlinedScript(props) {
+    return (React.createElement("script", { dangerouslySetInnerHTML: { __html: props.scriptStr }, id: props.id }));
+}
+export default InlinedScript;

package/dist/components/inlined-styles.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    styles: string;
+    id?: string;
+}
+declare function InlinedStyles(props: Props): JSX.Element;
+export default InlinedStyles;

package/dist/{sdk/components/render-inlined-styles.js → components/inlined-styles.js}

@@ -1,6 +1,6 @@
-'use client';
+"use client";
 import * as React from "react";
-function RenderInlinedStyles(props) {
+function InlinedStyles(props) {
     return (React.createElement("style", { dangerouslySetInnerHTML: { __html: props.styles }, id: props.id }));
 }
-export default RenderInlinedStyles;
+export default InlinedStyles;

package/dist/{sdk/constants → constants}/builder-registered-components.js

@@ -24,16 +24,37 @@ import { componentInfo as customCodeInfo } from '../blocks/custom-code/component
  * Returns a list of all registered components.
  * NOTE: This needs to be a function to work around ESM circular dependencies.
  */
-export const getDefaultRegisteredComponents = () => [
-    { component: Button, ...buttonComponentInfo },
-    { component: Columns, ...columnsComponentInfo },
-    { component: customCode, ...customCodeInfo },
-    { component: embed, ...embedComponentInfo },
-    { component: Fragment, ...fragmentComponentInfo },
-    { component: Image, ...imageComponentInfo },
-    { component: Img, ...imgComponentInfo },
-    { component: Section, ...sectionComponentInfo },
-    { component: Symbol, ...symbolComponentInfo },
-    { component: Text, ...textComponentInfo },
-    { component: Video, ...videoComponentInfo },
-];
+export const getDefaultRegisteredComponents = () => [{
+        component: Button,
+        ...buttonComponentInfo
+    }, {
+        component: Columns,
+        ...columnsComponentInfo
+    }, {
+        component: customCode,
+        ...customCodeInfo
+    }, {
+        component: embed,
+        ...embedComponentInfo
+    }, {
+        component: Fragment,
+        ...fragmentComponentInfo
+    }, {
+        component: Image,
+        ...imageComponentInfo
+    }, {
+        component: Img,
+        ...imgComponentInfo
+    }, {
+        component: Section,
+        ...sectionComponentInfo
+    }, {
+        component: Symbol,
+        ...symbolComponentInfo
+    }, {
+        component: Text,
+        ...textComponentInfo
+    }, {
+        component: Video,
+        ...videoComponentInfo
+    }];

package/dist/{sdk/constants → constants}/device-sizes.js

@@ -1,20 +1,20 @@
-import { fastClone } from '../functions/fast-clone';
+import { fastClone } from '../functions/fast-clone.js';
 const SIZES = {
     small: {
         min: 320,
         default: 321,
-        max: 640,
+        max: 640
     },
     medium: {
         min: 641,
         default: 642,
-        max: 991,
+        max: 991
     },
     large: {
         min: 990,
         default: 991,
-        max: 1200,
-    },
+        max: 1200
+    }
 };
 export const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
 export const getSizesForBreakpoints = ({ small, medium }) => {
@@ -26,19 +26,20 @@ export const getSizesForBreakpoints = ({ small, medium }) => {
     newSizes.small = {
         max: small,
         min: smallMin,
-        default: smallMin + 1,
+        default: smallMin + 1
     };
     const mediumMin = newSizes.small.max + 1;
     newSizes.medium = {
         max: medium,
         min: mediumMin,
-        default: mediumMin + 1,
+        default: mediumMin + 1
     };
     const largeMin = newSizes.medium.max + 1;
     newSizes.large = {
         max: 2000,
+        // TODO: decide upper limit
         min: largeMin,
-        default: largeMin + 1,
+        default: largeMin + 1
     };
     return newSizes;
 };

package/dist/constants/sdk-version.d.ts

@@ -0,0 +1 @@
+export declare const SDK_VERSION = "0.5.0";

package/dist/constants/sdk-version.js

@@ -0,0 +1 @@
+export const SDK_VERSION = "0.5.0";

package/dist/{sdk/context → context}/builder.context.js

@@ -7,6 +7,6 @@ export default createContext({
     rootState: {},
     apiKey: null,
     apiVersion: undefined,
-    registeredComponents: {},
+    componentInfos: {},
     inheritedStyles: {},
 });

package/dist/{sdk/context → context}/types.d.ts

@@ -30,6 +30,6 @@ export interface BuilderContextInterface {
     localState: BuilderRenderState | undefined;
     apiKey: string | null;
     apiVersion: ApiVersion | undefined;
-    registeredComponents: RegisteredComponents;
+    componentInfos: Dictionary<ComponentInfo>;
     inheritedStyles: Record<string, unknown>;
 }

package/dist/functions/acorn_interpreter.d.ts

@@ -0,0 +1 @@
+export const j: {};