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

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

@@ -50,6 +50,7 @@ const target_js_1 = require("../../constants/target.js");
 const logger_js_1 = require("../../helpers/logger.js");
 const helpers_js_1 = require("../render-content-variants/helpers.js");
 const wrap_component_ref_js_1 = require("./wrap-component-ref.js");
+const inlined_script_1 = __importDefault(require("../inlined-script"));
 function RenderContent(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const elementRef = (0, react_1.useRef)(null);
@@ -208,11 +209,12 @@ function RenderContent(props) {
         }
     }
     const [scriptStr, setScriptStr] = (0, react_1.useState)(() => {
-        var _a;
+        var _a, _b;
         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,
+            variationId: (_a = props.content) === null || _a === void 0 ? void 0 : _a.testVariationId,
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+            contentId: (_b = props.content) === null || _b === void 0 ? void 0 : _b.id,
         });
     });
     const [builderContextSignal, setBuilderContextSignal] = (0, react_1.useState)(() => ({
@@ -358,14 +360,14 @@ function RenderContent(props) {
                         "builder-content-id": "",
                     },
                 }
-                : {}), ...(props.hideContent
-                ? {
+                : {}), ...(props.showContent
+                ? {}
+                : {
                     hidden: true,
                     "aria-hidden": true,
-                }
-                : {}) },
+                }) },
             props.isSsrAbTest ? (React.createElement(React.Fragment, null,
-                React.createElement(react_native_1.ScrollView, { dangerouslySetInnerHTML: { __html: scriptStr } }))) : null,
+                React.createElement(inlined_script_1.default, { scriptStr: scriptStr }))) : null,
             target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(render_styles_1.default, { contentId: (_f = builderContextSignal.content) === null || _f === void 0 ? void 0 : _f.id, cssCode: (_h = (_g = builderContextSignal.content) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.cssCode, customFonts: (_k = (_j = builderContextSignal.content) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.customFonts }))) : null,
             React.createElement(render_blocks_1.default, { blocks: (_m = (_l = builderContextSignal.content) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m.blocks, key: forceReRenderCount })))) : null));

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

@@ -1,25 +1,49 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getVariantsScriptString = exports.getVariants = exports.getRenderContentScriptString = exports.checkShouldRunVariants = void 0;
+exports.getVariantsScriptString = exports.getVariants = exports.getScriptString = exports.getRenderContentScriptString = exports.checkShouldRunVariants = 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 target_1 = require("../../constants/target");
 const is_browser_1 = require("../../functions/is-browser");
-const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {});
+const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {}).map((variant) => __spreadProps(__spreadValues({}, variant), {
+    testVariationId: variant.id,
+    id: content == null ? void 0 : content.id
+}));
 exports.getVariants = getVariants;
 const checkShouldRunVariants = ({ canTrack, content }) => {
     const hasVariants = getVariants(content).length > 0;
-    if (!hasVariants) {
+    if (target_1.TARGET === "reactNative")
         return false;
-    }
-    if (!canTrack) {
+    if (!hasVariants)
         return false;
-    }
-    if ((0, is_browser_1.isBrowser)()) {
+    if (!canTrack)
+        return false;
+    if (target_1.TARGET === "vue2" || target_1.TARGET === "vue3")
+        return true;
+    if ((0, is_browser_1.isBrowser)())
         return false;
-    }
     return true;
 };
 exports.checkShouldRunVariants = checkShouldRunVariants;
 function bldrAbTest(contentId, variants, isHydrationTarget2) {
+    var _a;
     function getAndSetVariantId() {
         function setCookie(name, value, days) {
             let expires = "";
@@ -63,10 +87,10 @@ function bldrAbTest(contentId, variants, isHydrationTarget2) {
         return contentId;
     }
     const winningVariantId = getAndSetVariantId();
-    const styleEl = document.getElementById(`variants-styles-${contentId}`);
+    const styleEl = (_a = document.currentScript) == null ? void 0 : _a.previousElementSibling;
     if (isHydrationTarget2) {
         styleEl.remove();
-        const thisScriptEl = document.getElementById(`variants-script-${contentId}`);
+        const thisScriptEl = document.currentScript;
         thisScriptEl == null ? void 0 : thisScriptEl.remove();
     }
     else {
@@ -78,6 +102,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget2) {
     }
 }
 function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2) {
+    var _a;
     if (!navigator.cookieEnabled) {
         return;
     }
@@ -95,7 +120,7 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2)
     }
     const cookieName = `builder.tests.${defaultContentId}`;
     const variantId = getCookie(cookieName);
