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

package/dist/blocks/select/component-info.js

@@ -7,52 +7,40 @@ const componentInfo = {
     defaultStyles: {
         alignSelf: "flex-start"
     },
-    inputs: [
-        {
+    inputs: [{
             name: "options",
             type: "list",
             required: true,
-            subFields: [
-                {
+            subFields: [{
                     name: "value",
                     type: "text",
                     required: true
-                },
-                {
+                }, {
                     name: "name",
                     type: "text"
-                }
-            ],
-            defaultValue: [
-                {
+                }],
+            defaultValue: [{
                     value: "option 1"
-                },
-                {
+                }, {
                     value: "option 2"
-                }
-            ]
-        },
-        {
+                }]
+        }, {
             name: "name",
             type: "string",
             required: true,
             helperText: 'Every select in a form needs a unique name describing what it gets, e.g. "email"'
-        },
-        {
+        }, {
             name: "defaultValue",
             type: "string"
-        },
-        {
+        }, {
             name: "value",
             type: "string",
             advanced: true
-        },
-        {
+        }, {
             name: "required",
             type: "boolean",
             defaultValue: false
-        }
-    ],
+        }],
     static: true,
     noWrap: true
 };

package/dist/blocks/select/select.js

@@ -1,5 +1,4 @@
 "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);
