@builder.io/sdk-react 0.2.3-3 → 0.2.3

package/dist/react/esm/components/render-content/render-content.js

@@ -1,295 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState, useContext, 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";
-function RenderContent(props) {
-    const elementRef = useRef(null);
-    const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
-    const [overrideContent, setOverrideContent] = useState(() => null);
-    const [useContent, setUseContent] = useState(() => getContentInitialValue({
-        content: props.content,
-        data: props.data,
-    }));
-    function mergeNewContent(newContent) {
-        setUseContent({
-            ...useContent,
-            ...newContent,
-            data: {
-                ...useContent?.data,
-                ...newContent?.data,
-            },
-            meta: {
-                ...useContent?.meta,
-                ...newContent?.meta,
-                breakpoints: newContent?.meta?.breakpoints || useContent?.meta?.breakpoints,
-            },
-        });
-    }
-    function setBreakpoints(breakpoints) {
-        setUseContent({
-            ...useContent,
-            meta: {
-                ...useContent?.meta,
-                breakpoints,
-            },
-        });
-    }
-    const [update, setUpdate] = useState(() => 0);
-    const [canTrackToUse, setCanTrackToUse] = useState(() => checkIsDefined(props.canTrack) ? props.canTrack : true);
-    const [contentState, setContentState] = useState(() => getContextStateInitialValue({
-        content: props.content,
-        data: props.data,
-        locale: props.locale,
-    }));
-    function setContextState(newState) {
-        setContentState(newState);
-    }
-    const [allRegisteredComponents, setAllRegisteredComponents] = 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, curr) => ({
-        ...acc,
-        [curr.name]: curr,
-    }), {}));
-    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 !== useContent?.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 = useContent?.data?.jsCode;
-        if (jsCode) {
-            evaluate({
-                code: jsCode,
-                context: props.context || {},
-                state: contentState,
-            });
-        }
-    }
-    const [httpReqsData, setHttpReqsData] = useState(() => ({}));
-    const [clicked, setClicked] = useState(() => false);
-    function onClick(event) {
-        if (useContent) {
-            const variationId = useContent?.testVariationId;
-            const contentId = useContent?.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 || {},
-            state: contentState,
-        }));
-    }
-    function handleRequest({ url, key }) {
-        fetch(url)
-            .then((response) => response.json())
-            .then((json) => {
-            const newState = {
-                ...contentState,
-                [key]: json,
-            };
-            setContextState(newState);
-        })
-            .catch((err) => {
-            console.error("error fetching dynamic data", url, err);
-        });
-    }
-    function runHttpRequests() {
-        const requests = useContent?.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: contentState,
-                    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,
-                        }
-                        : {}),
-                });
-                Object.values(allRegisteredComponents).forEach((registeredComponent) => {
-                    const message = createRegisterComponentMessage(registeredComponent);
-                    window.parent?.postMessage(message, "*");
-                });
-                window.addEventListener("message", processMessage);
-                window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
-            }
-            if (useContent) {
-                const variationId = useContent?.testVariationId;
-                const contentId = useContent?.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();
-    }, [useContent?.data?.jsCode, contentState]);
-    useEffect(() => {
-        runHttpRequests();
-    }, [useContent?.data?.httpRequests]);
-    useEffect(() => {
-        emitStateUpdate();
-    }, [contentState]);
-    useEffect(() => {
-        return () => {
-            if (isBrowser()) {
-                window.removeEventListener("message", processMessage);
-                window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
-            }
-        };
-    }, []);
-    return (React.createElement(builderContext.Provider, { value: {
-            content: useContent,
-            state: contentState,
-            setState: setContextState,
-            context: props.context || {},
-            apiKey: props.apiKey,
-            apiVersion: props.apiVersion,
-            registeredComponents: allRegisteredComponents,
-        } }, useContent ? (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent?.id, "builder-model": props.model },
-            TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
-                React.createElement(RenderContentStyles, { contentId: useContent?.id, cssCode: useContent?.data?.cssCode, customFonts: useContent?.data?.customFonts }))) : null,
-            React.createElement(RenderBlocks, { blocks: useContent?.data?.blocks, key: forceReRenderCount })))) : null));
-}
-export default RenderContent;

