@builder.io/sdk-react 0.1.1 → 0.1.3

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

@@ -0,0 +1,285 @@
+import * as React from "react";
+import { useState, useContext, useRef, useEffect } from "react";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import { TARGET } from "../../constants/target.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.js";
+import RenderContentStyles from "./components/render-styles.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";
+export default function RenderContent(props) {
+    const elementRef = useRef(null);
+    const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
+    const [overrideContent, setOverrideContent] = useState(() => null);
+    function useContent() {
+        if (!props.content && !overrideContent) {
+            return undefined;
+        }
+        return {
+            ...props.content,
+            ...overrideContent,
+            data: {
+                ...props.content?.data,
+                ...props.data,
+                ...overrideContent?.data,
+            },
+            meta: {
+                ...props.content?.meta,
+                ...overrideContent?.meta,
+                breakpoints: useBreakpoints ||
+                    overrideContent?.meta?.breakpoints ||
+                    props.content?.meta?.breakpoints,
+            },
+        };
+    }
+    const [update, setUpdate] = useState(() => 0);
+    const [useBreakpoints, setUseBreakpoints] = useState(() => null);
+    const [canTrackToUse, setCanTrackToUse] = useState(() => checkIsDefined(props.canTrack) ? props.canTrack : true);
+    const [overrideState, setOverrideState] = useState(() => ({}));
+    function contentState() {
+        return {
+            ...props.content?.data?.state,
+            ...props.data,
+            ...(props.locale
+                ? {
+                    locale: props.locale,
+                }
+                : {}),
+            ...overrideState,
+        };
+    }
+    const [contextContext, setContextContext] = useState(() => props.context || {});
+    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;
+                    }
+                    setUseBreakpoints(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) {
+                        setOverrideContent(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: contextContext,
+                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: contextContext,
+            state: contentState(),
+        }));
+    }
+    function handleRequest({ url, key }) {
+        fetch(url)
+            .then((response) => response.json())
+            .then((json) => {
+            const newOverrideState = {
+                ...overrideState,
+                [key]: json,
+            };
+            setOverrideState(newOverrideState);
+        })
+            .catch((err) => {
+            console.log("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,
+                    },
+                },
+            }));
+        }
+    }
+    function shouldRenderContentStyles() {
+        return Boolean((useContent?.()?.data?.cssCode ||
+            useContent?.()?.data?.customFonts?.length) &&
+            TARGET !== "reactNative");
+    }
+    useEffect(() => {
+        if (!props.apiKey) {
+            console.error("[Builder.io]: 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 searchParamPreview = searchParams.get("builder.preview");
+                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.
+                 *
+                 * TO-DO: should we check that the preview item ID is the same as the initial one being rendered? Or would
+                 * this break scenarios where the item is not published yet?
+                 *
+                 * TO-DO: should we only update the state when there is a change?
+                 **/
+                if (searchParamPreview === props.model &&
+                    previewApiKey === props.apiKey) {
+                    getContent({
+                        model: props.model,
+                        apiKey: props.apiKey,
+                    }).then((content) => {
+                        if (content) {
+                            setOverrideContent(content);
+                        }
+                    });
+                }
+            }
+            evaluateJsCode();
+            runHttpRequests();
+            emitStateUpdate();
+        }
+    }, []);
+    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(),
+            context: contextContext,
+            apiKey: props.apiKey,
+            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 },
+            shouldRenderContentStyles() ? (React.createElement(RenderContentStyles, { cssCode: useContent?.()?.data?.cssCode, customFonts: useContent?.()?.data?.customFonts })) : null,
+            React.createElement(RenderBlocks, { blocks: useContent?.()?.data?.blocks, key: forceReRenderCount })))) : null));
+}

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { TARGET } from "../constants/target.js";
+export default function RenderInlinedStyles(props) {
+    function injectedStyleScript() {
+        return `<${tag()}>${props.styles}</${tag()}>`;
+    }
+    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";
+    }
+    const TagRef = tag();
+    return (React.createElement(React.Fragment, null, TARGET === "svelte" ? (React.createElement(React.Fragment, null,
+        React.createElement("div", { dangerouslySetInnerHTML: { __html: injectedStyleScript() } }))) : (React.createElement(TagRef, null, props.styles))));
+}

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

