@builder.io/sdk-react-native 0.0.1-38 → 0.0.1-44

package/README.md

@@ -0,0 +1,15 @@
+# Builder.io React-native SDK (BETA)
+
+This is the React-Native SDK. It is currently in beta.
+
+## 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,20 +1,20 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.0.1-38",
+  "version": "0.0.1-44",
   "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": {
     "@types/react-native-video": "^5.0.9",
-    "react-native": "^0.64.2"
+    "react-native": "^0.64.3"
   }
 }

package/src/blocks/columns.js

@@ -12,14 +12,44 @@ function Columns(props) {
     return props.columns || [];
   }
   function getWidth(index) {
-    const columns = this.getColumns();
-    return (columns[index] && columns[index].width) || 100 / columns.length;
+    var _a2;
+    const columns = getColumns();
+    return (
+      ((_a2 = columns[index]) == null ? void 0 : _a2.width) ||
+      100 / columns.length
+    );
   }
   function getColumnCssWidth(index) {
-    const columns = this.getColumns();
-    const gutterSize = this.getGutterSize();
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
     const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
+    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,

package/src/blocks/columns.lite.tsx

@@ -12,15 +12,44 @@ export default function Columns(props) {
   }
 
   function getWidth(index) {
-    const columns = this.getColumns();
-    return (columns[index] && columns[index].width) || 100 / columns.length;
+    const columns = getColumns();
+    return columns[index]?.width || 100 / columns.length;
   }
 
   function getColumnCssWidth(index) {
-    const columns = this.getColumns();
-    const gutterSize = this.getGutterSize();
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
     const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
+    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 (

package/src/blocks/form.lite.tsx

@@ -141,7 +141,7 @@ export default function FormComponent(props) {
               get(body, props.errorMessagePath);
             if (message) {
               if (typeof message !== 'string') {
-                /* TODO: ideally convert json to yaml so it woul dbe like             error: - email has been taken */ message =
+                /* TODO: ideally convert json to yaml so it woul dbe like            error: - email has been taken */ message =
                   JSON.stringify(message);
               }
               setFormErrorMessage(message);

package/src/blocks/image.js

@@ -1,24 +1,60 @@
 import * as React from 'react';
+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;
+};
 import { Image as ReactImage, View } from 'react-native';
 import { registerComponent } from '../functions/register-component';
 function Image(props) {
-  return /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: { position: 'relative' },
-    },
-    /* @__PURE__ */ React.createElement(ReactImage, {
-      resizeMode: props.backgroundSize || 'contain',
-      style: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 },
-      source: { uri: props.image },
-    }),
-    /* @__PURE__ */ React.createElement(View, {
-      style: {
-        width: '100%',
-        paddingTop: props.aspectRatio * 100 + '%',
-      },
-    })
-  );
+  return props.aspectRatio
+    ? /* @__PURE__ */ React.createElement(
+        View,
+        {
+          style: { position: 'relative' },
+        },
+        /* @__PURE__ */ React.createElement(ReactImage, {
+          resizeMode: props.backgroundSize || 'contain',
+          style: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 },
+          source: { uri: props.image },
+        }),
+        /* @__PURE__ */ React.createElement(View, {
+          style: {
+            width: '100%',
+            paddingTop: props.aspectRatio * 100 + '%',
+          },
+        })
+      )
+    : /* @__PURE__ */ React.createElement(ReactImage, {
+        resizeMode: props.backgroundSize || 'contain',
+        style: __spreadValues(
+          __spreadValues(
+            {
+              position: 'relative',
+            },
+            props.width ? { width: props.width } : {}
+          ),
+          props.height ? { height: props.height } : {}
+        ),
+        source: { uri: props.image },
+      });
 }
 registerComponent(Image, {
   name: 'Image',

package/src/components/render-block.js

@@ -34,9 +34,8 @@ import BuilderContext from '../context/builder.context';
 import { getBlockActions } from '../functions/get-block-actions';
 import { getProcessedBlock } from '../functions/get-processed-block';
 import BlockStyles from './block-styles';
-import RenderBlocks from './render-blocks';
 function RenderBlock(props) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   function component() {
     var _a2, _b2;
     const componentName =
@@ -94,6 +93,13 @@ function RenderBlock(props) {
   function componentOptions() {
     return getBlockComponentOptions(useBlock());
   }
+  function children() {
+    var _a2;
+    return (_a2 = useBlock().children) != null ? _a2 : [];
+  }
+  function noCompRefChildren() {
+    return componentRef() ? [] : children();
+  }
   const builderContext = useContext(BuilderContext);
   const ComponentRefRef = componentRef();
   const TagNameRef = tagName();
@@ -120,23 +126,7 @@ function RenderBlock(props) {
                   __spreadProps(__spreadValues({}, componentOptions()), {
                     builderBlock: useBlock(),
                   }),
-                  useBlock().children
-                    ? /* @__PURE__ */ React.createElement(
-                        React.Fragment,
-                        null,
-                        /* @__PURE__ */ React.createElement(RenderBlocks, {
-                          path: 'children',
-                          blocks: useBlock().children,
-                        })
-                      )
-                    : null
-                )
-              : null,
-            !componentRef() && useBlock().children && useBlock().children.length
-              ? /* @__PURE__ */ React.createElement(
-                  React.Fragment,
-                  null,
-                  (_b = useBlock().children) == null
+                  (_b = children()) == null
                     ? void 0
                     : _b.map((child) =>
                         /* @__PURE__ */ React.createElement(RenderBlock, {
@@ -144,25 +134,30 @@ function RenderBlock(props) {
                         })
                       )
                 )
-              : null
+              : null,
+            (_c = noCompRefChildren()) == null
+              ? void 0
+              : _c.map((child) =>
+                  /* @__PURE__ */ React.createElement(RenderBlock, {
+                    block: child,
+                  })
+                )
           )
         )
       : /* @__PURE__ */ React.createElement(
           ComponentRefRef,
-          __spreadProps(
-            __spreadValues(
-              {},
-              (_c = componentInfo == null ? void 0 : componentInfo()) == null
-                ? void 0
-                : _c.options
-            ),
-            {
-              attributes: propertiesAndActions(),
-              builderBlock: useBlock(),
-              style: css(),
-              children: useBlock().children,
-            }
-          )
+          __spreadProps(__spreadValues({}, componentOptions()), {
+            attributes: propertiesAndActions(),
+            builderBlock: useBlock(),
+            style: css(),
+          }),
+          (_d = children()) == null
+            ? void 0
+            : _d.map((child) =>
+                /* @__PURE__ */ React.createElement(RenderBlock, {
+                  block: child,
+                })
+              )
         )
   );
 }

package/src/components/render-block.lite.tsx

@@ -10,7 +10,6 @@ import BuilderContext from '../context/builder.context.lite';
 import { getBlockActions } from '../functions/get-block-actions';
 import { getProcessedBlock } from '../functions/get-processed-block';
 import BlockStyles from './block-styles.lite';
-import RenderBlocks from './render-blocks.lite';
 
 export default function RenderBlock(props) {
   function component() {
@@ -76,6 +75,18 @@ export default function RenderBlock(props) {
     return getBlockComponentOptions(useBlock());
   }
 
+  function children() {
+    // TO-DO: When should `canHaveChildren` dictate rendering?
+    // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
+    // but still receive and need to render children.
+    // return componentInfo?.()?.canHaveChildren ? useBlock().children : [];
+    return useBlock().children ?? [];
+  }
+
+  function noCompRefChildren() {
+    return componentRef() ? [] : children();
+  }
+
   const builderContext = useContext(BuilderContext);
 
   const ComponentRefRef = componentRef();
@@ -93,36 +104,28 @@ export default function RenderBlock(props) {
                 {...componentOptions()}
                 builderBlock={useBlock()}
               >
-                {useBlock().children ? (
-                  <>
-                    <RenderBlocks
-                      path="children"
-                      blocks={useBlock().children}
-                    />
-                  </>
-                ) : null}
-              </ComponentRefRef>
-            ) : null}
-
-            {!componentRef() &&
-            useBlock().children &&
-            useBlock().children.length ? (
-              <>
-                {useBlock().children?.map((child) => (
+                {children()?.map((child) => (
                   <RenderBlock block={child} />
                 ))}
-              </>
+              </ComponentRefRef>
             ) : null}
+
+            {noCompRefChildren()?.map((child) => (
+              <RenderBlock block={child} />
+            ))}
           </TagNameRef>
         </>
       ) : (
         <ComponentRefRef
-          {...componentInfo?.()?.options}
+          {...componentOptions()}
           attributes={propertiesAndActions()}
           builderBlock={useBlock()}
           style={css()}
-          children={useBlock().children}
-        />
+        >
+          {children()?.map((child) => (
+            <RenderBlock block={child} />
+          ))}
+        </ComponentRefRef>
       )}
     </>
   );

package/src/components/render-content.js

@@ -11,7 +11,7 @@ import { isPreviewing } from '../functions/is-previewing';
 import { previewingModelName } from '../functions/previewing-model-name';
 import { getContent } from '../functions/get-content';
 function RenderContent(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   function useContent() {
     return overrideContent || props.content;
   }
@@ -20,21 +20,27 @@ function RenderContent(props) {
   const [context, setContext] = useState(() => ({}));
   const [overrideContent, setOverrideContent] = useState(() => null);
   function getCssFromFont(font, data) {
+    var _a2, _b2;
     const family =
       font.family +
       (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
     const name = family.split(',')[0];
-    const url = font.fileUrl ? font.fileUrl : font.files && font.files.regular;
+    const url =
+      (_b2 = font.fileUrl) != null
+        ? _b2
+        : (_a2 = font == null ? void 0 : font.files) == null
+        ? void 0
+        : _a2.regular;
     let str = '';
     if (url && family && name) {
       str += `
- @font-face {
-   font-family: "${family}";
-   src: local("${name}"), url('${url}') format('woff2');
-   font-display: fallback;
-   font-weight: 400;
- }
-         `.trim();
+@font-face {
+  font-family: "${family}";
+  src: local("${name}"), url('${url}') format('woff2');
+  font-display: fallback;
+  font-weight: 400;
+}
+        `.trim();
     }
     if (font.files) {
       for (const weight in font.files) {
@@ -45,26 +51,27 @@ function RenderContent(props) {
         const weightUrl = font.files[weight];
         if (weightUrl && weightUrl !== url) {
           str += `
- @font-face {
-   font-family: "${family}";
-   src: url('${weightUrl}') format('woff2');
-   font-display: fallback;
-   font-weight: ${weight};
- }
-           `.trim();
+@font-face {
+  font-family: "${family}";
+  src: url('${weightUrl}') format('woff2');
+  font-display: fallback;
+  font-weight: ${weight};
+}
+          `.trim();
         }
       }
     }
     return str;
   }
   function getFontCss(data) {
+    var _a2, _b2;
     return (
-      ((data == null ? void 0 : data.customFonts) &&
-        data.customFonts.length &&
-        data.customFonts
-          .map((font) => this.getCssFromFont(font, data))
-          .join(' ')) ||
-      ''
+      ((_b2 =
+        (_a2 = data == null ? void 0 : data.customFonts) == null
+          ? void 0
+          : _a2.map((font) => getCssFromFont(font, data))) == null
+        ? void 0
+        : _b2.join(' ')) || ''
     );
   }
   function processMessage(event) {
@@ -165,18 +172,15 @@ function RenderContent(props) {
                 : _b.data) == null
               ? void 0
               : _c.cssCode) ||
-              (((_e =
-                (_d = useContent == null ? void 0 : useContent()) == null
-                  ? void 0
-                  : _d.data) == null
-                ? void 0
-                : _e.customFonts) &&
-                ((_g =
-                  (_f = useContent == null ? void 0 : useContent()) == null
+              ((_f =
+                (_e =
+                  (_d = useContent == null ? void 0 : useContent()) == null
                     ? void 0
-                    : _f.data) == null
+                    : _d.data) == null
                   ? void 0
-                  : _g.customFonts.length))) &&
+                  : _e.customFonts) == null
+                ? void 0
+                : _f.length)) &&
               !isReactNative()
               ? /* @__PURE__ */ React.createElement(
                   View,
@@ -193,15 +197,15 @@ function RenderContent(props) {
                   )
                 )
               : null,
-            (_j =
-              (_i =
-                (_h = useContent == null ? void 0 : useContent()) == null
+            (_i =
+              (_h =
+                (_g = useContent == null ? void 0 : useContent()) == null
                   ? void 0
-                  : _h.data) == null
+                  : _g.data) == null
                 ? void 0
-                : _i.blocks) == null
+                : _h.blocks) == null
               ? void 0
-              : _j.map((block) =>
+              : _i.map((block) =>
                   /* @__PURE__ */ React.createElement(RenderBlock, {
                     key: block.id,
                     block,

package/src/components/render-content.lite.tsx

@@ -32,18 +32,18 @@ export default function RenderContent(props) {
       font.family +
       (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
     const name = family.split(',')[0];
-    const url = font.fileUrl ? font.fileUrl : font.files && font.files.regular;
+    const url = font.fileUrl ?? font?.files?.regular;
     let str = '';
 
     if (url && family && name) {
       str += `
- @font-face {
-   font-family: "${family}";
-   src: local("${name}"), url('${url}') format('woff2');
-   font-display: fallback;
-   font-weight: 400;
- }
-         `.trim();
+@font-face {
+  font-family: "${family}";
+  src: local("${name}"), url('${url}') format('woff2');
+  font-display: fallback;
+  font-weight: 400;
+}
+        `.trim();
     }
 
     if (font.files) {
@@ -58,13 +58,13 @@ export default function RenderContent(props) {
 
         if (weightUrl && weightUrl !== url) {
           str += `
- @font-face {
-   font-family: "${family}";
-   src: url('${weightUrl}') format('woff2');
-   font-display: fallback;
-   font-weight: ${weight};
- }
-           `.trim();
+@font-face {
+  font-family: "${family}";
+  src: url('${weightUrl}') format('woff2');
+  font-display: fallback;
+  font-weight: ${weight};
+}
+          `.trim();
         }
       }
     }
@@ -74,16 +74,12 @@ export default function RenderContent(props) {
 
   function getFontCss(data) {
     // TODO: flag for this
-    // if (!this.builder.allowCustomFonts) {
+    // if (!builder.allowCustomFonts) {
     //   return '';
     // }
     // TODO: separate internal data from external
     return (
-      (data?.customFonts &&
-        data.customFonts.length &&
-        data.customFonts
-          .map((font) => this.getCssFromFont(font, data))
-          .join(' ')) ||
+      data?.customFonts?.map((font) => getCssFromFont(font, data))?.join(' ') ||
       ''
     );
   }
@@ -186,8 +182,7 @@ export default function RenderContent(props) {
             data-builder-content-id={useContent?.()?.id}
           >
             {(useContent?.()?.data?.cssCode ||
-              (useContent?.()?.data?.customFonts &&
-                useContent?.()?.data?.customFonts.length)) &&
+              useContent?.()?.data?.customFonts?.length) &&
             !isReactNative() ? (
               <View>
                 <Text>{useContent().data.cssCode}</Text>

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { evaluate } from './evaluate';
-import { getEventHandlerName } from './name-event-handlers';
+import { getEventHandlerName } from './event-handler-name';
 function getBlockActions(options) {
   const obj = {};
   if (options.block.actions) {

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

@@ -25,12 +25,11 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { findDOMNode } from 'react-dom';
-import { isBrowser } from './is-browser';
-import { isReactNative } from './is-react-native';
+import { isEditing } from './is-editing';
 function getBlockProperties(block) {
   return __spreadProps(__spreadValues({}, block.properties), {
     ref: (ref) => {
-      if (isBrowser() && !isReactNative()) {
+      if (isEditing()) {
         const el = findDOMNode(ref);
         if (el) {
           el.setAttribute('builder-id', block.id);

package/src/functions/get-content.js

@@ -78,16 +78,18 @@ function getContent(options) {
 function getAllContent(options) {
   return __async(this, null, function* () {
     const { model, apiKey } = options;
-    const { limit, testGroups, userAttributes, query } = __spreadValues(
-      {
-        limit: 1,
-        userAttributes: null,
-        testGroups: null,
-      },
-      options
-    );
+    const { limit, testGroups, userAttributes, query, noTraverse } =
+      __spreadValues(
+        {
+          limit: 1,
+          userAttributes: null,
+          testGroups: null,
+          noTraverse: false,
+        },
+        options
+      );
     const url = new URL(
-      `https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}`
+      `https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`
     );
     if (options.options) {
       const flattened = flatten(options.options);

package/src/functions/is-browser.js

@@ -1,10 +1,5 @@
 import * as React from 'react';
-import { isReactNative } from './is-react-native';
 function isBrowser() {
-  return (
-    typeof window !== 'undefined' &&
-    typeof document !== 'undefined' &&
-    !isReactNative()
-  );
+  return typeof window !== 'undefined' && typeof document !== 'undefined';
 }
 export { isBrowser };

package/src/functions/is-react-native.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
 function isReactNative() {
-  return typeof navigator === 'object' && navigator.product === 'ReactNative';
+  return true;
 }
 export { isReactNative };

package/src/functions/track.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { isBrowser } from './is-browser';
 import { isReactNative } from './is-react-native';
 function track(event, properties) {
-  if (!isBrowser() || isReactNative()) {
+  if (!(isBrowser() || isReactNative())) {
     return;
   }
   return fetch(`https://builder.io/api/v1/track`, {

package/src/functions/transform-block.js

@@ -25,12 +25,14 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function transformBlock(block) {
-  if (block.id.startsWith('builder-pixel-')) {
+  if (block.id.startsWith('builder-pixel-') && !block.component) {
     return __spreadProps(__spreadValues({}, block), {
       component: {
         name: 'Image',
         options: {
           image: block.properties.src,
+          width: 1,
+          height: 1,
         },
       },
     });

package/src/index.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import 'react-native-url-polyfill/auto';
 import { isEditing } from './functions/is-editing';
 if (isEditing()) {
   import('./scripts/init-editing');
@@ -6,25 +7,23 @@ if (isEditing()) {
 import { default as default2 } from './blocks/columns';
 import { default as default3 } from './blocks/image';
 import { default as default4 } from './blocks/text';
-import { default as default5 } from './blocks/video';
-import { default as default6 } from './blocks/symbol';
-import { default as default7 } from './blocks/button';
-import { default as default8 } from './blocks/section';
-import { default as default9 } from './blocks/fragment';
-import { default as default10 } from './components/render-content';
+import { default as default5 } from './blocks/symbol';
+import { default as default6 } from './blocks/section';
+import { default as default7 } from './blocks/fragment';
+import { default as default8 } from './components/render-content';
+import { default as default9 } from './blocks/button';
 export * from './functions/is-editing';
 export * from './functions/register-component';
 export * from './functions/register';
 export * from './functions/set-editor-settings';
 export * from './functions/get-content';
 export {
-  default7 as Button,
+  default9 as Button,
   default2 as Columns,
-  default9 as Fragment,
+  default7 as Fragment,
   default3 as Image,
-  default10 as RenderContent,
-  default8 as Section,
-  default6 as Symbol,
+  default8 as RenderContent,
+  default6 as Section,
+  default5 as Symbol,
   default4 as Text,
-  default5 as Video,
 };