@builder.io/sdk-react 0.4.5 → 0.5.1-0

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

@@ -1,343 +0,0 @@
-'use client';
-import * as React from "react";
-import { useState, useRef, useEffect } from "react";
-import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
-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 { components, createRegisterComponentMessage, } from "../../functions/register-component.js";
-import { _track } from "../../functions/track/index.js";
-import RenderBlocks from "../render-blocks";
-import RenderContentStyles from "./components/render-styles";
-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 { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
-import { TARGET } from "../../constants/target.js";
-import { logger } from "../../helpers/logger.js";
-import { getRenderContentScriptString } from "../render-content-variants/helpers.js";
-import { wrapComponentRef } from "./wrap-component-ref.js";
-import InlinedScript from "../inlined-script";
-function RenderContent(props) {
-    const elementRef = useRef(null);
-    const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
-    const [overrideContent, setOverrideContent] = useState(() => null);
-    function mergeNewContent(newContent) {
-        setBuilderContextSignal((PREVIOUS_VALUE) => ({
-            ...PREVIOUS_VALUE,
-            content: {
-                ...builderContextSignal.content,
-                ...newContent,
-                data: {
-                    ...builderContextSignal.content?.data,
-                    ...newContent?.data,
-                },
-                meta: {
-                    ...builderContextSignal.content?.meta,
-                    ...newContent?.meta,
-                    breakpoints: newContent?.meta?.breakpoints ||
-                        builderContextSignal.content?.meta?.breakpoints,
-                },
-            },
-        }));
-    }
-    function setBreakpoints(breakpoints) {
-        setBuilderContextSignal((PREVIOUS_VALUE) => ({
-            ...PREVIOUS_VALUE,
-            content: {
-                ...builderContextSignal.content,
-                meta: {
-                    ...builderContextSignal.content?.meta,
-                    breakpoints,
-                },
-            },
-        }));
-    }
-    const [update, setUpdate] = useState(() => 0);
-    const [canTrackToUse, setCanTrackToUse] = useState(() => checkIsDefined(props.canTrack) ? props.canTrack : true);
-    function contentSetState(newRootState) {
-        setBuilderContextSignal((PREVIOUS_VALUE) => ({
-            ...PREVIOUS_VALUE,
-            rootState: newRootState,
-        }));
-    }
-    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 !== builderContextSignal.content?.id) {
-                        return;
-                    }
-                    if (breakpoints) {
-                        setBreakpoints(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 = builderContextSignal.content?.data?.jsCode;
-        if (jsCode) {
-            evaluate({
-                code: jsCode,
-                context: props.context || {},
-                localState: undefined,
-                rootState: builderContextSignal.rootState,
-                rootSetState: contentSetState,
-            });
-        }
-    }
-    const [httpReqsData, setHttpReqsData] = useState(() => ({}));
-    const [clicked, setClicked] = useState(() => false);
-    function onClick(event) {
-        if (builderContextSignal.content) {
-            const variationId = builderContextSignal.content?.testVariationId;
-            const contentId = 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: builderContextSignal.rootState,
-            rootSetState: contentSetState,
-        }));
-    }
-    function handleRequest({ url, key }) {
-        fetch(url)
-            .then((response) => response.json())
-            .then((json) => {
-            const newState = {
-                ...builderContextSignal.rootState,
-                [key]: json,
-            };
-            contentSetState(newState);
-        })
-            .catch((err) => {
-            console.error("error fetching dynamic data", url, err);
-        });
-    }
-    function runHttpRequests() {
-        const requests = 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: builderContextSignal.rootState,
-                    ref: {
-                        name: props.model,
-                    },
-                },
-            }));
-        }
-    }
-    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,
-    }));
-    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,
-        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 (!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(builderContextSignal.registeredComponents).forEach((registeredComponent) => {
-                    const message = createRegisterComponentMessage(registeredComponent);
-                    window.parent?.postMessage(message, "*");
-                });
-                window.addEventListener("message", processMessage);
-                window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
-            }
-            if (builderContextSignal.content) {
-                const variationId = builderContextSignal.content?.testVariationId;
-                const contentId = 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();
-    }, [
-        builderContextSignal.content?.data?.jsCode,
-        builderContextSignal.rootState,
-    ]);
-    useEffect(() => {
-        runHttpRequests();
-    }, [builderContextSignal.content?.data?.httpRequests]);
-    useEffect(() => {
-        emitStateUpdate();
-    }, [builderContextSignal.rootState]);
-    useEffect(() => {
-        return () => {
-            if (isBrowser()) {
-                window.removeEventListener("message", processMessage);
-                window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
-            }
-        };
-    }, []);
-    return (React.createElement(builderContext.Provider, { value: builderContextSignal }, builderContextSignal.content ? (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": builderContextSignal.content?.id, "builder-model": props.model, ...(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.showContent
-                ? {}
-                : {
-                    hidden: true,
-                    "aria-hidden": true,
-                }), className: props.classNameProp },
-            props.isSsrAbTest ? (React.createElement(React.Fragment, null,
-                React.createElement(InlinedScript, { scriptStr: scriptStr }))) : null,
-            TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
-                React.createElement(RenderContentStyles, { contentId: builderContextSignal.content?.id, cssCode: builderContextSignal.content?.data?.cssCode, customFonts: builderContextSignal.content?.data?.customFonts }))) : null,
-            React.createElement(RenderBlocks, { blocks: builderContextSignal.content?.data?.blocks, key: forceReRenderCount })))) : null));
-}
-export default RenderContent;

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

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

