@builder.io/sdk-react-native 0.2.0 → 0.2.1

package/dist/components/render-block/block-styles.js

@@ -62,6 +62,9 @@ function BlockStyles(props) {
         const mediumStyles = styles === null || styles === void 0 ? void 0 : styles.medium;
         const smallStyles = styles === null || styles === void 0 ? void 0 : styles.small;
         const className = useBlock().id;
+        if (!className) {
+            return "";
+        }
         const largeStylesClass = largeStyles
             ? (0, css_js_1.createCssClass)({
                 className,

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isEmptyHtmlElement = exports.getRepeatItemData = exports.getComponent = void 0;
+exports.isEmptyHtmlElement = exports.getRepeatItemData = exports.getProxyState = exports.getComponent = void 0;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -107,3 +107,19 @@ const getRepeatItemData = ({ block, context }) => {
     return repeatArray;
 };
 exports.getRepeatItemData = getRepeatItemData;
+const getProxyState = (context) => {
+    if (typeof Proxy === "undefined") {
+        console.error("no Proxy available in this environment, cannot proxy state.");
+        return context.state;
+    }
+    const useState = new Proxy(context.state, {
+        set: (obj, prop, value) => {
+            var _a;
+            obj[prop] = value;
+            (_a = context.setState) == null ? void 0 : _a.call(context, obj);
+            return true;
+        }
+    });
+    return useState;
+};
+exports.getProxyState = getProxyState;

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

@@ -32,7 +32,6 @@ const react_1 = require("react");
 const get_block_actions_js_1 = require("../../functions/get-block-actions.js");
 const get_block_component_options_js_1 = require("../../functions/get-block-component-options.js");
 const get_block_properties_js_1 = require("../../functions/get-block-properties.js");
-const get_block_tag_js_1 = require("../../functions/get-block-tag.js");
 const get_processed_block_js_1 = require("../../functions/get-processed-block.js");
 const block_styles_1 = __importDefault(require("./block-styles"));
 const render_block_helpers_js_1 = require("./render-block.helpers.js");
@@ -48,9 +47,10 @@ function RenderBlock(props) {
         block: props.block,
         context: props.context,
     }));
-    function tag() {
-        return (0, get_block_tag_js_1.getBlockTag)(useBlock());
-    }
+    const [repeatItemData, setRepeatItemData] = (0, react_1.useState)(() => (0, render_block_helpers_js_1.getRepeatItemData)({
+        block: props.block,
+        context: props.context,
+    }));
     function useBlock() {
         return repeatItemData
             ? props.block
@@ -61,6 +61,7 @@ function RenderBlock(props) {
                 shouldEvaluateBindings: true,
             });
     }
+    const [tag, setTag] = (0, react_1.useState)(() => props.block.tagName || "div");
     function canShowBlock() {
         if ((0, nullable_js_1.checkIsDefined)(useBlock().hide)) {
             return !useBlock().hide;
@@ -70,27 +71,11 @@ function RenderBlock(props) {
         }
         return true;
     }
-    function proxyState() {
-        if (typeof Proxy === "undefined") {
-            console.error("no Proxy available in this environment, cannot proxy state.");
-            return props.context.state;
-        }
-        const useState = new Proxy(props.context.state, {
-            set: (obj, prop, value) => {
-                var _a, _b;
-                // set the value on the state object, so that the event handler instantly gets the update.
-                obj[prop] = value;
-                // set the value in the context, so that the rest of the app gets the update.
-                (_b = (_a = props.context).setState) === null || _b === void 0 ? void 0 : _b.call(_a, obj);
-                return true;
-            },
-        });
-        return useState;
-    }
+    const [proxyState, setProxyState] = (0, react_1.useState)(() => (0, render_block_helpers_js_1.getProxyState)(props.context));
     function actions() {
         return (0, get_block_actions_js_1.getBlockActions)({
             block: useBlock(),
-            state: proxyState(),
+            state: target_js_1.TARGET === "qwik" ? props.context.state : proxyState,
             context: props.context.context,
         });
     }
@@ -109,29 +94,6 @@ function RenderBlock(props) {
                 : {}),
         };
     }
