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

package/dist/helpers/preview-lru-cache/set.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postPreviewContent = void 0;
+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());
+    });
+};
+"use server";
+const init_1 = require("./init");
+function postPreviewContent(_0) {
+    return __async(this, arguments, function* ({ key, value }) {
+        (0, init_1.init)();
+        globalThis._BUILDER_PREVIEW_LRU_CACHE.set(key, value);
+        return {
+            [key]: value
+        };
+    });
+}
+exports.postPreviewContent = postPreviewContent;

package/dist/helpers/preview-lru-cache/types.js

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

package/dist/helpers/sessionId.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setSessionId = exports.getSessionId = exports.createSessionId = void 0;
 var __async = (__this, __arguments, generator) => {
     return new Promise((resolve, reject) => {
-        var fulfilled = (value) => {
+        var fulfilled = value => {
             try {
                 step(generator.next(value));
             }
@@ -11,7 +11,7 @@ var __async = (__this, __arguments, generator) => {
                 reject(e);
             }
         };
-        var rejected = (value) => {
+        var rejected = value => {
             try {
                 step(generator.throw(value));
             }
@@ -19,7 +19,7 @@ var __async = (__this, __arguments, generator) => {
                 reject(e);
             }
         };
-        var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+        var step = x => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
         step((generator = generator.apply(__this, __arguments)).next());
     });
 };
@@ -27,7 +27,7 @@ const cookie_js_1 = require("./cookie.js");
 const nullable_js_1 = require("./nullable.js");
 const uuid_js_1 = require("./uuid.js");
 const SESSION_LOCAL_STORAGE_KEY = "builderSessionId";
-const getSessionId = (_0) => __async(void 0, [_0], function* ({ canTrack }) {
+const getSessionId = _0 => __async(void 0, [_0], function* ({ canTrack }) {
     if (!canTrack) {
         return void 0;
     }
@@ -40,12 +40,19 @@ const getSessionId = (_0) => __async(void 0, [_0], function* ({ canTrack }) {
     }
     else {
         const newSessionId = createSessionId();
-        setSessionId({ id: newSessionId, canTrack });
+        setSessionId({
+            id: newSessionId,
+            canTrack
+        });
         return newSessionId;
     }
 });
 exports.getSessionId = getSessionId;
 const createSessionId = () => (0, uuid_js_1.uuid)();
 exports.createSessionId = createSessionId;
-const setSessionId = ({ id, canTrack }) => (0, cookie_js_1.setCookie)({ name: SESSION_LOCAL_STORAGE_KEY, value: id, canTrack });
+const setSessionId = ({ id, canTrack }) => (0, cookie_js_1.setCookie)({
+    name: SESSION_LOCAL_STORAGE_KEY,
+    value: id,
+    canTrack
+});
 exports.setSessionId = setSessionId;

package/dist/helpers/url.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTopLevelDomain = void 0;
-const getTopLevelDomain = (host) => {
+const getTopLevelDomain = host => {
     if (host === "localhost" || host === "127.0.0.1") {
         return host;
     }

package/dist/helpers/visitorId.js

@@ -18,7 +18,10 @@ const getVisitorId = ({ canTrack }) => {
     }
     else {
         const newVisitorId = createVisitorId();
-        setVisitorId({ id: newVisitorId, canTrack });
+        setVisitorId({
+            id: newVisitorId,
+            canTrack
+        });
         return newVisitorId;
     }
 };

package/dist/index-helpers/blocks-exports.js

@@ -18,5 +18,5 @@ const section_1 = __importDefault(require("../blocks/section/section"));
 Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return section_1.default; } });
 const fragment_1 = __importDefault(require("../blocks/fragment/fragment"));
 Object.defineProperty(exports, "Fragment", { enumerable: true, get: function () { return fragment_1.default; } });
-const render_content_1 = __importDefault(require("../components/render-content/render-content"));
-Object.defineProperty(exports, "RenderContent", { enumerable: true, get: function () { return render_content_1.default; } });
+const content_1 = __importDefault(require("../components/content/content"));
+Object.defineProperty(exports, "RenderContent", { enumerable: true, get: function () { return content_1.default; } });

package/dist/scripts/init-editing.js

@@ -9,18 +9,23 @@ const registerInsertMenu = () => {
     (0, register_js_1.register)("insertMenu", {
         name: "_default",
         default: true,
-        items: [
-            { name: "Box" },
-            { name: "Text" },
-            { name: "Image" },
-            { name: "Columns" },
-            ...target_js_1.TARGET === "reactNative" ? [] : [
-                { name: "Core:Section" },
-                { name: "Core:Button" },
-                { name: "Embed" },
-                { name: "Custom Code" }
-            ]
-        ]
+        items: [{
+                name: "Box"
+            }, {
+                name: "Text"
+            }, {
+                name: "Image"
+            }, {
+                name: "Columns"
+            }, ...(target_js_1.TARGET === "reactNative" ? [] : [{
+                    name: "Core:Section"
+                }, {
+                    name: "Core:Button"
+                }, {
+                    name: "Embed"
+                }, {
+                    name: "Custom Code"
+                }])]
     });
 };
 exports.registerInsertMenu = registerInsertMenu;
@@ -54,44 +59,54 @@ const setupBrowserForEditing = (options = {}) => {
                 return;
             }
             switch (data.type) {
-                case "builder.evaluate": {
-                    const text = data.data.text;
-                    const args = data.data.arguments || [];
-                    const id = data.data.id;
-                    const fn = new Function(text);
-                    let result;
-                    let error = null;
-                    try {
-                        result = fn.apply(null, args);
-                    }
-                    catch (err) {
-                        error = err;
-                    }
-                    if (error) {
-                        (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
-                            type: "builder.evaluateError",
-                            data: { id, error: error.message }
-                        }, "*");
-                    }
-                    else {
-                        if (result && typeof result.then === "function") {
-                            result.then((finalResult) => {
-                                var _a3;
-                                (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
-                                    type: "builder.evaluateResult",
-                                    data: { id, result: finalResult }
-                                }, "*");
-                            }).catch(console.error);
+                case "builder.evaluate":
+                    {
+                        const text = data.data.text;
+                        const args = data.data.arguments || [];
+                        const id = data.data.id;
+                        const fn = new Function(text);
+                        let result;
+                        let error = null;
+                        try {
+                            result = fn.apply(null, args);
                         }
-                        else {
-                            (_b2 = window.parent) == null ? void 0 : _b2.postMessage({
-                                type: "builder.evaluateResult",
-                                data: { result, id }
+                        catch (err) {
+                            error = err;
+                        }
+                        if (error) {
+                            (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
+                                type: "builder.evaluateError",
+                                data: {
+                                    id,
+                                    error: error.message
+                                }
                             }, "*");
                         }
+                        else {
+                            if (result && typeof result.then === "function") {
+                                result.then(finalResult => {
+                                    var _a3;
+                                    (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
+                                        type: "builder.evaluateResult",
+                                        data: {
+                                            id,
+                                            result: finalResult
+                                        }
+                                    }, "*");
+                                }).catch(console.error);
+                            }
+                            else {
+                                (_b2 = window.parent) == null ? void 0 : _b2.postMessage({
+                                    type: "builder.evaluateResult",
+                                    data: {
+                                        result,
+                                        id
+                                    }
+                                }, "*");
+                            }
+                        }
+                        break;
                     }
-                    break;
-                }
             }
         });
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.4.5",
+  "version": "0.5.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -29,6 +29,6 @@
     "@tsconfig/react-native": "^2.0.3",
     "@types/react-native-video": "^5.0.9",
     "react-native-url-polyfill": "^1.3.0",
-    "typescript": "^4.9.4"
+    "typescript": "^5.1.6"
   }
 }

