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

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

@@ -1,241 +1,218 @@
-import { serializeFn } from "../util.js";
 const componentInfo = {
   name: "Columns",
-  inputs: [
-    {
-      name: "columns",
+  isRSC: true,
+  inputs: [{
+    name: "columns",
+    type: "array",
+    broadcast: true,
+    subFields: [{
+      name: "blocks",
       type: "array",
-      broadcast: true,
-      subFields: [
-        {
-          name: "blocks",
-          type: "array",
-          hideFromUI: true,
-          defaultValue: [
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto",
-                  minHeight: "20px",
-                  minWidth: "20px",
-                  overflow: "hidden"
-                }
-              },
-              component: {
-                name: "Image",
-                options: {
-                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-                  backgroundPosition: "center",
-                  backgroundSize: "cover",
-                  aspectRatio: 0.7004048582995948
-                }
-              }
-            },
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto"
-                }
-              },
-              component: {
-                name: "Text",
-                options: {
-                  text: "<p>Enter some text...</p>"
-                }
-              }
-            }
-          ]
+      hideFromUI: true,
+      defaultValue: [{
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto",
+            minHeight: "20px",
+            minWidth: "20px",
+            overflow: "hidden"
+          }
         },
-        {
-          name: "width",
-          type: "number",
-          hideFromUI: true,
-          helperText: "Width %, e.g. set to 50 to fill half of the space"
+        component: {
+          name: "Image",
+          options: {
+            image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+            backgroundPosition: "center",
+            backgroundSize: "cover",
+            aspectRatio: 0.7004048582995948
+          }
+        }
+      }, {
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto"
+          }
         },
-        {
-          name: "link",
-          type: "url",
-          helperText: "Optionally set a url that clicking this column will link to"
+        component: {
+          name: "Text",
+          options: {
+            text: "<p>Enter some text...</p>"
+          }
         }
-      ],
-      defaultValue: [
-        {
-          blocks: [
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto",
-                  minHeight: "20px",
-                  minWidth: "20px",
-                  overflow: "hidden"
-                }
-              },
-              component: {
-                name: "Image",
-                options: {
-                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-                  backgroundPosition: "center",
-                  backgroundSize: "cover",
-                  aspectRatio: 0.7004048582995948
-                }
-              }
-            },
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto"
-                }
-              },
-              component: {
-                name: "Text",
-                options: {
-                  text: "<p>Enter some text...</p>"
-                }
-              }
-            }
-          ]
+      }]
+    }, {
+      name: "width",
+      type: "number",
+      hideFromUI: true,
+      helperText: "Width %, e.g. set to 50 to fill half of the space"
+    }, {
+      name: "link",
+      type: "url",
+      helperText: "Optionally set a url that clicking this column will link to"
+    }],
+    defaultValue: [{
+      blocks: [{
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto",
+            minHeight: "20px",
+            minWidth: "20px",
+            overflow: "hidden"
+          }
         },
-        {
-          blocks: [
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto",
-                  minHeight: "20px",
-                  minWidth: "20px",
-                  overflow: "hidden"
-                }
-              },
-              component: {
-                name: "Image",
-                options: {
-                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-                  backgroundPosition: "center",
-                  backgroundSize: "cover",
-                  aspectRatio: 0.7004048582995948
-                }
-              }
-            },
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto"
-                }
-              },
-              component: {
-                name: "Text",
-                options: {
-                  text: "<p>Enter some text...</p>"
-                }
-              }
-            }
-          ]
+        component: {
+          name: "Image",
+          options: {
+            image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+            backgroundPosition: "center",
+            backgroundSize: "cover",
+            aspectRatio: 0.7004048582995948
+          }
+        }
+      }, {
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto"
+          }
+        },
+        component: {
+          name: "Text",
+          options: {
+            text: "<p>Enter some text...</p>"
+          }
+        }
+      }]
+    }, {
+      blocks: [{
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto",
+            minHeight: "20px",
+            minWidth: "20px",
+            overflow: "hidden"
+          }
+        },
+        component: {
+          name: "Image",
+          options: {
+            image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+            backgroundPosition: "center",
+            backgroundSize: "cover",
+            aspectRatio: 0.7004048582995948
+          }
         }
-      ],
-      onChange: serializeFn((options) => {
-        function clearWidths() {
-          columns.forEach((col) => {
-            col.delete("width");
-          });
+      }, {
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto"
+          }
+        },
+        component: {
+          name: "Text",
+          options: {
+            text: "<p>Enter some text...</p>"
+          }
         }
-        const columns = options.get("columns");
-        if (Array.isArray(columns)) {
-          const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
-          if (containsColumnWithWidth) {
-            const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
-            if (containsColumnWithoutWidth) {
+      }]
+    }],
+    onChange: options => {
+      function clearWidths() {
+        columns.forEach(col => {
+          col.delete("width");
+        });
+      }
+      const columns = options.get("columns");
+      if (Array.isArray(columns)) {
+        const containsColumnWithWidth = !!columns.find(col => col.get("width"));
+        if (containsColumnWithWidth) {
+          const containsColumnWithoutWidth = !!columns.find(col => !col.get("width"));
+          if (containsColumnWithoutWidth) {
+            clearWidths();
+          } else {
+            const sumWidths = columns.reduce((memo, col) => {
+              return memo + col.get("width");
+            }, 0);
+            const widthsDontAddUp = sumWidths !== 100;
+            if (widthsDontAddUp) {
               clearWidths();
-            } else {
-              const sumWidths = columns.reduce((memo, col) => {
-                return memo + col.get("width");
-              }, 0);
-              const widthsDontAddUp = sumWidths !== 100;
-              if (widthsDontAddUp) {
-                clearWidths();
-              }
             }
           }
         }
-      })
-    },
-    {
-      name: "space",
-      type: "number",
-      defaultValue: 20,
-      helperText: "Size of gap between columns",
-      advanced: true
-    },
-    {
-      name: "stackColumnsAt",
-      type: "string",
-      defaultValue: "tablet",
-      helperText: "Convert horizontal columns to vertical at what device size",
-      enum: ["tablet", "mobile", "never"],
-      advanced: true
-    },
-    {
-      name: "reverseColumnsWhenStacked",
-      type: "boolean",
-      defaultValue: false,
-      helperText: "When stacking columns for mobile devices, reverse the ordering",
-      advanced: true
+      }
     }
