@builder.io/sdk-react-native 0.4.4 → 0.4.5

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFontCss = exports.getCss = void 0;
+const getCssFromFont = (font) => {
+    var _a, _b;
+    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
+    const url = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.regular;
+    let str = "";
+    if (url && family && name) {
+        str += `
+@font-face {
+font-family: "${family}";
+src: local("${name}"), url('${url}') format('woff2');
+font-display: fallback;
+font-weight: 400;
+}
+      `.trim();
+    }
+    if (font.files) {
+        for (const weight in font.files) {
+            const isNumber = String(Number(weight)) === weight;
+            if (!isNumber) {
+                continue;
+            }
+            const weightUrl = font.files[weight];
+            if (weightUrl && weightUrl !== url) {
+                str += `
+@font-face {
+font-family: "${family}";
+src: url('${weightUrl}') format('woff2');
+font-display: fallback;
+font-weight: ${weight};
+}
+        `.trim();
+            }
+        }
+    }
+    return str;
+};
+const getFontCss = ({ customFonts }) => {
+    var _a;
+    return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+};
+exports.getFontCss = getFontCss;
+const getCss = ({ cssCode, contentId }) => {
+    if (!cssCode) {
+        return "";
+    }
+    if (!contentId) {
+        return cssCode;
+    }
+    return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
+};
+exports.getCss = getCss;

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

@@ -0,0 +1,61 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_1 = require("react");
+const inlined_styles_1 = __importDefault(require("../../inlined-styles"));
+const content_styles_helpers_1 = require("./content-styles.helpers");
+const content_styles_helpers_2 = require("./content-styles.helpers");
+function ContentStyles(props) {
+    const [injectedStyles, setInjectedStyles] = (0, react_1.useState)(() => `
+${(0, content_styles_helpers_1.getCss)({
+        cssCode: props.cssCode,
+        contentId: props.contentId,
+    })}
+${(0, content_styles_helpers_2.getFontCss)({
+        customFonts: props.customFonts,
+    })}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+  margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
+}
+`.trim());
+    return React.createElement(inlined_styles_1.default, { styles: injectedStyles });
+}
+exports.default = ContentStyles;

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