package/dist/react/esm/components/render-content/render-content.types.js

@@ -1 +0,0 @@
-"use strict";

package/dist/react/esm/components/render-inlined-styles.d.ts

@@ -1,2 +0,0 @@
-export default RenderInlinedStyles;
-declare function RenderInlinedStyles(props: any): JSX.Element;

package/dist/react/esm/components/render-inlined-styles.js

@@ -1,17 +0,0 @@
-"use client";
-import * as React from "react";
-import { TARGET } from "../constants/target.js";
-function RenderInlinedStyles(props) {
-    function tag() {
-        // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
-        // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
-        return "sty" + "le";
-    }
-    function injectedStyleScript() {
-        return `<${tag()}>${props.styles}</${tag()}>`;
-    }
-    const TagRef = tag();
-    return (React.createElement(React.Fragment, null, TARGET === "svelte" || TARGET === "qwik" ? (React.createElement(React.Fragment, null,
-        React.createElement(TagRef, { dangerouslySetInnerHTML: { __html: props.styles } }))) : (React.createElement(TagRef, null, props.styles))));
-}
-export default RenderInlinedStyles;

package/dist/react/esm/constants/builder-registered-components.d.ts

@@ -1 +0,0 @@
-export function getDefaultRegisteredComponents(): any[];

package/dist/react/esm/constants/builder-registered-components.js

@@ -1,52 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-    for (var prop in b || (b = {}))
-        if (__hasOwnProp.call(b, prop))
-            __defNormalProp(a, prop, b[prop]);
-    if (__getOwnPropSymbols)
-        for (var prop of __getOwnPropSymbols(b)) {
-            if (__propIsEnum.call(b, prop))
-                __defNormalProp(a, prop, b[prop]);
-        }
-    return a;
-};
-import { default as Button } from "../blocks/button/button";
-import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info.js";
-import { default as Columns } from "../blocks/columns/columns";
-import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info.js";
-import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info.js";
-import { default as Fragment } from "../blocks/fragment/fragment";
-import { componentInfo as imageComponentInfo } from "../blocks/image/component-info.js";
-import { default as Image } from "../blocks/image/image";
-import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info.js";
-import { default as Section } from "../blocks/section/section";
-import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info.js";
-import { default as Symbol } from "../blocks/symbol/symbol";
-import { componentInfo as textComponentInfo } from "../blocks/text/component-info.js";
-import { default as Text } from "../blocks/text/text";
-import { componentInfo as videoComponentInfo } from "../blocks/video/component-info.js";
-import { default as Video } from "../blocks/video/video";
-import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info.js";
-import { default as embed } from "../blocks/embed/embed";
-import { default as Img } from "../blocks/img/img";
-import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.js";
-import { default as customCode } from "../blocks/custom-code/custom-code";
-import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
-const getDefaultRegisteredComponents = () => [
-    __spreadValues({ component: Button }, buttonComponentInfo),
-    __spreadValues({ component: Columns }, columnsComponentInfo),
-    __spreadValues({ component: customCode }, customCodeInfo),
-    __spreadValues({ component: embed }, embedComponentInfo),
-    __spreadValues({ component: Fragment }, fragmentComponentInfo),
-    __spreadValues({ component: Image }, imageComponentInfo),
-    __spreadValues({ component: Img }, imgComponentInfo),
-    __spreadValues({ component: Section }, sectionComponentInfo),
-    __spreadValues({ component: Symbol }, symbolComponentInfo),
-    __spreadValues({ component: Text }, textComponentInfo),
-    __spreadValues({ component: Video }, videoComponentInfo)
-];
-export { getDefaultRegisteredComponents };

package/dist/react/esm/constants/device-sizes.d.ts

