@builder.io/sdk-react-native 0.0.1-6 → 0.0.1-60

package/CHANGELOG.md

@@ -0,0 +1,42 @@
+### 0.0.1-56
+
+🐛 Fix: image block `srcSet` was incorrectly set as `srcset`
+
+### 0.0.1-55
+
+🐛 Fix: custom components were not rendering correctly
+🐛 Fix: Image component's `srcSet` was not being set correctly
+
+### 0.0.1-52
+
+🧨 Breaking change: the format of the `customComponents` prop has changed from `[{ component, info }]` to `[{ component, ...info }]`.
+See [builder-registered-components.ts](/packages/sdks/src/constants/builder-registered-components.ts) for examples of how to do so, or see the example provided for this SDK.
+
+### 0.0.1-51
+
+⚠️ Deprecation notice: Registering components via `registerComponent(component, info)` is now deprecated.
+To register your custom components in Builder, you must now provide a `customComponents` array to the `RenderContent` component containing `[{ component, info }]`.
+See [builder-registered-components.ts](/packages/sdks/src/constants/builder-registered-components.ts) for examples of how to do so, or see the example provided for this SDK.
+
+### 0.0.1-50
+
+- feat: 🎸 export `isPreviewing()` (https://github.com/BuilderIO/builder/pull/951)
+- feat: 🎸 Add support for Symbols (https://github.com/BuilderIO/builder/pull/951)
+- feat: 🎸 Add support for Data Bindings https://github.com/BuilderIO/builder/pull/970
+
+- BREAKING CHANGE: 🧨 RenderContent must now be provided the `apiKey` as a prop (https://github.com/BuilderIO/builder/pull/951)
+
+### 0.0.1-49
+
+- Fix: show the "+ add block" button on empty pages https://github.com/BuilderIO/builder/pull/934
+- Add `getBuilderSearchParams` helper export to easily view current drafts on your production site. https://github.com/BuilderIO/builder/pull/883
+
+### 0.0.1-44
+
+Changes:
+
+- Fixes `getAllContent` to traverse all nested data from symbols/references https://github.com/BuilderIO/builder/pull/718
+- Fixes `getContent` (broken due to missing URL polyfill) https://github.com/BuilderIO/builder/pull/880
+- Strips invalid `this.` left from Mitosis compilation https://github.com/BuilderIO/builder/pull/717/commits/b1947c86db769f74a7408965dac70f22dfcc538d
+- Fix identification of react-native environment https://github.com/BuilderIO/builder/pull/717/commits/9d2a207ceca39bf83d5bbdc4bd67351e86105d78
+- Fix Aspect Ratio handling (this adds support for Pixel Tracking) https://github.com/BuilderIO/builder/pull/749, preceeded by https://github.com/BuilderIO/builder/pull/687

package/README.md

@@ -0,0 +1,19 @@
+# Builder.io React-native SDK (BETA)
+
+This is the React-Native SDK. It is currently in beta.
+
+## Mitosis
+
+This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).
+
+## Feature Support
+
+To check the status of the SDK, look at [these tables](../../README.md#feature-implementation).
+
+## Getting Started
+
+```
+npm install @builder.io/sdk-react-native@dev
+```
+
+Take a look at [our example repo](/examples/react-native) for how to use this SDK.

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.0.1-6",
+  "version": "0.0.1-60",
   "main": "src/index.js",
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
   },
   "dependencies": {
-    "react-native-render-html": "^5.1.1"
+    "react-native-render-html": "^6.3.4",
+    "react-native-video": "^5.1.1"
   },
   "peerDependencies": {
-    "react-native": "^0.64.2"
+    "react-native": "^0.64.3"
   },
   "devDependencies": {
-    "react-native": "^0.64.2"
+    "@types/react-native-video": "^5.0.9",
+    "react-native": "^0.64.3"
   }
 }

package/src/blocks/button/button.js

@@ -0,0 +1,31 @@
+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));
+import * as React from "react";
+import { View, Text } from "react-native";
+function Button(props) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.link ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
+    role: "button",
+    href: props.link,
+    target: props.openLinkInNewTab ? "_blank" : void 0
+  }), /* @__PURE__ */ React.createElement(Text, null, props.text))) : /* @__PURE__ */ React.createElement(View, __spreadValues({}, props.attributes), /* @__PURE__ */ React.createElement(Text, null, props.text)));
+}
+export {
+  Button as default
+};

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+const componentInfo = {
+  name: "Core:Button",
+  builtIn: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
+  defaultStyles: {
+    appearance: "none",
+    paddingTop: "15px",
+    paddingBottom: "15px",
+    paddingLeft: "25px",
+    paddingRight: "25px",
+    backgroundColor: "#000000",
+    color: "white",
+    borderRadius: "4px",
+    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"
+    }
+  ],
+  static: true,
+  noWrap: true
+};
+export {
+  componentInfo
+};