@@ -0,0 +1,313 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_1 = require("react");
+const evaluate_js_1 = require("../../../functions/evaluate.js");
+const index_js_1 = require("../../../functions/get-content/index.js");
+const get_fetch_js_1 = require("../../../functions/get-fetch.js");
+const is_browser_js_1 = require("../../../functions/is-browser.js");
+const is_editing_js_1 = require("../../../functions/is-editing.js");
+const is_previewing_js_1 = require("../../../functions/is-previewing.js");
+const register_component_js_1 = require("../../../functions/register-component.js");
+const index_js_2 = require("../../../functions/track/index.js");
+const builder_context_js_1 = __importDefault(require("../../../context/builder.context.js"));
+const init_editing_js_1 = require("../../../scripts/init-editing.js");
+const nullable_js_1 = require("../../../helpers/nullable.js");
+const interaction_js_1 = require("../../../functions/track/interaction.js");
+const target_js_1 = require("../../../constants/target.js");
+const logger_js_1 = require("../../../helpers/logger.js");
+function EnableEditor(props) {
+    var _a, _b, _c, _d, _e;
+    const elementRef = (0, react_1.useRef)(null);
+    const [forceReRenderCount, setForceReRenderCount] = (0, react_1.useState)(() => 0);
+    function mergeNewContent(newContent) {
+        var _a, _b, _c, _d, _e;
+        props.builderContextSignal.content = {
+            ...props.builderContextSignal.content,
+            ...newContent,
+            data: {
+                ...(_a = props.builderContextSignal.content) === null || _a === void 0 ? void 0 : _a.data,
+                ...newContent === null || newContent === void 0 ? void 0 : newContent.data,
+            },
+            meta: {
+                ...(_b = props.builderContextSignal.content) === null || _b === void 0 ? void 0 : _b.meta,
+                ...newContent === null || newContent === void 0 ? void 0 : newContent.meta,
+                breakpoints: ((_c = newContent === null || newContent === void 0 ? void 0 : newContent.meta) === null || _c === void 0 ? void 0 : _c.breakpoints) ||
+                    ((_e = (_d = props.builderContextSignal.content) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.breakpoints),
+            },
+        };
+    }
+    const [canTrackToUse, setCanTrackToUse] = (0, react_1.useState)(() => (0, nullable_js_1.checkIsDefined)(props.canTrack) ? props.canTrack : true);
+    function processMessage(event) {
+        var _a;
+        const { data } = event;
+        if (data) {
+            switch (data.type) {
+                case "builder.configureSdk": {
+                    const messageContent = data.data;
+                    const { breakpoints, contentId } = messageContent;
+                    if (!contentId ||
+                        contentId !== ((_a = props.builderContextSignal.content) === null || _a === void 0 ? void 0 : _a.id)) {
+                        return;
+                    }
+                    if (breakpoints) {
+                        mergeNewContent({
+                            meta: {
+                                breakpoints,
+                            },
+                        });
+                    }
+                    setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
+                    break;
+                }
+                case "builder.contentUpdate": {
+                    const messageContent = data.data;
+                    const key = messageContent.key ||
+                        messageContent.alias ||
+                        messageContent.entry ||
+                        messageContent.modelName;
+                    const contentData = messageContent.data;
+                    if (key === props.model) {
+                        mergeNewContent(contentData);
+                        setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
+                    }
+                    break;
+                }
+                case "builder.patchUpdates": {
+                    // TODO
+                    break;
+                }
+            }
+        }
+    }
+    function evaluateJsCode() {
+        var _a, _b;
+        // run any dynamic JS code attached to content
+        const jsCode = (_b = (_a = props.builderContextSignal.content) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.jsCode;
+        if (jsCode) {
+            (0, evaluate_js_1.evaluate)({
+                code: jsCode,
+                context: props.context || {},
+                localState: undefined,
+                rootState: props.builderContextSignal.rootState,
+                rootSetState: props.builderContextSignal.rootSetState,
+            });
+        }
+    }
+    const [httpReqsData, setHttpReqsData] = (0, react_1.useState)(() => ({}));
+    const [clicked, setClicked] = (0, react_1.useState)(() => false);
+    function onClick(event) {
+        var _a, _b;
+        if (props.builderContextSignal.content) {
+            const variationId = (_a = props.builderContextSignal.content) === null || _a === void 0 ? void 0 : _a.testVariationId;
+            const contentId = (_b = props.builderContextSignal.content) === null || _b === void 0 ? void 0 : _b.id;
+            (0, index_js_2._track)({
+                type: "click",
+                canTrack: canTrackToUse,
+                contentId,
+                apiKey: props.apiKey,
+                variationId: variationId !== contentId ? variationId : undefined,
+                ...(0, interaction_js_1.getInteractionPropertiesForEvent)(event),
+                unique: !clicked,
+            });
+        }
+        if (!clicked) {
+            setClicked(true);
+        }
+    }
+    function evalExpression(expression) {
+        return expression.replace(/{{([^}]+)}}/g, (_match, group) => (0, evaluate_js_1.evaluate)({
+            code: group,
+            context: props.context || {},
+            localState: undefined,
+            rootState: props.builderContextSignal.rootState,
+            rootSetState: props.builderContextSignal.rootSetState,
+        }));
+    }
+    function handleRequest({ url, key }) {
+        (0, get_fetch_js_1.fetch)(url)
+            .then((response) => response.json())
+            .then((json) => {
+            var _a, _b;
+            const newState = {
+                ...props.builderContextSignal.rootState,
+                [key]: json,
+            };
+            (_b = (_a = props.builderContextSignal).rootSetState) === null || _b === void 0 ? void 0 : _b.call(_a, newState);
+            httpReqsData[key] = true;
+        })
+            .catch((err) => {
+            console.error("error fetching dynamic data", url, err);
+        });
+    }
+    function runHttpRequests() {
+        var _a, _b, _c;
+        const requests = (_c = (_b = (_a = props.builderContextSignal.content) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.httpRequests) !== null && _c !== void 0 ? _c : {};
+        Object.entries(requests).forEach(([key, url]) => {
+            if (url && (!httpReqsData[key] || (0, is_editing_js_1.isEditing)())) {
+                const evaluatedUrl = evalExpression(url);
+                handleRequest({
+                    url: evaluatedUrl,
+                    key,
+                });
+            }
+        });
+    }
+    function emitStateUpdate() {
+        if ((0, is_editing_js_1.isEditing)()) {
+            window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
+                detail: {
+                    state: props.builderContextSignal.rootState,
+                    ref: {
+                        name: props.model,
+                    },
+                },
+            }));
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (!props.apiKey) {
+            logger_js_1.logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+        }
+        if ((0, is_browser_js_1.isBrowser)()) {
+            if ((0, is_editing_js_1.isEditing)()) {
+                setForceReRenderCount(forceReRenderCount + 1);
+                (0, init_editing_js_1.registerInsertMenu)();
+                (0, init_editing_js_1.setupBrowserForEditing)({
+                    ...(props.locale
+                        ? {
+                            locale: props.locale,
+                        }
+                        : {}),
+                    ...(props.includeRefs
+                        ? {
+                            includeRefs: props.includeRefs,
+                        }
+                        : {}),
+                    ...(props.enrich
+                        ? {
+                            enrich: props.enrich,
+                        }
+                        : {}),
+                });
+                Object.values(props.builderContextSignal.registeredComponents).forEach((registeredComponent) => {
+                    var _a;
+                    const message = (0, register_component_js_1.createRegisterComponentMessage)(registeredComponent);
+                    (_a = window.parent) === null || _a === void 0 ? void 0 : _a.postMessage(message, "*");
+                });
+                window.addEventListener("message", processMessage);
+                window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+            }
+            if (props.builderContextSignal.content) {
+                const variationId = (_a = props.builderContextSignal.content) === null || _a === void 0 ? void 0 : _a.testVariationId;
+                const contentId = (_b = props.builderContextSignal.content) === null || _b === void 0 ? void 0 : _b.id;
+                (0, index_js_2._track)({
+                    type: "impression",
+                    canTrack: canTrackToUse,
+                    contentId,
+                    apiKey: props.apiKey,
+                    variationId: variationId !== contentId ? variationId : undefined,
+                });
+            }
+            // override normal content in preview mode
+            if ((0, is_previewing_js_1.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)) {
+                    (0, index_js_1.getContent)({
+                        model: props.model,
+                        apiKey: props.apiKey,
+                        apiVersion: props.apiVersion,
+                    }).then((content) => {
+                        if (content) {
+                            mergeNewContent(content);
+                        }
+                    });
+                }
+            }
+            evaluateJsCode();
+            runHttpRequests();
+            emitStateUpdate();
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (props.content) {
+            mergeNewContent(props.content);
+        }
+    }, [props.content]);
+    (0, react_1.useEffect)(() => {
+        evaluateJsCode();
+    }, [
+        (_b = (_a = props.builderContextSignal.content) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.jsCode,
+        props.builderContextSignal.rootState,
+    ]);
+    (0, react_1.useEffect)(() => {
+        runHttpRequests();
+    }, [(_d = (_c = props.builderContextSignal.content) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.httpRequests]);
+    (0, react_1.useEffect)(() => {
+        emitStateUpdate();
+    }, [props.builderContextSignal.rootState]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if ((0, is_browser_js_1.isBrowser)()) {
+                window.removeEventListener("message", processMessage);
+                window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+            }
+        };
+    }, []);
+    return (React.createElement(builder_context_js_1.default.Provider, { value: props.builderContextSignal }, props.builderContextSignal.content ? (React.createElement(React.Fragment, null,
+        React.createElement(react_native_1.View, { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": (_e = props.builderContextSignal.content) === null || _e === void 0 ? void 0 : _e.id, "builder-model": props.model, key: forceReRenderCount, ...(target_js_1.TARGET === "reactNative"
+                ? {
+                    dataSet: {
+                        // currently, we can't set the actual ID here. // we don't need it right now, we just need to identify content divs for testing.
+                        "builder-content-id": "",
+                    },
+                }
+                : {}), ...(props.hideContent
+                ? {
+                    hidden: true,
+                    "aria-hidden": true,
+                }
+                : {}) }, props.children))) : null));
+}
+exports.default = EnableEditor;

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContextStateInitialValue = exports.getContentInitialValue = void 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));
+const getContextStateInitialValue = ({ content, data, locale }) => {
+    var _a, _b, _c;
+    const defaultValues = {};
+    (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach((input) => {
+        var _a2;
+        if (input.name && input.defaultValue !== void 0 && ((_a2 = content == null ? void 0 : content.data) == null ? void 0 : _a2.state) && content.data.state[input.name] === void 0) {
+            defaultValues[input.name] = input.defaultValue;
+        }
+    });
+    const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? { locale } : {});
+    return __spreadValues(__spreadValues({}, defaultValues), stateToUse);
+};
+exports.getContextStateInitialValue = getContextStateInitialValue;
+const getContentInitialValue = ({ content, data }) => {
+    return !content ? void 0 : __spreadProps(__spreadValues({}, content), {
+        data: __spreadValues(__spreadValues({}, content == null ? void 0 : content.data), data),
+        meta: content == null ? void 0 : content.meta
+    });
+};
+exports.getContentInitialValue = getContentInitialValue;