@@ -1,21 +0,0 @@
-export function getMaxWidthQueryForSize(size: any, sizeValues?: {
-    small: {
-        min: number;
-        default: number;
-        max: number;
-    };
-    medium: {
-        min: number;
-        default: number;
-        max: number;
-    };
-    large: {
-        min: number;
-        default: number;
-        max: number;
-    };
-}): string;
-export function getSizesForBreakpoints({ small, medium }: {
-    small: any;
-    medium: any;
-}): any;

package/dist/react/esm/constants/device-sizes.js

@@ -1,45 +0,0 @@
-import { fastClone } from "../functions/fast-clone";
-const SIZES = {
-    small: {
-        min: 320,
-        default: 321,
-        max: 640
-    },
-    medium: {
-        min: 641,
-        default: 642,
-        max: 991
-    },
-    large: {
-        min: 990,
-        default: 991,
-        max: 1200
-    }
-};
-const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-const getSizesForBreakpoints = ({ small, medium }) => {
-    const newSizes = fastClone(SIZES);
-    if (!small || !medium) {
-        return newSizes;
-    }
-    const smallMin = Math.floor(small / 2);
-    newSizes.small = {
-        max: small,
-        min: smallMin,
-        default: smallMin + 1
-    };
-    const mediumMin = newSizes.small.max + 1;
-    newSizes.medium = {
-        max: medium,
-        min: mediumMin,
-        default: mediumMin + 1
-    };
-    const largeMin = newSizes.medium.max + 1;
-    newSizes.large = {
-        max: 2e3,
-        min: largeMin,
-        default: largeMin + 1
-    };
-    return newSizes;
-};
-export { getMaxWidthQueryForSize, getSizesForBreakpoints };

package/dist/react/esm/constants/target.d.ts

@@ -1 +0,0 @@
-export const TARGET: "react";

package/dist/react/esm/constants/target.js

@@ -1,2 +0,0 @@
-const TARGET = "react";
-export { TARGET };

package/dist/react/esm/context/builder.context.d.ts

@@ -1,11 +0,0 @@
-export { stdin_default as default };
-declare var stdin_default: import("react").Context<{
-    content: null;
-    context: {};
-    state: {};
-    setState(): void;
-    apiKey: null;
-    apiVersion: undefined;
-    registeredComponents: {};
-    inheritedStyles: {};
-}>;

package/dist/react/esm/context/builder.context.js

@@ -1,13 +0,0 @@
-import { createContext } from "react";
-var stdin_default = createContext({
-    content: null,
-    context: {},
-    state: {},
-    setState() {
-    },
-    apiKey: null,
-    apiVersion: void 0,
-    registeredComponents: {},
-    inheritedStyles: {}
-});
-export { stdin_default as default };

package/dist/react/esm/context/types.js

@@ -1 +0,0 @@
-"use strict";

package/dist/react/esm/functions/camel-to-kebab-case.d.ts

@@ -1 +0,0 @@
-export function camelToKebabCase(string: any): any;

package/dist/react/esm/functions/camel-to-kebab-case.js

@@ -1,2 +0,0 @@
-const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-export { camelToKebabCase };

package/dist/react/esm/functions/evaluate.d.ts

@@ -1,7 +0,0 @@
-export function evaluate({ code, context, state, event, isExpression }: {
-    code: any;
-    context: any;
-    state: any;
-    event: any;
-    isExpression?: boolean | undefined;
-}): any;

package/dist/react/esm/functions/evaluate.js

@@ -1,22 +0,0 @@
-import { isBrowser } from "./is-browser.js";
-import { isEditing } from "./is-editing.js";
-function evaluate({ code, context, state, event, isExpression = true }) {
-    if (code === "") {
-        console.warn("Skipping evaluation of empty code block.");
-        return;
-    }
-    const builder = {
-        isEditing: isEditing(),
-        isBrowser: isBrowser(),
-        isServer: !isBrowser()
-    };
-    const useReturn = isExpression && !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
-    const useCode = useReturn ? `return (${code});` : code;
-    try {
-        return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
-    }
-    catch (e) {
-        console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e);
-    }
-}
-export { evaluate };