package/src/blocks/columns/columns.js

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+import RenderBlocks from "../../components/render-blocks.js";
+function Columns(props) {
+  var _a;
+  function getGutterSize() {
+    return typeof props.space === "number" ? props.space || 0 : 20;
+  }
+  function getColumns() {
+    return props.columns || [];
+  }
+  function getWidth(index) {
+    var _a2;
+    const columns = getColumns();
+    return ((_a2 = columns[index]) == null ? void 0 : _a2.width) || 100 / columns.length;
+  }
+  function getColumnCssWidth(index) {
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
+    const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
+    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+  }
+  function maybeApplyForTablet(prop) {
+    const _stackColumnsAt = props.stackColumnsAt || "tablet";
+    return _stackColumnsAt === "tablet" ? prop : "inherit";
+  }
+  function columnsCssVars() {
+    const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
+    return {
+      "--flex-dir": flexDir,
+      "--flex-dir-tablet": maybeApplyForTablet(flexDir)
+    };
+  }
+  function columnCssVars() {
+    const width = "100%";
+    const marginLeft = "0";
+    return {
+      "--column-width": width,
+      "--column-margin-left": marginLeft,
+      "--column-width-tablet": maybeApplyForTablet(width),
+      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft)
+    };
+  }
+  return /* @__PURE__ */ React.createElement(View, {
+    style: styles.view1
+  }, (_a = props.columns) == null ? void 0 : _a.map((column, index) => /* @__PURE__ */ React.createElement(View, {
+    style: styles.view2,
+    key: index
+  }, /* @__PURE__ */ React.createElement(RenderBlocks, {
+    blocks: column.blocks
+  }))));
+}
+const styles = StyleSheet.create({
+  view1: { display: "flex", alignItems: "stretch" },
+  view2: { flexGrow: 1 }
+});
+export {
+  Columns as default
+};

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