@@ -0,0 +1,52 @@
+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.js";
+import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info.js";
+import { default as Columns } from "../blocks/columns/columns.js";
+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.js";
+import { componentInfo as imageComponentInfo } from "../blocks/image/component-info.js";
+import { default as Image } from "../blocks/image/image.js";
+import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info.js";
+import { default as Section } from "../blocks/section/section.js";
+import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info.js";
+import { default as Symbol } from "../blocks/symbol/symbol.js";
+import { componentInfo as textComponentInfo } from "../blocks/text/component-info.js";
+import { default as Text } from "../blocks/text/text.js";
+import { componentInfo as videoComponentInfo } from "../blocks/video/component-info.js";
+import { default as Video } from "../blocks/video/video.js";
+import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info.js";
+import { default as embed } from "../blocks/embed/embed.js";
+import { default as Img } from "../blocks/img/img.js";
+import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.js";
+import { default as customCode } from "../blocks/custom-code/custom-code.js";
+import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
+const getDefaultRegisteredComponents = () => [
+    __spreadValues({ component: Columns }, columnsComponentInfo),
+    __spreadValues({ component: Image }, imageComponentInfo),
+    __spreadValues({ component: Img }, imgComponentInfo),
+    __spreadValues({ component: Text }, textComponentInfo),
+    __spreadValues({ component: Video }, videoComponentInfo),
+    __spreadValues({ component: Symbol }, symbolComponentInfo),
+    __spreadValues({ component: Button }, buttonComponentInfo),
+    __spreadValues({ component: Section }, sectionComponentInfo),
+    __spreadValues({ component: Fragment }, fragmentComponentInfo),
+    __spreadValues({ component: embed }, embedComponentInfo),
+    __spreadValues({ component: customCode }, customCodeInfo)
+];
+export { getDefaultRegisteredComponents };

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

@@ -0,0 +1,45 @@
+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/constants/target.js

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

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

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

package/dist/react/context/types.js

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

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

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

package/dist/react/functions/evaluate.js

@@ -0,0 +1,22 @@
+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/functions/event-handler-name.js

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

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

@@ -0,0 +1,20 @@
+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/functions/fast-clone.js

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

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

@@ -0,0 +1,9 @@
+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/functions/get-block-actions.js

@@ -0,0 +1,16 @@
+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/functions/get-block-component-options.js

@@ -0,0 +1,26 @@
+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/functions/get-block-properties.js

@@ -0,0 +1,48 @@
+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));
+import { TARGET } from "../constants/target.js";
+import { convertStyleMapToCSSArray } from "../helpers/css.js";
+import { transformBlockProperties } from "./transform-block-properties.js";
+function getBlockProperties(block) {
+    var _a;
+    const properties = __spreadProps(__spreadValues({}, block.properties), {
+        "builder-id": block.id,
+        style: getStyleAttribute(block.style),
+        class: [block.id, "builder-block", block.class, (_a = block.properties) == null ? void 0 : _a.class].filter(Boolean).join(" ")
+    });
+    return transformBlockProperties(properties);
+}
+function getStyleAttribute(style) {
+    if (!style) {
+        return void 0;
+    }
+    switch (TARGET) {
+        case "svelte":
+        case "vue2":
+        case "vue3":
+        case "solid":
+            return convertStyleMapToCSSArray(style).join(" ");
+        case "qwik":
+        case "reactNative":
+        case "react":
+            return style;
+    }
+}
+export { getBlockProperties };

package/dist/react/functions/get-block-tag.js

@@ -0,0 +1,4 @@
+function getBlockTag(block) {
+    return block.tagName || "div";
+}
+export { getBlockTag };

package/dist/react/functions/get-builder-search-params/fn.test.js

@@ -0,0 +1,13 @@
+import { convertSearchParamsToQueryObject, getBuilderSearchParams } from ".";
+const querystring = "someotherValue=jklsjfdal&abc=klfdjklgfds&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=037948e52eaf4743afed464f02c70da4&builder.overrides.037948e52eaf4743afed464f02c70da4=037948e52eaf4743afed464f02c70da4&builder.overrides.page%3A%2F=037948e52eaf4743afed464f02c70da4&preview_theme_id=128854393017";
+const url = new URL(`localhost:3000/about-us?${querystring}`);
+describe("Get Builder SearchParams", () => {
+    test("correctly converts URLSearchParams to object", () => {
+        const output = convertSearchParamsToQueryObject(url.searchParams);
+        expect(output).toMatchSnapshot();
+    });
+    test("correctly extracts all builder params from a query object", () => {
+        const output = getBuilderSearchParams(convertSearchParamsToQueryObject(url.searchParams));
+        expect(output).toMatchSnapshot();
+    });
+});

package/dist/react/functions/get-builder-search-params/index.js

@@ -0,0 +1,33 @@
+import { isBrowser } from "../is-browser.js";
+const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
+const BUILDER_OPTIONS_PREFIX = "options.";
+const convertSearchParamsToQueryObject = (searchParams) => {
+    const options = {};
+    searchParams.forEach((value, key) => {
+        options[key] = value;
+    });
+    return options;
+};
+const getBuilderSearchParams = (_options) => {
+    if (!_options) {
+        return {};
+    }
+    const options = normalizeSearchParams(_options);
+    const newOptions = {};
+    Object.keys(options).forEach((key) => {
+        if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
+            const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
+            newOptions[trimmedKey] = options[key];
+        }
+    });
+    return newOptions;
+};
+const getBuilderSearchParamsFromWindow = () => {
+    if (!isBrowser()) {
+        return {};
+    }
+    const searchParams = new URLSearchParams(window.location.search);
+    return getBuilderSearchParams(searchParams);
+};
+const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
+export { convertSearchParamsToQueryObject, getBuilderSearchParams, getBuilderSearchParamsFromWindow, normalizeSearchParams };