package/dist/sdk/components/render-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/sdk/components/render-content-variants/render-content-variants.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-type VariantsProviderProps = RenderContentVariantsProps & {
-    /**
-     * For internal use only. Do not provide this prop.
-     */
-    __isNestedRender?: boolean;
-};
-import type { RenderContentVariantsProps } from "./render-content-variants.types";
-declare function RenderContentVariants(props: VariantsProviderProps): JSX.Element;
-export default RenderContentVariants;

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-interface Props {
-    styles: string;
-    id?: string;
-}
-declare function RenderInlinedStyles(props: Props): JSX.Element;
-export default RenderInlinedStyles;

package/dist/sdk/components/render-inlined-styles.js

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

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

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

package/dist/sdk/constants/sdk-version.js

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

package/dist/sdk/functions/get-block-actions.js

@@ -1,15 +0,0 @@
-import { getEventHandlerName } from './event-handler-name.js';
-import { createEventHandler } from './get-block-actions-handler.js';
-export function getBlockActions(options) {
-    const obj = {};
-    const optionActions = options.block.actions ?? {};
-    for (const key in optionActions) {
-        // eslint-disable-next-line no-prototype-builtins
-        if (!optionActions.hasOwnProperty(key)) {
-            continue;
-        }
-        const value = optionActions[key];
-        obj[getEventHandlerName(key)] = createEventHandler(value, options);
-    }
-    return obj;
-}

package/dist/sdk/functions/get-block-properties.d.ts

@@ -1,7 +0,0 @@
-import type { BuilderBlock } from '../types/builder-block.js';
-export declare function getBlockProperties(block: BuilderBlock): {
-    'builder-id': string;
-    style: string | Partial<CSSStyleDeclaration>;
-    class: string;
-    href: any;
-};

package/dist/sdk/functions/get-content/ab-testing.d.ts

@@ -1,5 +0,0 @@
-import type { BuilderContent } from '../../types/builder-content.js';
-import type { CanTrack } from '../../types/can-track.js';
-export declare const handleABTesting: ({ item, canTrack, }: {
-    item: BuilderContent;
-} & CanTrack) => Promise<void>;

package/dist/sdk/functions/get-content/ab-testing.js