package/dist/components/content/content.js

@@ -0,0 +1,127 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_1 = require("react");
+const builder_registered_components_js_1 = require("../../constants/builder-registered-components.js");
+const register_component_js_1 = require("../../functions/register-component.js");
+const blocks_1 = __importDefault(require("../blocks/blocks"));
+const content_styles_1 = __importDefault(require("./components/content-styles"));
+const content_helpers_js_1 = require("./content.helpers.js");
+const target_js_1 = require("../../constants/target.js");
+const helpers_js_1 = require("../content-variants/helpers.js");
+const wrap_component_ref_js_1 = require("./wrap-component-ref.js");
+const enable_editor_1 = __importDefault(require("./components/enable-editor"));
+function Content(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const [scriptStr, setScriptStr] = (0, react_1.useState)(() => {
+        var _a;
+        return (0, helpers_js_1.getRenderContentScriptString)({
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+            contentId: (_a = props.content) === null || _a === void 0 ? void 0 : _a.id,
+            parentContentId: props.parentContentId,
+        });
+    });
+    function contentSetState(newRootState) {
+        builderContextSignal.rootState = newRootState;
+    }
+    const [customComps, setCustomComps] = (0, react_1.useState)(() => [
+        ...(0, builder_registered_components_js_1.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.
+        ...register_component_js_1.components,
+        ...(props.customComponents || []),
+    ].reduce((acc, info) => ({
+        ...acc,
+        [info.name]: info,
+    }), {}));
+    function customComponentsInfo() {
+        // TO-DO: fix once we remove `useStore<any>` hack in Qwik generator.
+        return Object.values(customComps).reduce((acc, { component: _, ...info }) => ({
+            ...acc,
+            [info.name]: info,
+        }), {});
+    }
+    function tempContextSignalSetter() {
+        return undefined;
+    }
+    const [builderContextSignal, setBuilderContextSignal] = (0, react_1.useState)(() => ({
+        content: (0, content_helpers_js_1.getContentInitialValue)({
+            content: props.content,
+            data: props.data,
+        }),
+        localState: undefined,
+        rootState: (0, content_helpers_js_1.getContextStateInitialValue)({
+            content: props.content,
+            data: props.data,
+            locale: props.locale,
+        }),
+        rootSetState: contentSetState,
+        context: props.context || {},
+        apiKey: props.apiKey,
+        apiVersion: props.apiVersion,
+        registeredComponents: [
+            ...(0, builder_registered_components_js_1.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.
+            ...register_component_js_1.components,
+            ...(props.customComponents || []),
+        ].reduce((acc, { component, ...curr }) => ({
+            ...acc,
+            [curr.name]: {
+                component: target_js_1.TARGET === "vue3" ? (0, wrap_component_ref_js_1.wrapComponentRef)(component) : component,
+                ...curr,
+            },
+        }), {}),
+        inheritedStyles: {},
+    }));
+    (0, react_1.useEffect)(() => {
+        if (!builderContextSignal.content) {
+            builderContextSignal.content = (0, content_helpers_js_1.getContentInitialValue)({
+                content: props.content,
+                data: props.data,
+            });
+        }
+    }, [props.content, props.data, props.locale]);
+    return (React.createElement(React.Fragment, null, builderContextSignal.content ? (React.createElement(React.Fragment, null,
+        React.createElement(enable_editor_1.default, { content: props.content, model: props.model, data: props.data, context: props.context, apiKey: props.apiKey, apiVersion: props.apiVersion, customComponents: customComponentsInfo(), canTrack: props.canTrack, locale: props.locale, includeRefs: props.includeRefs, enrich: props.enrich, classNameProp: props.classNameProp, hideContent: props.hideContent, parentContentId: props.parentContentId, isSsrAbTest: props.isSsrAbTest, builderContextSignal: builderContextSignal, setBuilderContextSignal: tempContextSignalSetter() },
+            props.isSsrAbTest ? (React.createElement(React.Fragment, null,
+                React.createElement(react_native_1.ScrollView, { dangerouslySetInnerHTML: { __html: scriptStr } }))) : null,
+            target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
+                React.createElement(content_styles_1.default, { contentId: (_a = builderContextSignal.content) === null || _a === void 0 ? void 0 : _a.id, cssCode: (_c = (_b = builderContextSignal.content) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.cssCode, customFonts: (_e = (_d = builderContextSignal.content) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.customFonts }))) : null,
+            React.createElement(blocks_1.default, { blocks: (_g = (_f = builderContextSignal.content) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.blocks, context: builderContextSignal, components: customComps })))) : null));
+}
+exports.default = Content;

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

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

package/dist/components/content/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const content_1 = __importDefault(require("./content"));
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return content_1.default; } });

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapComponentRef = void 0;
+const wrapComponentRef = (component) => component;
+exports.wrapComponentRef = wrapComponentRef;