-    const parentDiv = document.querySelector(`[builder-content-id="${variantContentId}"]`);
+    const parentDiv = (_a = document.currentScript) == null ? void 0 : _a.parentElement;
     const variantIsDefaultContent = variantContentId === defaultContentId;
     if (variantId === variantContentId) {
         if (variantIsDefaultContent) {
@@ -118,22 +143,26 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2)
     }
     return;
 }
-const getIsHydrationTarget = (target) => target === "react" || target === "reactNative" || target === "vue3" || target === "vue2";
+const getIsHydrationTarget = (target) => target === "react" || target === "reactNative";
 const isHydrationTarget = getIsHydrationTarget(target_1.TARGET);
-const AB_TEST_FN_NAME = "bldrAbTest";
-const CONTENT_FN_NAME = "bldrCntntScrpt";
-const getVariantsScriptString = (variants, contentId) => {
+const AB_TEST_FN_NAME = "builderIoAbTest";
+const CONTENT_FN_NAME = "builderIoRenderContent";
+const getScriptString = () => {
     const fnStr = bldrAbTest.toString().replace(/\s+/g, " ");
     const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, " ");
     return `
-  const ${AB_TEST_FN_NAME} = ${fnStr}
-  const ${CONTENT_FN_NAME} = ${fnStr2}
-  ${AB_TEST_FN_NAME}("${contentId}", ${JSON.stringify(variants)}, ${isHydrationTarget})
+  window.${AB_TEST_FN_NAME} = ${fnStr}
+  window.${CONTENT_FN_NAME} = ${fnStr2}
   `;
 };
+exports.getScriptString = getScriptString;
+const getVariantsScriptString = (variants, contentId) => {
+    return `
+  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
+};
 exports.getVariantsScriptString = getVariantsScriptString;
-const getRenderContentScriptString = ({ parentContentId, contentId }) => {
+const getRenderContentScriptString = ({ contentId, variationId }) => {
     return `
-  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
 };
 exports.getRenderContentScriptString = getRenderContentScriptString;

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

@@ -33,41 +33,46 @@ const react_1 = require("react");
 const helpers_1 = require("./helpers");
 const render_content_1 = __importDefault(require("../render-content/render-content"));
 const canTrack_1 = require("../../helpers/canTrack");
-const render_inlined_styles_1 = __importDefault(require("../render-inlined-styles"));
+const inlined_styles_1 = __importDefault(require("../inlined-styles"));
 const ab_tests_1 = require("../../helpers/ab-tests");
+const inlined_script_1 = __importDefault(require("../inlined-script"));
+const target_1 = require("../../constants/target");
 function RenderContentVariants(props) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
+    const [shouldRenderVariants, setShouldRenderVariants] = (0, react_1.useState)(() => (0, helpers_1.checkShouldRunVariants)({
+        canTrack: (0, canTrack_1.getDefaultCanTrack)(props.canTrack),
+        content: props.content,
+    }));
     const [variantScriptStr, setVariantScriptStr] = (0, react_1.useState)(() => {
         var _a;
         return (0, helpers_1.getVariantsScriptString)((0, helpers_1.getVariants)(props.content).map((value) => ({
-            id: value.id,
+            id: value.testVariationId,
             testRatio: value.testRatio,
         })), ((_a = props.content) === null || _a === void 0 ? void 0 : _a.id) || "");
     });
-    const [shouldRenderVariants, setShouldRenderVariants] = (0, react_1.useState)(() => (0, helpers_1.checkShouldRunVariants)({
-        canTrack: (0, canTrack_1.getDefaultCanTrack)(props.canTrack),
-        content: props.content,
-    }));
     const [hideVariantsStyleString, setHideVariantsStyleString] = (0, react_1.useState)(() => (0, helpers_1.getVariants)(props.content)
-        .map((value) => `.variant-${value.id} { display: none; } `)
+        .map((value) => `.variant-${value.testVariationId} { display: none; } `)
         .join(""));