@@ -28,9 +27,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const BaseText_1 = __importDefault(require("../BaseText"));
+("use client");
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const is_editing_js_1 = require("../../functions/is-editing.js");
+const helpers_js_1 = require("../helpers.js");
 function SelectComponent(props) {
     var _a;
     return (React.createElement(react_native_1.View, { ...props.attributes, value: props.value, key: (0, is_editing_js_1.isEditing)() && props.defaultValue ? props.defaultValue : "default-key", defaultValue: props.defaultValue, name: props.name }, (_a = props.options) === null || _a === void 0 ? void 0 : _a.map((option) => (React.createElement(react_native_1.View, { value: option.value },

package/dist/blocks/submit-button/component-info.js

@@ -15,13 +15,11 @@ const componentInfo = {
         borderRadius: "4px",
         cursor: "pointer"
     },
-    inputs: [
-        {
+    inputs: [{
             name: "text",
             type: "text",
             defaultValue: "Click me"
-        }
-    ],
+        }],
     static: true,
     noWrap: true
 };

package/dist/blocks/submit-button/submit-button.js

@@ -1,5 +1,4 @@
 "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);
@@ -28,8 +27,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const BaseText_1 = __importDefault(require("../BaseText"));
+("use client");
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const helpers_js_1 = require("../helpers.js");
 function SubmitButton(props) {
     return (React.createElement(react_native_1.View, { type: "submit", ...props.attributes },
         React.createElement(BaseText_1.default, null, props.text)));

package/dist/blocks/symbol/component-info.js

@@ -5,39 +5,34 @@ const componentInfo = {
     name: "Symbol",
     noWrap: true,
     static: true,
-    inputs: [
-        {
+    isRSC: true,
+    inputs: [{
             name: "symbol",
             type: "uiSymbol"
-        },
-        {
+        }, {
             name: "dataOnly",
             helperText: "Make this a data symbol that doesn't display any UI",
             type: "boolean",
             defaultValue: false,
             advanced: true,
             hideFromUI: true
-        },
-        {
+        }, {
             name: "inheritState",
             helperText: "Inherit the parent component state and data",
             type: "boolean",
             defaultValue: false,
             advanced: true
-        },
-        {
+        }, {
             name: "renderToLiquid",
             helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
             type: "boolean",
             defaultValue: false,
             advanced: true,
             hideFromUI: true
-        },
-        {
+        }, {
             name: "useChildren",
             hideFromUI: true,
             type: "boolean"
-        }
-    ]
+        }]
 };
 exports.componentInfo = componentInfo;

package/dist/blocks/symbol/symbol.helpers.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchContent = 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;
+};
+var __async = (__this, __arguments, generator) => {
+    return new Promise((resolve, reject) => {
+        var fulfilled = value => {
+            try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            }
+        };
+        var rejected = value => {
+            try {
+                step(generator.throw(value));
+            }
+            catch (e) {
+                reject(e);
+            }
+        };
+        var step = x => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+        step((generator = generator.apply(__this, __arguments)).next());
+    });
+};
+const index_js_1 = require("../../functions/get-content/index.js");
+const logger_js_1 = require("../../helpers/logger.js");
+const fetchContent = _0 => __async(void 0, [_0], function* ({ builderContextValue, symbol }) {
+    if ((symbol == null ? void 0 : symbol.model) && (builderContextValue == null ? void 0 : builderContextValue.apiKey)) {
+        return (0, index_js_1.getContent)(__spreadValues({
+            model: symbol.model,
+            apiKey: builderContextValue.apiKey,
+            apiVersion: builderContextValue.apiVersion
+        }, (symbol == null ? void 0 : symbol.entry) && {
+            query: {
+                id: symbol.entry
+            }
+        })).catch(err => {
+            logger_js_1.logger.error("Could not fetch symbol content: ", err);
+            return void 0;
+        });
+    }
+    return void 0;
+});
+exports.fetchContent = fetchContent;

package/dist/blocks/symbol/symbol.js

@@ -1,5 +1,5 @@
 "use strict";
-'use client';
+"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);
@@ -30,19 +30,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_1 = require("react");
-const render_content_1 = __importDefault(require("../../components/render-content/render-content"));
-const builder_context_js_1 = __importDefault(require("../../context/builder.context.js"));
-const index_js_1 = require("../../functions/get-content/index.js");
-const target_1 = require("../../constants/target");
-const logger_1 = require("../../helpers/logger");
+const content_variants_1 = __importDefault(require("../../components/content-variants/content-variants"));
+const helpers_js_1 = require("../helpers.js");
+const symbol_helpers_js_1 = require("./symbol.helpers.js");
 function Symbol(props) {
     var _a, _b, _c;
-    const [className, setClassName] = (0, react_1.useState)(() => {
+    function className() {
         var _a, _b;
         return [
-            ...(target_1.TARGET === "vue2" || target_1.TARGET === "vue3"
-                ? Object.keys(props.attributes.class)
-                : [props.attributes.class]),
+            ...[],
             "builder-symbol",
             ((_a = props.symbol) === null || _a === void 0 ? void 0 : _a.inline) ? "builder-inline-symbol" : undefined,
             ((_b = props.symbol) === null || _b === void 0 ? void 0 : _b.dynamic) || props.dynamic
@@ -51,55 +47,32 @@ function Symbol(props) {
         ]
             .filter(Boolean)
             .join(" ");
-    });
+    }
     const [contentToUse, setContentToUse] = (0, react_1.useState)(() => { var _a; return (_a = props.symbol) === null || _a === void 0 ? void 0 : _a.content; });
-    function fetchContent() {
-        var _a;
-        /**
-         * If:
-         * - we have a symbol prop
-         * - yet it does not have any content
-         * - and we have not already stored content from before
-         * - and it has a model name
-         *
-         * then we want to re-fetch the symbol content.
-         */
-        if (!contentToUse &&
-            ((_a = props.symbol) === null || _a === void 0 ? void 0 : _a.model) &&
-            (
-            // This is a hack, we should not need to check for this, but it is needed for Svelte.
-            builderContext === null || builderContext === void 0 ? void 0 : builderContext.apiKey)) {
-            (0, index_js_1.getContent)({
-                model: props.symbol.model,
-                apiKey: builderContext.apiKey,
-                apiVersion: builderContext.apiVersion,
-                query: {
-                    id: props.symbol.entry,
-                },
-            })
-                .then((response) => {
-                if (response) {
-                    setContentToUse(response);
-                }
-            })
-                .catch((err) => {
-                logger_1.logger.error("Could not fetch symbol content: ", err);
-            });
-        }
+    function setContent() {
+        if (contentToUse)
+            return;
+        (0, symbol_helpers_js_1.fetchContent)({
+            symbol: props.symbol,
+            builderContextValue: props.builderContext,
+        }).then((newContent) => {
+            if (newContent) {
+                setContentToUse(newContent);
+            }
+        });
     }
-    const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
     (0, react_1.useEffect)(() => {
-        fetchContent();
+        setContent();
     }, []);
     (0, react_1.useEffect)(() => {
-        fetchContent();
+        setContent();
     }, [props.symbol]);
     return (React.createElement(react_native_1.View, { ...props.attributes, dataSet: {
-            class: className,
+            class: className(),
         } },
-        React.createElement(render_content_1.default, { apiVersion: builderContext.apiVersion, apiKey: builderContext.apiKey, context: builderContext.context, customComponents: Object.values(builderContext.registeredComponents), data: {
+        React.createElement(content_variants_1.default, { __isNestedRender: true, apiVersion: props.builderContext.apiVersion, apiKey: props.builderContext.apiKey, context: props.builderContext.context, customComponents: Object.values(props.builderComponents), data: {
                 ...(_a = props.symbol) === null || _a === void 0 ? void 0 : _a.data,
-                ...builderContext.localState,
+                ...props.builderContext.localState,
                 ...(_b = contentToUse === null || contentToUse === void 0 ? void 0 : contentToUse.data) === null || _b === void 0 ? void 0 : _b.state,
             }, model: (_c = props.symbol) === null || _c === void 0 ? void 0 : _c.model, content: contentToUse })));
 }

package/dist/blocks/text/component-info.js

@@ -4,17 +4,16 @@ exports.componentInfo = void 0;
 const componentInfo = {
     name: "Text",
     static: true,
+    isRSC: true,
     image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
-    inputs: [
-        {
+    inputs: [{
             name: "text",
             type: "html",
             required: true,
             autoFocus: true,
             bubble: true,
             defaultValue: "Enter some text..."
-        }
-    ],
+        }],
     defaultStyles: {
         lineHeight: "normal",
         height: "auto",

package/dist/blocks/textarea/component-info.js

@@ -4,33 +4,27 @@ exports.componentInfo = void 0;
 const componentInfo = {
     name: "Form:TextArea",
     image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
-    inputs: [
-        {
+    inputs: [{
             advanced: true,
             name: "value",
             type: "string"
-        },
-        {
+        }, {
             name: "name",
             type: "string",
             required: true,
             helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
-        },
-        {
+        }, {
             name: "defaultValue",
             type: "string"
-        },
-        {
+        }, {
             name: "placeholder",
             type: "string",
             defaultValue: "Hello there"
-        },
-        {
+        }, {
             name: "required",
             type: "boolean",
             defaultValue: false
-        }
-    ],
+        }],
     defaultStyles: {
         paddingTop: "10px",
         paddingBottom: "10px",

package/dist/blocks/textarea/textarea.js

@@ -1,5 +1,5 @@
 "use strict";
-'use client';
+"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);
@@ -26,6 +26,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const helpers_js_1 = require("../helpers.js");
 function Textarea(props) {
     return (React.createElement(react_native_1.View, { ...props.attributes, placeholder: props.placeholder, name: props.name, value: props.value, defaultValue: props.defaultValue }));
 }

package/dist/blocks/video/component-info.js

@@ -9,98 +9,78 @@ const componentInfo = {
         minWidth: "20px"
     },
     image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
-    inputs: [
-        {
+    inputs: [{
             name: "video",
             type: "file",
             allowedFileTypes: ["mp4"],
             bubble: true,
             defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
             required: true
-        },
-        {
+        }, {
             name: "posterImage",
             type: "file",
             allowedFileTypes: ["jpeg", "png"],
             helperText: "Image to show before the video plays"
-        },
-        {
+        }, {
             name: "autoPlay",
             type: "boolean",
             defaultValue: true
-        },
-        {
+        }, {
             name: "controls",
             type: "boolean",
             defaultValue: false
-        },
-        {
+        }, {
             name: "muted",
             type: "boolean",
             defaultValue: true
-        },
-        {
+        }, {
             name: "loop",
             type: "boolean",
             defaultValue: true
-        },
-        {
+        }, {
             name: "playsInline",
             type: "boolean",
             defaultValue: true
-        },
-        {
+        }, {
             name: "fit",
             type: "text",
             defaultValue: "cover",
             enum: ["contain", "cover", "fill", "auto"]
-        },
-        {
+        }, {
+            name: "preload",
+            type: "text",
+            defaultValue: "metadata",
+            enum: ["auto", "metadata", "none"]
+        }, {
             name: "fitContent",
             type: "boolean",
             helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
             defaultValue: true,
             advanced: true
-        },
-        {
+        }, {
             name: "position",
             type: "text",
             defaultValue: "center",
-            enum: [
-                "center",
-                "top",
-                "left",
-                "right",
-                "bottom",
-                "top left",
-                "top right",
-                "bottom left",
-                "bottom right"
-            ]
-        },
-        {
+            enum: ["center", "top", "left", "right", "bottom", "top left", "top right", "bottom left", "bottom right"]
+        }, {
             name: "height",
             type: "number",
             advanced: true
-        },
-        {
+        }, {
             name: "width",
             type: "number",
             advanced: true
-        },
-        {
+        }, {
             name: "aspectRatio",
             type: "number",
             advanced: true,
             defaultValue: 0.7004048582995948
-        },
-        {
+        }, {
             name: "lazyLoad",
             type: "boolean",
             helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
             defaultValue: true,
             advanced: true
-        }
-    ]
+        }]
 };
 exports.componentInfo = componentInfo;

package/dist/components/block/block.helpers.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isEmptyHtmlElement = exports.getRepeatItemData = exports.getComponent = 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));
+var __objRest = (source, exclude) => {
+    var target = {};
+    for (var prop in source)
+        if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+            target[prop] = source[prop];
+    if (source != null && __getOwnPropSymbols)
+        for (var prop of __getOwnPropSymbols(source)) {
+            if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+                target[prop] = source[prop];
+        }
+    return target;
+};
+const evaluate_1 = require("../../functions/evaluate");
+const get_processed_block_js_1 = require("../../functions/get-processed-block.js");
+const EMPTY_HTML_ELEMENTS = ["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"];
+const isEmptyHtmlElement = tagName => {
+    return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
+};
+exports.isEmptyHtmlElement = isEmptyHtmlElement;
+const getComponent = ({ block, context, registeredComponents }) => {
+    var _a;
+    const componentName = (_a = (0, get_processed_block_js_1.getProcessedBlock)({
+        block,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        context: context.context,
+        shouldEvaluateBindings: false
+    }).component) == null ? void 0 : _a.name;
+    if (!componentName) {
+        return null;
+    }
+    const ref = registeredComponents[componentName];
+    if (!ref) {
+        console.warn(`
+      Could not find a registered component named "${componentName}". 
+      If you registered it, is the file that registered it imported by the file that needs to render it?`);
+        return void 0;
+    }
+    else {
+        return ref;
+    }
+};
+exports.getComponent = getComponent;
+const getRepeatItemData = ({ block, context }) => {
+    const _a = block, { repeat } = _a, blockWithoutRepeat = __objRest(_a, ["repeat"]);
+    if (!(repeat == null ? void 0 : repeat.collection)) {
+        return void 0;
+    }
+    const itemsArray = (0, evaluate_1.evaluate)({
+        code: repeat.collection,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        context: context.context
+    });
+    if (!Array.isArray(itemsArray)) {
+        return void 0;
+    }
+    const collectionName = repeat.collection.split(".").pop();
+    const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
+    const repeatArray = itemsArray.map((item, index) => ({
+        context: __spreadProps(__spreadValues({}, context), {
+            localState: __spreadProps(__spreadValues({}, context.localState), {
+                $index: index,
+                $item: item,
+                [itemNameToUse]: item,
+                [`$${itemNameToUse}Index`]: index
+            })
+        }),
+        block: blockWithoutRepeat
+    }));
+    return repeatArray;
+};
+exports.getRepeatItemData = getRepeatItemData;