@@ -1,78 +0,0 @@
-import { getContentVariationCookie, setContentVariationCookie, } from '../../helpers/ab-tests.js';
-import { checkIsDefined } from '../../helpers/nullable.js';
-const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) &&
-    checkIsDefined(item.variations) &&
-    Object.keys(item.variations).length > 0;
-/**
- * Randomly assign a variation to this user and store it in cookies/storage
- */
-const getRandomVariationId = ({ id, variations, }) => {
-    let n = 0;
-    const random = Math.random();
-    // loop over variations test ratios, incrementing a counter,
-    // until we find the variation that this user should be assigned to
-    for (const id in variations) {
-        const testRatio = variations[id]?.testRatio;
-        n += testRatio;
-        if (random < n) {
-            return id;
-        }
-    }
-    // `item.variations` does not include the default variation
-    // if we arrive here, then it means that the random number fits in the default variation bucket
-    return id;
-};
-const getTestFields = ({ item, testGroupId, }) => {
-    const variationValue = item.variations[testGroupId];
-    if (testGroupId === item.id ||
-        // handle edge-case where `testGroupId` points to non-existing variation
-        !variationValue) {
-        return {
-            testVariationId: item.id,
-            testVariationName: 'Default',
-        };
-    }
-    else {
-        return {
-            data: variationValue.data,
-            testVariationId: variationValue.id,
-            testVariationName: variationValue.name || (variationValue.id === item.id ? 'Default' : ''),
-        };
-    }
-};
-const getContentVariation = async ({ item, canTrack, }) => {
-    // try to find test variation in cookies/storage
-    const testGroupId = await getContentVariationCookie({
-        canTrack,
-        contentId: item.id,
-    });
-    const testFields = testGroupId
-        ? getTestFields({ item, testGroupId })
-        : undefined;
-    if (testFields) {
-        return testFields;
-    }
-    else {
-        // if variation not found in storage, assign a random variation to this user
-        const randomVariationId = getRandomVariationId({
-            variations: item.variations,
-            id: item.id,
-        });
-        // store variation in cookies/storage
-        setContentVariationCookie({
-            contentId: item.id,
-            value: randomVariationId,
-            canTrack,
-        }).catch((err) => {
-            console.error('could not store A/B test variation: ', err);
-        });
-        return getTestFields({ item, testGroupId: randomVariationId });
-    }
-};
-export const handleABTesting = async ({ item, canTrack, }) => {
-    if (!checkIsBuilderContentWithVariations(item)) {
-        return;
-    }
-    const variationValue = await getContentVariation({ item, canTrack });
-    Object.assign(item, variationValue);
-};

package/dist/sdk/functions/is-editing.js

@@ -1,7 +0,0 @@
-import { TARGET } from '../constants/target.js';
-import { isIframe } from './is-iframe.js';
-export function isEditing() {
-    return (isIframe() &&
-        (TARGET === 'reactNative' ||
-            window.location.search.indexOf('builder.frameEditing=') !== -1));
-}

package/dist/sdk/functions/register-component.js

@@ -1,26 +0,0 @@
-import { serializeFn } from '../blocks/util.js';
-import { fastClone } from './fast-clone.js';
-/**
- * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
- */
-export const components = [];
-/**
- * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
- */
-export function registerComponent(component, info) {
-    components.push({ component, ...info });
-    console.warn('registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.');
-    return component;
-}
-export const createRegisterComponentMessage = ({ component: _, ...info }) => ({
-    type: 'builder.registerComponent',
-    data: prepareComponentInfoToSend(info),
-});
-const serializeValue = (value) => typeof value === 'function' ? serializeFn(value) : fastClone(value);
-const prepareComponentInfoToSend = ({ inputs, ...info }) => ({
-    ...fastClone(info),
-    inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
-        ...acc,
-        [key]: serializeValue(value),
-    }), {})),
-});

package/dist/sdk/functions/set.js