-    const [contentToRender, setContentToRender] = (0, react_1.useState)(() => (0, helpers_1.checkShouldRunVariants)({
-        canTrack: (0, canTrack_1.getDefaultCanTrack)(props.canTrack),
-        content: props.content,
-    })
-        ? props.content
-        : (0, ab_tests_1.handleABTestingSync)({
-            item: props.content,
-            canTrack: (0, canTrack_1.getDefaultCanTrack)(props.canTrack),
-        }));
+    (0, react_1.useEffect)(() => {
+        /**
+         * We unmount the non-winning variants post-hydration in Vue.
+         */
+        if (target_1.TARGET === "vue2" || target_1.TARGET === "vue3") {
+            setShouldRenderVariants(false);
+        }
+    }, []);
     return (React.createElement(React.Fragment, null,
+        !props.__isNestedRender && target_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
+            React.createElement(inlined_script_1.default, { scriptStr: (0, helpers_1.getScriptString)() }))) : null,
         shouldRenderVariants ? (React.createElement(React.Fragment, null,
-            React.createElement(render_inlined_styles_1.default, { id: `variants-styles-${(_a = props.content) === null || _a === void 0 ? void 0 : _a.id}`, styles: hideVariantsStyleString }),
-            React.createElement(react_native_1.View, { id: `variants-script-${(_b = props.content) === null || _b === void 0 ? void 0 : _b.id}`, dangerouslySetInnerHTML: { __html: variantScriptStr } }), (_c = (0, helpers_1.getVariants)(props.content)) === null || _c === void 0 ? void 0 :
-            _c.map((variant) => {
-                var _a;
-                return (React.createElement(render_content_1.default, { key: variant.id, content: variant, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, hideContent: true, parentContentId: (_a = props.content) === null || _a === void 0 ? void 0 : _a.id, isSsrAbTest: shouldRenderVariants }));
-            }))) : null,
-        React.createElement(render_content_1.default, { model: props.model, content: contentToRender, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, classNameProp: `variant-${(_d = props.content) === null || _d === void 0 ? void 0 : _d.id}`, parentContentId: (_e = props.content) === null || _e === void 0 ? void 0 : _e.id, isSsrAbTest: shouldRenderVariants })));
+            React.createElement(inlined_styles_1.default, { id: `variants-styles-${(_a = props.content) === null || _a === void 0 ? void 0 : _a.id}`, styles: hideVariantsStyleString }),
+            React.createElement(inlined_script_1.default, { scriptStr: variantScriptStr }), (_b = (0, helpers_1.getVariants)(props.content)) === null || _b === void 0 ? void 0 :
+            _b.map((variant) => (React.createElement(render_content_1.default, { key: variant.testVariationId, content: variant, showContent: false, classNameProp: undefined, model: props.model, data: props.data, context: props.context, apiKey: props.apiKey, apiVersion: props.apiVersion, customComponents: props.customComponents, canTrack: props.canTrack, locale: props.locale, includeRefs: props.includeRefs, enrich: props.enrich, isSsrAbTest: shouldRenderVariants }))))) : null,
+        React.createElement(render_content_1.default, { ...{}, content: shouldRenderVariants
+                ? props.content
+                : (0, ab_tests_1.handleABTestingSync)({
+                    item: props.content,
+                    canTrack: (0, canTrack_1.getDefaultCanTrack)(props.canTrack),
+                }), classNameProp: `variant-${(_c = props.content) === null || _c === void 0 ? void 0 : _c.id}`, showContent: true, model: props.model, data: props.data, context: props.context, apiKey: props.apiKey, apiVersion: props.apiVersion, customComponents: props.customComponents, canTrack: props.canTrack, locale: props.locale, includeRefs: props.includeRefs, enrich: props.enrich, isSsrAbTest: shouldRenderVariants })));
 }
 exports.default = RenderContentVariants;

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

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