package/dist/react/esm/functions/event-handler-name.d.ts

@@ -1 +0,0 @@
-export function getEventHandlerName(key: any): string;

package/dist/react/esm/functions/event-handler-name.js

@@ -1,5 +0,0 @@
-function capitalizeFirstLetter(string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-}
-const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}`;
-export { getEventHandlerName };

package/dist/react/esm/functions/extract-text-styles.d.ts

@@ -1 +0,0 @@
-export function extractTextStyles(styles: any): {};

package/dist/react/esm/functions/extract-text-styles.js

@@ -1,20 +0,0 @@
-const TEXT_STYLE_KEYS = [
-    "color",
-    "whiteSpace",
-    "direction",
-    "hyphens",
-    "overflowWrap"
-];
-const isTextStyle = (key) => {
-    return TEXT_STYLE_KEYS.includes(key) || key.startsWith("font") || key.startsWith("text") || key.startsWith("letter") || key.startsWith("line") || key.startsWith("word") || key.startsWith("writing");
-};
-const extractTextStyles = (styles) => {
-    const textStyles = {};
-    Object.entries(styles).forEach(([key, value]) => {
-        if (isTextStyle(key)) {
-            textStyles[key] = value;
-        }
-    });
-    return textStyles;
-};
-export { extractTextStyles };

package/dist/react/esm/functions/fast-clone.d.ts

@@ -1 +0,0 @@
-export function fastClone(obj: any): any;

package/dist/react/esm/functions/fast-clone.js

@@ -1,2 +0,0 @@
-const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
-export { fastClone };

package/dist/react/esm/functions/get-block-actions-handler.d.ts

@@ -1 +0,0 @@
-export function createEventHandler(value: any, options: any): (event: any) => any;

package/dist/react/esm/functions/get-block-actions-handler.js

@@ -1,9 +0,0 @@
-import { evaluate } from "./evaluate.js";
-const createEventHandler = (value, options) => (event) => evaluate({
-    code: value,
-    context: options.context,
-    state: options.state,
-    event,
-    isExpression: false
-});
-export { createEventHandler };

package/dist/react/esm/functions/get-block-actions.d.ts

@@ -1 +0,0 @@
-export function getBlockActions(options: any): {};

package/dist/react/esm/functions/get-block-actions.js

@@ -1,16 +0,0 @@
-import { getEventHandlerName } from "./event-handler-name.js";
-import { createEventHandler } from "./get-block-actions-handler.js";
-function getBlockActions(options) {
-    var _a;
-    const obj = {};
-    const optionActions = (_a = options.block.actions) != null ? _a : {};
-    for (const key in optionActions) {
-        if (!optionActions.hasOwnProperty(key)) {
-            continue;
-        }
-        const value = optionActions[key];
-        obj[getEventHandlerName(key)] = createEventHandler(value, options);
-    }
-    return obj;
-}
-export { getBlockActions };

package/dist/react/esm/functions/get-block-component-options.d.ts

@@ -1 +0,0 @@
-export function getBlockComponentOptions(block: any): any;

package/dist/react/esm/functions/get-block-component-options.js

@@ -1,26 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-    for (var prop in b || (b = {}))
-        if (__hasOwnProp.call(b, prop))
-            __defNormalProp(a, prop, b[prop]);
-    if (__getOwnPropSymbols)
-        for (var prop of __getOwnPropSymbols(b)) {
-            if (__propIsEnum.call(b, prop))
-                __defNormalProp(a, prop, b[prop]);
-        }
-    return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-function getBlockComponentOptions(block) {
-    var _a;
-    return __spreadProps(__spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
-        builderBlock: block
-    });
-}
-export { getBlockComponentOptions };

package/dist/react/esm/functions/get-block-properties.d.ts

@@ -1 +0,0 @@
-export function getBlockProperties(block: any): any;