-  ]
-};
-export {
-  componentInfo
+  }, {
+    name: "space",
+    type: "number",
+    defaultValue: 20,
+    helperText: "Size of gap between columns",
+    advanced: true
+  }, {
+    name: "stackColumnsAt",
+    type: "string",
+    defaultValue: "tablet",
+    helperText: "Convert horizontal columns to vertical at what device size",
+    enum: ["tablet", "mobile", "never"],
+    advanced: true
+  }, {
+    name: "reverseColumnsWhenStacked",
+    type: "boolean",
+    defaultValue: false,
+    helperText: "When stacking columns for mobile devices, reverse the ordering",
+    advanced: true
+  }]
 };
+export { componentInfo }

package/src/blocks/custom-code/component-info.js

@@ -2,29 +2,23 @@ const componentInfo = {
   name: "Custom Code",
   static: true,
   requiredPermissions: ["editCode"],
-  inputs: [
-    {
-      name: "code",
-      type: "html",
-      required: true,
-      defaultValue: "<p>Hello there, I am custom HTML code!</p>",
-      code: true
-    },
-    {
-      name: "replaceNodes",
-      type: "boolean",
-      helperText: "Preserve server rendered dom nodes",
-      advanced: true
-    },
-    {
-      name: "scriptsClientOnly",
-      type: "boolean",
-      defaultValue: false,
-      helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
-      advanced: true
-    }
-  ]
-};
-export {
-  componentInfo
+  inputs: [{
+    name: "code",
+    type: "html",
+    required: true,
+    defaultValue: "<p>Hello there, I am custom HTML code!</p>",
+    code: true
+  }, {
+    name: "replaceNodes",
+    type: "boolean",
+    helperText: "Preserve server rendered dom nodes",
+    advanced: true
+  }, {
+    name: "scriptsClientOnly",
+    type: "boolean",
+    defaultValue: false,
+    helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
+    advanced: true
+  }]
 };
+export { componentInfo }

package/src/blocks/custom-code/custom-code.jsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 import {
   FlatList,

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

@@ -1,43 +1,37 @@
-import { serializeFn } from "../util.js";
 const componentInfo = {
   name: "Embed",
   static: true,
-  inputs: [
-    {
-      name: "url",
-      type: "url",
-      required: true,
-      defaultValue: "",
-      helperText: "e.g. enter a youtube url, google map, etc",
-      onChange: serializeFn((options) => {
-        const url = options.get("url");
-        if (url) {
-          options.set("content", "Loading...");
-          const apiKey = "ae0e60e78201a3f2b0de4b";
-          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
-            if (options.get("url") === url) {
-              if (data.html) {
-                options.set("content", data.html);
-              } else {
-                options.set("content", "Invalid url, please try another");
-              }
+  inputs: [{
+    name: "url",
+    type: "url",
+    required: true,
+    defaultValue: "",
+    helperText: "e.g. enter a youtube url, google map, etc",
+    onChange: options => {
+      const url = options.get("url");
+      if (url) {
+        options.set("content", "Loading...");
+        const apiKey = "ae0e60e78201a3f2b0de4b";
+        return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(res => res.json()).then(data => {
+          if (options.get("url") === url) {
+            if (data.html) {
+              options.set("content", data.html);
+            } else {
+              options.set("content", "Invalid url, please try another");
             }
-          }).catch((_err) => {
-            options.set("content", "There was an error embedding this URL, please try again or another URL");
-          });
-        } else {
-          options.delete("content");
-        }
-      })
-    },
-    {
-      name: "content",
-      type: "html",
-      defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
-      hideFromUI: true
+          }
+        }).catch(_err => {
+          options.set("content", "There was an error embedding this URL, please try again or another URL");
+        });
+      } else {
+        options.delete("content");
+      }
     }
-  ]
-};
-export {
-  componentInfo
+  }, {
+    name: "content",
+    type: "html",
+    defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+    hideFromUI: true
+  }]
 };
+export { componentInfo }

package/src/blocks/embed/embed.jsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 import {
   FlatList,

package/src/blocks/embed/helpers.js

@@ -1,9 +1,3 @@
-const SCRIPT_MIME_TYPES = [
-  "text/javascript",
-  "application/javascript",
-  "application/ecmascript"
-];
-const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
-export {
-  isJsScript
-};
+const SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
+const isJsScript = script => SCRIPT_MIME_TYPES.includes(script.type);
+export { isJsScript }