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

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

@@ -4,55 +4,41 @@ const componentInfo = {
   defaultStyles: {
     alignSelf: "flex-start"
   },
-  inputs: [
-    {
-      name: "options",
-      type: "list",
-      required: true,
-      subFields: [
-        {
-          name: "value",
-          type: "text",
-          required: true
-        },
-        {
-          name: "name",
-          type: "text"
-        }
-      ],
-      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"
-    },
-    {
+  inputs: [{
+    name: "options",
+    type: "list",
+    required: true,
+    subFields: [{
       name: "value",
-      type: "string",
-      advanced: true
-    },
-    {
-      name: "required",
-      type: "boolean",
-      defaultValue: false
-    }
-  ],
+      type: "text",
+      required: true
+    }, {
+      name: "name",
+      type: "text"
+    }],
+    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
 };
-export {
-  componentInfo
-};
+export { componentInfo }

package/src/blocks/select/select.jsx

@@ -1,5 +1,5 @@
-'use client';
 import BaseText from "../BaseText";
+("use client");
 import * as React from "react";
 import {
   FlatList,
@@ -10,10 +10,12 @@ import {
   Text,
 } from "react-native";
 import { isEditing } from "../../functions/is-editing.js";
+import { filterAttrs } from "../helpers.js";
 
 function SelectComponent(props) {
   return (
     <View
+      {...{}}
       {...props.attributes}
       value={props.value}
       key={

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

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

package/src/blocks/submit-button/submit-button.jsx

@@ -1,5 +1,5 @@
-'use client';
 import BaseText from "../BaseText";
+("use client");
 import * as React from "react";
 import {
   FlatList,
@@ -9,10 +9,11 @@ import {
   Image,
   Text,
 } from "react-native";
+import { filterAttrs } from "../helpers.js";
 
 function SubmitButton(props) {
   return (
-    <View type="submit" {...props.attributes}>
+    <View type="submit" {...{}} {...props.attributes}>
       <BaseText>{props.text}</BaseText>
     </View>
   );

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

@@ -2,41 +2,34 @@ const componentInfo = {
   name: "Symbol",
   noWrap: true,
   static: 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"
-    }
-  ]
-};
-export {
-  componentInfo
+  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"
+  }]
 };
+export { componentInfo }

package/src/blocks/symbol/symbol.helpers.js

@@ -0,0 +1,60 @@
+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());
+  });
+};
+import { getContent } from "../../functions/get-content/index.js";
+import { logger } from "../../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 getContent(__spreadValues({
+      model: symbol.model,
+      apiKey: builderContextValue.apiKey,
+      apiVersion: builderContextValue.apiVersion
+    }, (symbol == null ? void 0 : symbol.entry) && {
+      query: {
+        id: symbol.entry
+      }
+    })).catch(err => {
+      logger.error("Could not fetch symbol content: ", err);
+      return void 0;
+    });
+  }
+  return void 0;
+});
+export { fetchContent }

package/src/blocks/symbol/symbol.jsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 import {
   FlatList,
@@ -8,19 +8,15 @@ import {
   Image,
   Text,
 } from "react-native";
-import { useState, useContext, useEffect } from "react";
-import RenderContent from "../../components/render-content/render-content";
-import BuilderContext from "../../context/builder.context.js";
-import { getContent } from "../../functions/get-content/index.js";
-import { TARGET } from "../../constants/target";
-import { logger } from "../../helpers/logger";
+import { useState, useEffect } from "react";
+import ContentVariants from "../../components/content-variants/content-variants";
+import { filterAttrs } from "../helpers.js";
+import { fetchContent } from "./symbol.helpers.js";
 
 function Symbol(props) {
-  const [className, setClassName] = useState(() =>
-    [
-      ...(TARGET === "vue2" || TARGET === "vue3"
-        ? Object.keys(props.attributes.class)
-        : [props.attributes.class]),
+  function className() {
+    return [
+      ...[],
       "builder-symbol",
       props.symbol?.inline ? "builder-inline-symbol" : undefined,
       props.symbol?.dynamic || props.dynamic
@@ -28,71 +24,50 @@ function Symbol(props) {
         : undefined,
     ]
       .filter(Boolean)
-      .join(" ")
-  );
+      .join(" ");
+  }
 
   const [contentToUse, setContentToUse] = useState(() => props.symbol?.content);
 
-  function fetchContent() {
-    /**
-     * 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 &&
-      props.symbol?.model &&
-      // This is a hack, we should not need to check for this, but it is needed for Svelte.
-      builderContext?.apiKey
-    ) {
-      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.error("Could not fetch symbol content: ", err);
-        });
-    }
+  function setContent() {
+    if (contentToUse) return;
+    fetchContent({
+      symbol: props.symbol,
+      builderContextValue: props.builderContext,
+    }).then((newContent) => {
+      if (newContent) {
+        setContentToUse(newContent);
+      }
+    });
   }
 
-  const builderContext = useContext(BuilderContext);
-
   useEffect(() => {
-    fetchContent();
+    setContent();
   }, []);
 
   useEffect(() => {
-    fetchContent();
+    setContent();
   }, [props.symbol]);
 
   return (
     <View
+      {...{}}
       {...props.attributes}
-      dataSet={{
-        class: className,
+      {...{
+        dataSet: {
+          class: className(),
+        },
       }}
     >
-      <RenderContent
-        apiVersion={builderContext.apiVersion}
-        apiKey={builderContext.apiKey}
-        context={builderContext.context}
-        customComponents={Object.values(builderContext.registeredComponents)}
+      <ContentVariants
+        __isNestedRender={true}
+        apiVersion={props.builderContext.apiVersion}
+        apiKey={props.builderContext.apiKey}
+        context={props.builderContext.context}
+        customComponents={Object.values(props.builderComponents)}
         data={{
           ...props.symbol?.data,
-          ...builderContext.localState,
+          ...props.builderContext.localState,
           ...contentToUse?.data?.state,
         }}
         model={props.symbol?.model}

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

@@ -1,23 +1,20 @@
 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: [
-    {
-      name: "text",
-      type: "html",
-      required: true,
-      autoFocus: true,
-      bubble: true,
-      defaultValue: "Enter some text..."
-    }
-  ],
+  inputs: [{
+    name: "text",
+    type: "html",
+    required: true,
+    autoFocus: true,
+    bubble: true,
+    defaultValue: "Enter some text..."
+  }],
   defaultStyles: {
     lineHeight: "normal",
     height: "auto",
     textAlign: "center"
   }
 };
-export {
-  componentInfo
-};
+export { componentInfo }

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

@@ -1,33 +1,27 @@
 const componentInfo = {
   name: "Form:TextArea",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
-  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
-    }
-  ],
+  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",
@@ -41,6 +35,4 @@ const componentInfo = {
   static: true,
   noWrap: true
 };
-export {
-  componentInfo
-};
+export { componentInfo }

package/src/blocks/textarea/textarea.jsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 import {
   FlatList,
@@ -8,10 +8,12 @@ import {
   Image,
   Text,
 } from "react-native";
+import { filterAttrs } from "../helpers.js";
 
 function Textarea(props) {
   return (
     <View
+      {...{}}
       {...props.attributes}
       placeholder={props.placeholder}
       name={props.name}