@@ -1,21 +0,0 @@
-/**
- * Minimal implementation of lodash's _.set
- * https://lodash.com/docs/4.17.15#set
- *
- * See ./set.test.ts for usage examples
- */
-export const set = (obj, _path, value) => {
-    if (Object(obj) !== obj) {
-        return obj;
-    }
-    const path = Array.isArray(_path)
-        ? _path
-        : _path.toString().match(/[^.[\]]+/g);
-    path
-        .slice(0, -1)
-        .reduce((a, c, i) => Object(a[c]) === a[c]
-        ? a[c]
-        : (a[c] =
-            Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}), obj)[path[path.length - 1]] = value;
-    return obj;
-};

package/dist/sdk/functions/transform-block-properties.d.ts

@@ -1 +0,0 @@
-export declare function transformBlockProperties<T>(properties: T): T;

package/dist/sdk/scripts/init-editing.js

@@ -1,102 +0,0 @@
-import { SDK_VERSION } from '../constants/sdk-version.js';
-import { TARGET } from '../constants/target.js';
-import { isBrowser } from '../functions/is-browser.js';
-import { register } from '../functions/register.js';
-export const registerInsertMenu = () => {
-    register('insertMenu', {
-        name: '_default',
-        default: true,
-        items: [
-            { name: 'Box' },
-            { name: 'Text' },
-            { name: 'Image' },
-            { name: 'Columns' },
-            ...(TARGET === 'reactNative'
-                ? []
-                : [
-                    { name: 'Core:Section' },
-                    { name: 'Core:Button' },
-                    { name: 'Embed' },
-                    { name: 'Custom Code' },
-                ]),
-        ],
-    });
-};
-let isSetupForEditing = false;
-export const setupBrowserForEditing = (options = {}) => {
-    if (isSetupForEditing) {
-        return;
-    }
-    isSetupForEditing = true;
-    if (isBrowser()) {
-        window.parent?.postMessage({
-            type: 'builder.sdkInfo',
-            data: {
-                target: TARGET,
-                version: SDK_VERSION,
-                // TODO: compile these in
-                // type: process.env.SDK_TYPE,
-                // version: process.env.SDK_VERSION,
-                supportsPatchUpdates: false,
-                // Supports builder-model="..." attribute which is needed to
-                // scope our '+ add block' button styling
-                supportsAddBlockScoping: true,
-                supportsCustomBreakpoints: true,
-            },
-        }, '*');
-        window.parent?.postMessage({
-            type: 'builder.updateContent',
-            data: {
-                options,
-            },
-        }, '*');
-        window.addEventListener('message', ({ data }) => {
-            if (!data?.type) {
-                return;
-            }
-            switch (data.type) {
-                case 'builder.evaluate': {
-                    const text = data.data.text;
-                    const args = data.data.arguments || [];
-                    const id = data.data.id;
-                    // tslint:disable-next-line:no-function-constructor-with-string-args
-                    const fn = new Function(text);
-                    let result;
-                    let error = null;
-                    try {
-                        // eslint-disable-next-line prefer-spread
-                        result = fn.apply(null, args);
-                    }
-                    catch (err) {
-                        error = err;
-                    }
-                    if (error) {
-                        window.parent?.postMessage({
-                            type: 'builder.evaluateError',
-                            data: { id, error: error.message },
-                        }, '*');
-                    }
-                    else {
-                        if (result && typeof result.then === 'function') {
-                            result
-                                .then((finalResult) => {
-                                window.parent?.postMessage({
-                                    type: 'builder.evaluateResult',
-                                    data: { id, result: finalResult },
-                                }, '*');
-                            })
-                                .catch(console.error);
-                        }
-                        else {
-                            window.parent?.postMessage({
-                                type: 'builder.evaluateResult',
-                                data: { result, id },
-                            }, '*');
-                        }
-                    }
-                    break;
-                }
-            }
-        });
-    }
-};