package/src/blocks/button/button.jsx

@@ -1,5 +1,5 @@
-'use client';
 import BaseText from "../BaseText";
+("use client");
 import * as React from "react";
 import {
   FlatList,
@@ -9,6 +9,7 @@ import {
   Image,
   Text,
 } from "react-native";
+import { filterAttrs } from "../helpers.js";
 
 function Button(props) {
   return (
@@ -17,6 +18,7 @@ function Button(props) {
         <>
           <View
             role="button"
+            {...{}}
             {...props.attributes}
             href={props.link}
             target={props.openLinkInNewTab ? "_blank" : undefined}
@@ -26,7 +28,14 @@ function Button(props) {
         </>
       ) : (
         <>
-          <View {...props.attributes} style={styles.view1}>
+          <View
+            {...{}}
+            {...props.attributes}
+            style={{
+              ...styles.view1,
+              ...props.attributes.style,
+            }}
+          >
             <BaseText>{props.text}</BaseText>
           </View>
         </>

package/src/blocks/button/component-info.js

@@ -13,28 +13,22 @@ const componentInfo = {
     textAlign: "center",
     cursor: "pointer"
   },
-  inputs: [
-    {
-      name: "text",
-      type: "text",
-      defaultValue: "Click me!",
-      bubble: true
-    },
-    {
-      name: "link",
-      type: "url",
-      bubble: true
-    },
-    {
-      name: "openLinkInNewTab",
-      type: "boolean",
-      defaultValue: false,
-      friendlyName: "Open link in new tab"
-    }
-  ],
+  inputs: [{
+    name: "text",
+    type: "text",
+    defaultValue: "Click me!",
+    bubble: true
+  }, {
+    name: "link",
+    type: "url",
+    bubble: true
+  }, {
+    name: "openLinkInNewTab",
+    type: "boolean",
+    defaultValue: false,
+    friendlyName: "Open link in new tab"
+  }],
   static: true,
   noWrap: true
 };
-export {
-  componentInfo
-};
+export { componentInfo }

package/src/blocks/columns/columns.jsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 import {
   FlatList,
@@ -8,12 +8,11 @@ import {
   Image,
   Text,
 } from "react-native";
-import { useState, useContext } from "react";
-import RenderBlocks from "../../components/render-blocks";
-import { getSizesForBreakpoints } from "../../constants/device-sizes";
+import { useState } from "react";
+import Blocks from "../../components/blocks/blocks";
+import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
 import InlinedStyles from "../../components/inlined-styles";
 import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context.js";
 
 function Columns(props) {
   const [gutterSize, setGutterSize] = useState(() =>
@@ -52,17 +51,8 @@ function Columns(props) {
   );
 
   function columnsCssVars() {
-    if (TARGET === "reactNative") {
-      return {
-        flexDirection: flexDir,
-      };
-    }
     return {
-      "--flex-dir": flexDir,
-      "--flex-dir-tablet": getTabletStyle({
-        stackedStyle: flexDir,
-        desktopStyle: "row",
-      }),
+      flexDirection: flexDir,
     };
   }
 
@@ -77,9 +67,10 @@ function Columns(props) {
     const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
+    const marginLeftKey = "margin-left";
     return {
       width,
-      "margin-left": gutterPixels,
+      [marginLeftKey]: gutterPixels,
       "--column-width-mobile": getMobileStyle({
         stackedStyle: mobileWidth,
         desktopStyle: width,
@@ -101,7 +92,7 @@ function Columns(props) {
 
   function getWidthForBreakpointSize(size) {
     const breakpointSizes = getSizesForBreakpoints(
-      builderContext.content?.meta?.breakpoints || {}
+      props.builderContext.content?.meta?.breakpoints || {}
     );
     return breakpointSizes[size].max;
   }
@@ -134,13 +125,16 @@ function Columns(props) {
       `;
   }
 
-  const builderContext = useContext(BuilderContext);
-
   return (
     <View
-      style={columnsCssVars()}
-      dataSet={{
-        "builder-block-name": "builder-columns",
+      style={{
+        ...styles.view1,
+        ...columnsCssVars(),
+      }}
+      {...{
+        dataSet: {
+          "builder-block-name": "builder-columns",
+        },
       }}
     >
       {TARGET !== "reactNative" ? (
@@ -151,19 +145,26 @@ function Columns(props) {
 
       {props.columns?.map((column, index) => (
         <View
-          style={columnCssVars(index)}
-          dataSet={{
-            "builder-block-name": "builder-column",
+          style={{
+            ...styles.view2,
+            ...columnCssVars(index),
+          }}
+          {...{
+            dataSet: {
+              "builder-block-name": "builder-column",
+            },
           }}
           key={index}
         >
-          <RenderBlocks
+          <Blocks
             blocks={column.blocks}
             path={`component.options.columns.${index}.blocks`}
             parent={props.builderBlock.id}
             styleProp={{
               flexGrow: "1",
             }}
+            context={props.builderContext}
+            registeredComponents={props.builderComponents}
           />
         </View>
       ))}