package/dist/constants/device-sizes.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSizesForBreakpoints = exports.getMaxWidthQueryForSize = void 0;
-const fast_clone_1 = require("../functions/fast-clone");
+const fast_clone_js_1 = require("../functions/fast-clone.js");
 const SIZES = {
     small: {
         min: 320,
@@ -22,7 +22,7 @@ const SIZES = {
 const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
 exports.getMaxWidthQueryForSize = getMaxWidthQueryForSize;
 const getSizesForBreakpoints = ({ small, medium }) => {
-    const newSizes = (0, fast_clone_1.fastClone)(SIZES);
+    const newSizes = (0, fast_clone_js_1.fastClone)(SIZES);
     if (!small || !medium) {
         return newSizes;
     }

package/dist/constants/sdk-version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SDK_VERSION = void 0;
-exports.SDK_VERSION = "0.4.4";
+exports.SDK_VERSION = "0.5.0";

package/dist/context/builder.context.js

@@ -11,7 +11,7 @@ var stdin_default = (0, react_1.createContext)({
     rootState: {},
     apiKey: null,
     apiVersion: void 0,
-    registeredComponents: {},
+    componentInfos: {},
     inheritedStyles: {}
 });
 exports.default = stdin_default;

package/dist/functions/apply-patch-with-mutation.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyPatchWithMinimalMutationChain = void 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;
+};
+const applyPatchWithMinimalMutationChain = (obj, patch, preserveRoot = false) => {
+    if (Object(obj) !== obj) {
+        return obj;
+    }
+    const { path, op, value } = patch;
+    const pathArr = path.split(/\//);
+    if (pathArr[0] === "") {
+        pathArr.shift();
+    }
+    const newObj = preserveRoot ? obj : __spreadValues({}, obj);
+    let objPart = newObj;
+    for (let i = 0; i < pathArr.length; i++) {
+        const isLast = i === pathArr.length - 1;
+        const property = pathArr[i];
+        if (isLast) {
+            if (op === "replace") {
+                objPart[property] = value;
+            }
+            else if (op === "add") {
+                const index = Number(property);
+                if (Array.isArray(objPart)) {
+                    if (property === "-") {
+                        objPart.push(value);
+                    }
+                    else {
+                        objPart.splice(index, 0, value);
+                    }
+                }
+                else {
+                    objPart[property] = value;
+                }
+            }
+            else if (op === "remove") {
+                const index = Number(property);
+                if (Array.isArray(objPart)) {
+                    objPart.splice(index, 1);
+                }
+                else {
+                    delete objPart[property];
+                }
+            }
+        }
+        else {
+            const nextProperty = pathArr[i + 1];
+            const newPart = Object(objPart[property]) === objPart[property] ? objPart[property] : String(Number(nextProperty)) === nextProperty ? [] : {};
+            objPart = objPart[property] = Array.isArray(newPart) ? [...newPart] : __spreadValues({}, newPart);
+        }
+    }
+    return newObj;
+};
+exports.applyPatchWithMinimalMutationChain = applyPatchWithMinimalMutationChain;

package/dist/functions/apply-patch-with-mutation.test.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const apply_patch_with_mutation_js_1 = require("./apply-patch-with-mutation.js");
+describe("applyPatchWithMinimalMutationChain", () => {
+    test("Basic shallow update", () => {
+        const obj = {
+            foo: "bar"
+        };
+        const patch = {
+            op: "replace",
+            path: "/foo",
+            value: "60px"
+        };
+        const applied = (0, apply_patch_with_mutation_js_1.applyPatchWithMinimalMutationChain)(obj, patch);
+        expect(applied.foo).toBe("60px");
+        expect(applied).not.toBe(obj);
+    });
+    test("Deep object updates", () => {
+        const obj = {
+            foo: {
+                bar: true
+            },
+            baz: {}
+        };
+        const patch = {
+            op: "replace",
+            path: "/foo/bar",
+            value: "60px"
+        };
+        const applied = (0, apply_patch_with_mutation_js_1.applyPatchWithMinimalMutationChain)(obj, patch);
+        expect(applied.foo.bar).toBe("60px");
+        expect(applied).not.toBe(obj);
+        expect(applied.foo).not.toBe(obj.foo);
+        expect(applied.baz).toBe(obj.baz);
+    });
+    test("Deep array updates", () => {
+        const obj = {
+            foo: [{
+                    bar: true
+                }],
+            baz: {}
+        };
+        const patch = {
+            op: "replace",
+            path: "/foo/0/bar",
+            value: "60px"
+        };
+        const applied = (0, apply_patch_with_mutation_js_1.applyPatchWithMinimalMutationChain)(obj, patch);
+        expect(applied.foo[0].bar).toBe("60px");
+        expect(applied).not.toBe(obj);
+        expect(applied.foo).not.toBe(obj.foo);
+        expect(applied.foo[0]).not.toBe(obj.foo[0]);
+        expect(applied.baz).toBe(obj.baz);
+    });
+});

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

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.camelToKebabCase = void 0;
-const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+const camelToKebabCase = string => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
 exports.camelToKebabCase = camelToKebabCase;