@@ -0,0 +1,218 @@
+import * as React from 'react';
+const componentInfo = {
+  name: "Columns",
+  builtIn: true,
+  inputs: [
+    {
+      name: "columns",
+      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>"
+                }
+              }
+            }
+          ]
+        },
+        {
+          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"
+                }
+              },
+              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
+                }
+              }
+            },
+            {
+              "@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>"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      onChange: "        function clearWidths() {          columns.forEach(col => {            col.delete('width');          });        }        const columns = options.get('columns') as Array<Map<String, any>>;        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();              }            }          }        }      "
+    },
+    {
+      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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+const componentInfo = {
+  name: "Custom Code",
+  static: true,
+  builtIn: 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
+};

package/src/blocks/{custom-code.lite.tsx → custom-code/custom-code.js}

@@ -1,43 +1,32 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext, useRef, useEffect } from "react";
-
-export default function CustomCode(props) {
+import { View } from "react-native";
+import { useState, useRef, useEffect } from "react";
+function CustomCode(props) {
+  const elem = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
-
   const [scriptsRun, setScriptsRun] = useState(() => []);
-
   function findAndRunScripts() {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
     if (elem.current && typeof window !== "undefined") {
-      /** @type {HTMLScriptElement[]} */
       const scripts = elem.current.getElementsByTagName("script");
-
       for (let i = 0; i < scripts.length; i++) {
         const script = scripts[i];
-
         if (script.src) {
           if (scriptsInserted.includes(script.src)) {
             continue;
           }
-
           scriptsInserted.push(script.src);
           const newScript = document.createElement("script");
           newScript.async = true;
           newScript.src = script.src;
           document.head.appendChild(newScript);
-        } else if (
-          !script.type ||
-          [
-            "text/javascript",
-            "application/javascript",
-            "application/ecmascript",
-          ].includes(script.type)
-        ) {
+        } else if (!script.type || [
+          "text/javascript",
+          "application/javascript",
+          "application/ecmascript"
+        ].includes(script.type)) {
           if (scriptsRun.includes(script.innerText)) {
             continue;
           }
-
           try {
             scriptsRun.push(script.innerText);
             new Function(script.innerText)();
@@ -48,20 +37,14 @@ export default function CustomCode(props) {
       }
     }
   }
-
-  const elem = useRef();
-
   useEffect(() => {
     findAndRunScripts();
   }, []);
-
-  return (
-    <View
-      ref={elem}
-      className={
-        "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
-      }
-      dangerouslySetInnerHTML={{ __html: "props.code" }}
-    />
-  );
+  return /* @__PURE__ */ React.createElement(View, {
+    ref: elem,
+    dangerouslySetInnerHTML: { __html: props.code }
+  });
 }
+export {
+  CustomCode as default
+};

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+const componentInfo = {
+  name: "Embed",
+  static: true,
+  builtIn: true,
+  inputs: [
+    {
+      name: "url",
+      type: "url",
+      required: true,
+      defaultValue: "",
+      helperText: "e.g. enter a youtube url, google map, etc",
+      onChange: "        const url = options.get('url');        if (url) {          options.set('content', 'Loading...');          // TODO: get this out of here!          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
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/{embed.lite.tsx → embed/embed.js}

@@ -1,43 +1,32 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext, useRef, useEffect } from "react";
-
-export default function Embed(props) {
+import { View } from "react-native";
+import { useState, useRef, useEffect } from "react";
+function Embed(props) {
+  const elem = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
-
   const [scriptsRun, setScriptsRun] = useState(() => []);
-
   function findAndRunScripts() {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
     if (elem.current && typeof window !== "undefined") {
-      /** @type {HTMLScriptElement[]} */
       const scripts = elem.current.getElementsByTagName("script");
-
       for (let i = 0; i < scripts.length; i++) {
         const script = scripts[i];
-
         if (script.src) {
           if (scriptsInserted.includes(script.src)) {
             continue;
           }
-
           scriptsInserted.push(script.src);
           const newScript = document.createElement("script");
           newScript.async = true;
           newScript.src = script.src;
           document.head.appendChild(newScript);
-        } else if (
-          !script.type ||
-          [
-            "text/javascript",
-            "application/javascript",
-            "application/ecmascript",
-          ].includes(script.type)
-        ) {
+        } else if (!script.type || [
+          "text/javascript",
+          "application/javascript",
+          "application/ecmascript"
+        ].includes(script.type)) {
           if (scriptsRun.includes(script.innerText)) {
             continue;
           }
-
           try {
             scriptsRun.push(script.innerText);
             new Function(script.innerText)();
@@ -48,18 +37,14 @@ export default function Embed(props) {
       }
     }
   }
-
-  const elem = useRef();
-
   useEffect(() => {
     findAndRunScripts();
   }, []);
-
-  return (
-    <View
-      className="builder-embed"
-      ref={elem}
-      dangerouslySetInnerHTML={{ __html: "props.content" }}
-    />
-  );
+  return /* @__PURE__ */ React.createElement(View, {
+    ref: elem,
+    dangerouslySetInnerHTML: { __html: props.content }
+  });
 }
+export {
+  Embed as default
+};