-    function renderComponentProps() {
-        var _a;
-        return {
-            blockChildren: (_a = useBlock().children) !== null && _a !== void 0 ? _a : [],
-            componentRef: component === null || component === void 0 ? void 0 : component.component,
-            componentOptions: {
-                ...(0, get_block_component_options_js_1.getBlockComponentOptions)(useBlock()),
-                /**
-                 * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-                 * they are provided to the component itself directly.
-                 */
-                ...(!(component === null || component === void 0 ? void 0 : component.noWrap)
-                    ? {}
-                    : {
-                        attributes: {
-                            ...attributes(),
-                            ...actions(),
-                        },
-                    }),
-            },
-            context: childrenContext(),
-        };
-    }
     function childrenWithoutParentComponent() {
         var _a;
         /**
@@ -143,10 +105,6 @@ function RenderBlock(props) {
         const shouldRenderChildrenOutsideRef = !(component === null || component === void 0 ? void 0 : component.component) && !repeatItemData;
         return shouldRenderChildrenOutsideRef ? (_a = useBlock().children) !== null && _a !== void 0 ? _a : [] : [];
     }
-    const [repeatItemData, setRepeatItemData] = (0, react_1.useState)(() => (0, render_block_helpers_js_1.getRepeatItemData)({
-        block: props.block,
-        context: props.context,
-    }));
     function childrenContext() {
         const getInheritedTextStyles = () => {
             if (target_js_1.TARGET !== "reactNative") {
@@ -169,11 +127,34 @@ function RenderBlock(props) {
             inheritedStyles: getInheritedTextStyles(),
         };
     }
+    function renderComponentProps() {
+        var _a;
+        return {
+            blockChildren: (_a = useBlock().children) !== null && _a !== void 0 ? _a : [],
+            componentRef: component === null || component === void 0 ? void 0 : component.component,
+            componentOptions: {
+                ...(0, get_block_component_options_js_1.getBlockComponentOptions)(useBlock()),
+                /**
+                 * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+                 * they are provided to the component itself directly.
+                 */
+                ...(!(component === null || component === void 0 ? void 0 : component.noWrap)
+                    ? {}
+                    : {
+                        attributes: {
+                            ...attributes(),
+                            ...actions(),
+                        },
+                    }),
+            },
+            context: childrenContext(),
+        };
+    }
     return (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !(component === null || component === void 0 ? void 0 : component.noWrap) ? (React.createElement(React.Fragment, null,
-        (0, render_block_helpers_js_1.isEmptyHtmlElement)(tag()) ? (React.createElement(React.Fragment, null,
+        (0, render_block_helpers_js_1.isEmptyHtmlElement)(tag) ? (React.createElement(React.Fragment, null,
             React.createElement(react_native_1.View, { ...attributes(), ...actions() }))) : null,
-        !(0, render_block_helpers_js_1.isEmptyHtmlElement)(tag()) && repeatItemData ? (React.createElement(React.Fragment, null, repeatItemData === null || repeatItemData === void 0 ? void 0 : repeatItemData.map((data, index) => (React.createElement(render_repeated_block_1.default, { key: index, repeatContext: data.context, block: data.block }))))) : null,
-        !(0, render_block_helpers_js_1.isEmptyHtmlElement)(tag()) && !repeatItemData ? (React.createElement(React.Fragment, null,
+        !(0, render_block_helpers_js_1.isEmptyHtmlElement)(tag) && repeatItemData ? (React.createElement(React.Fragment, null, repeatItemData === null || repeatItemData === void 0 ? void 0 : repeatItemData.map((data, index) => (React.createElement(render_repeated_block_1.default, { key: index, repeatContext: data.context, block: data.block }))))) : null,
+        !(0, render_block_helpers_js_1.isEmptyHtmlElement)(tag) && !repeatItemData ? (React.createElement(React.Fragment, null,
             React.createElement(react_native_1.View, { ...attributes(), ...actions() },
                 React.createElement(render_component_1.default, { ...renderComponentProps() }), (_a = childrenWithoutParentComponent()) === null || _a === void 0 ? void 0 :
                 _a.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))), (_b = childrenWithoutParentComponent()) === null || _b === void 0 ? void 0 :

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

@@ -27,14 +27,14 @@ const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const target_js_1 = require("../constants/target.js");
 function RenderInlinedStyles(props) {
-    function injectedStyleScript() {
-        return `<${tag()}>${props.styles}</${tag()}>`;
-    }
     function tag() {
         // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
         // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
         return "sty" + "le";
     }
+    function injectedStyleScript() {
+        return `<${tag()}>${props.styles}</${tag()}>`;
+    }
     return (React.createElement(React.Fragment, null, target_js_1.TARGET === "svelte" || target_js_1.TARGET === "qwik" ? (React.createElement(React.Fragment, null,
         React.createElement(react_native_1.View, { dangerouslySetInnerHTML: { __html: props.styles } }))) : (React.createElement(react_native_1.View, null,
         React.createElement(react_native_1.Text, null, props.styles)))));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/components/render-block/block-styles.jsx

@@ -48,6 +48,9 @@ function BlockStyles(props) {
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
     const className = useBlock().id;
+    if (!className) {
+      return "";
+    }
     const largeStylesClass = largeStyles
       ? createCssClass({
           className,

package/src/components/render-block/render-block.helpers.js

@@ -106,8 +106,24 @@ const getRepeatItemData = ({
   }));
   return repeatArray;
 };
+const getProxyState = (context) => {
+  if (typeof Proxy === "undefined") {
+    console.error("no Proxy available in this environment, cannot proxy state.");
+    return context.state;
+  }
+  const useState = new Proxy(context.state, {
+    set: (obj, prop, value) => {
+      var _a;
+      obj[prop] = value;
+      (_a = context.setState) == null ? void 0 : _a.call(context, obj);
+      return true;
+    }
+  });
+  return useState;
+};
 export {
   getComponent,
+  getProxyState,
   getRepeatItemData,
   isEmptyHtmlElement
 };

package/src/components/render-block/render-block.jsx

@@ -11,11 +11,11 @@ import { useState } from "react";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getBlockProperties } from "../../functions/get-block-properties.js";
-import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles";
 import {
   getComponent,
+  getProxyState,
   getRepeatItemData,
   isEmptyHtmlElement,
 } from "./render-block.helpers.js";
@@ -34,9 +34,12 @@ function RenderBlock(props) {
     })
   );
 
-  function tag() {
-    return getBlockTag(useBlock());
-  }
+  const [repeatItemData, setRepeatItemData] = useState(() =>
+    getRepeatItemData({
+      block: props.block,
+      context: props.context,
+    })
+  );
 
   function useBlock() {
     return repeatItemData
@@ -49,6 +52,8 @@ function RenderBlock(props) {
         });
   }
 
+  const [tag, setTag] = useState(() => props.block.tagName || "div");
+
   function canShowBlock() {
     if (checkIsDefined(useBlock().hide)) {
       return !useBlock().hide;
@@ -59,30 +64,14 @@ function RenderBlock(props) {
     return true;
   }
 
-  function proxyState() {
-    if (typeof Proxy === "undefined") {
-      console.error(
-        "no Proxy available in this environment, cannot proxy state."
-      );
-      return props.context.state;
-    }
-    const useState = new Proxy(props.context.state, {
-      set: (obj, prop, value) => {
-        // set the value on the state object, so that the event handler instantly gets the update.
-        obj[prop] = value;
-
-        // set the value in the context, so that the rest of the app gets the update.
-        props.context.setState?.(obj);
-        return true;
-      },
-    });
-    return useState;
-  }
+  const [proxyState, setProxyState] = useState(() =>
+    getProxyState(props.context)
+  );
 
   function actions() {
     return getBlockActions({
       block: useBlock(),
-      state: proxyState(),
+      state: TARGET === "qwik" ? props.context.state : proxyState,
       context: props.context.context,
     });
   }
@@ -103,29 +92,6 @@ function RenderBlock(props) {
     };
   }
 
-  function renderComponentProps() {
-    return {
-      blockChildren: useBlock().children ?? [],
-      componentRef: component?.component,
-      componentOptions: {
-        ...getBlockComponentOptions(useBlock()),
-        /**
-         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-         * they are provided to the component itself directly.
-         */
-        ...(!component?.noWrap
-          ? {}
-          : {
-              attributes: {
-                ...attributes(),
-                ...actions(),
-              },
-            }),
-      },
-      context: childrenContext(),
-    };
-  }
-
   function childrenWithoutParentComponent() {
     /**
      * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
@@ -138,13 +104,6 @@ function RenderBlock(props) {
     return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
   }
 
-  const [repeatItemData, setRepeatItemData] = useState(() =>
-    getRepeatItemData({
-      block: props.block,
-      context: props.context,
-    })
-  );
-
   function childrenContext() {
     const getInheritedTextStyles = () => {
       if (TARGET !== "reactNative") {
@@ -170,18 +129,41 @@ function RenderBlock(props) {
     };
   }
 
+  function renderComponentProps() {
+    return {
+      blockChildren: useBlock().children ?? [],
+      componentRef: component?.component,
+      componentOptions: {
+        ...getBlockComponentOptions(useBlock()),
+        /**
+         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+         * they are provided to the component itself directly.
+         */
+        ...(!component?.noWrap
+          ? {}
+          : {
+              attributes: {
+                ...attributes(),
+                ...actions(),
+              },
+            }),
+      },
+      context: childrenContext(),
+    };
+  }
+
   return (
     <>
       {canShowBlock() ? (
         <>
           {!component?.noWrap ? (
             <>
-              {isEmptyHtmlElement(tag()) ? (
+              {isEmptyHtmlElement(tag) ? (
                 <>
                   <View {...attributes()} {...actions()} />
                 </>
               ) : null}
-              {!isEmptyHtmlElement(tag()) && repeatItemData ? (
+              {!isEmptyHtmlElement(tag) && repeatItemData ? (
                 <>
                   {repeatItemData?.map((data, index) => (
                     <RenderRepeatedBlock
@@ -192,7 +174,7 @@ function RenderBlock(props) {
                   ))}
                 </>
               ) : null}
-              {!isEmptyHtmlElement(tag()) && !repeatItemData ? (
+              {!isEmptyHtmlElement(tag) && !repeatItemData ? (
                 <>
                   <View {...attributes()} {...actions()}>
                     <RenderComponent {...renderComponentProps()} />

package/src/components/render-inlined-styles.jsx

@@ -10,16 +10,16 @@ import {
 import { TARGET } from "../constants/target.js";
 
 function RenderInlinedStyles(props) {
-  function injectedStyleScript() {
-    return `<${tag()}>${props.styles}</${tag()}>`;
-  }
-
   function tag() {
     // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
     // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
     return "sty" + "le";
   }
 
+  function injectedStyleScript() {
+    return `<${tag()}>${props.styles}</${tag()}>`;
+  }
+
   return (
     <>
       {TARGET === "svelte" || TARGET === "qwik" ? (

package/src/functions/get-block-tag.js

@@ -1,7 +0,0 @@
-import { View } from "react-native";
-function getBlockTag(_block) {
-  return View;
-}
-export {
-  getBlockTag
-};