@builder.io/sdk-react-native 0.0.1-35 → 0.0.1-39

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

@@ -1,17 +1,17 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext, useEffect } from "react";
-import { isBrowser } from "../functions/is-browser";
-import RenderBlock from "./render-block.lite";
-import BuilderContext from "../context/builder.context.lite";
-import { track } from "../functions/track";
-import { ifTarget } from "../functions/if-target";
-import { onChange } from "../functions/on-change";
-import { isReactNative } from "../functions/is-react-native";
-import { isEditing } from "../functions/is-editing";
-import { isPreviewing } from "../functions/is-previewing";
-import { previewingModelName } from "../functions/previewing-model-name";
-import { getContent } from "../functions/get-content";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import { useState, useContext, useEffect } from 'react';
+import { isBrowser } from '../functions/is-browser';
+import RenderBlock from './render-block.lite';
+import BuilderContext from '../context/builder.context.lite';
+import { track } from '../functions/track';
+import { ifTarget } from '../functions/if-target';
+import { onChange } from '../functions/on-change';
+import { isReactNative } from '../functions/is-react-native';
+import { isEditing } from '../functions/is-editing';
+import { isPreviewing } from '../functions/is-previewing';
+import { previewingModelName } from '../functions/previewing-model-name';
+import { getContent } from '../functions/get-content';
 
 export default function RenderContent(props) {
   function useContent() {
@@ -30,10 +30,10 @@ export default function RenderContent(props) {
     // TODO: compute what font sizes are used and only load those.......
     const family =
       font.family +
-      (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-    const name = family.split(",")[0];
+      (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
+    const name = family.split(',')[0];
     const url = font.fileUrl ? font.fileUrl : font.files && font.files.regular;
-    let str = "";
+    let str = '';
 
     if (url && family && name) {
       str += `
@@ -83,8 +83,8 @@ export default function RenderContent(props) {
         data.customFonts.length &&
         data.customFonts
           .map((font) => this.getCssFromFont(font, data))
-          .join(" ")) ||
-      ""
+          .join(' ')) ||
+      ''
     );
   }
 
@@ -93,7 +93,7 @@ export default function RenderContent(props) {
 
     if (data) {
       switch (data.type) {
-        case "builder.contentUpdate": {
+        case 'builder.contentUpdate': {
           const key =
             data.data.key ||
             data.data.alias ||
@@ -108,7 +108,7 @@ export default function RenderContent(props) {
           break;
         }
 
-        case "builder.patchUpdates": {
+        case 'builder.patchUpdates': {
           // TODO
           break;
         }
@@ -119,11 +119,11 @@ export default function RenderContent(props) {
   useEffect(() => {
     if (isBrowser()) {
       if (isEditing()) {
-        window.addEventListener("message", processMessage);
+        window.addEventListener('message', processMessage);
       }
 
       if (useContent() && !isEditing()) {
-        track("impression", {
+        track('impression', {
           contentId: useContent().id,
         });
       }
@@ -132,13 +132,13 @@ export default function RenderContent(props) {
         if (props.model && previewingModelName() === props.model) {
           const options = {};
           const currentUrl = new URL(location.href);
-          const apiKey = currentUrl.searchParams.get("apiKey");
+          const apiKey = currentUrl.searchParams.get('apiKey');
 
           if (apiKey) {
-            const builderPrefix = "builder.";
+            const builderPrefix = 'builder.';
             currentUrl.searchParams.forEach((value, key) => {
               if (key.startsWith(builderPrefix)) {
-                options[key.replace(builderPrefix, "")] = value;
+                options[key.replace(builderPrefix, '')] = value;
               }
             }); // TODO: need access to API key
 
@@ -178,7 +178,7 @@ export default function RenderContent(props) {
           <View
             onClick={(event) => {
               if (!isEditing()) {
-                track("click", {
+                track('click', {
                   contentId: useContent().id,
                 });
               }

package/src/constants/device-sizes.js

@@ -1,25 +1,25 @@
 import * as React from 'react';
-const sizeNames = ["xsmall", "small", "medium", "large"];
+const sizeNames = ['xsmall', 'small', 'medium', 'large'];
 const sizes = {
   xsmall: {
     min: 0,
     default: 0,
-    max: 0
+    max: 0,
   },
   small: {
     min: 320,
     default: 321,
-    max: 640
+    max: 640,
   },
   medium: {
     min: 641,
     default: 642,
-    max: 991
+    max: 991,
   },
   large: {
     min: 990,
     default: 991,
-    max: 1200
+    max: 1200,
   },
   getWidthForSize(size) {
     return this[size].default;
@@ -31,10 +31,7 @@ const sizes = {
         return size;
       }
     }
-    return "large";
-  }
-};
-export {
-  sizeNames,
-  sizes
+    return 'large';
+  },
 };
+export { sizeNames, sizes };

package/src/context/builder.context.js

@@ -1,5 +1,3 @@
-import { createContext } from "react";
+import { createContext } from 'react';
 var stdin_default = createContext({ content: null, context: {}, state: {} });
-export {
-  stdin_default as default
-};
+export { stdin_default as default };

package/src/functions/evaluate.js

@@ -1,20 +1,29 @@
 import * as React from 'react';
-import { isBrowser } from "./is-browser";
-import { isEditing } from "./is-editing";
+import { isBrowser } from './is-browser';
+import { isEditing } from './is-editing';
 function evaluate(options) {
   const { code } = options;
   const builder = {
     isEditing: isEditing(),
-    isBrowser: isBrowser()
+    isBrowser: isBrowser(),
   };
-  const useReturn = !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
+  const useReturn = !(
+    code.includes(';') ||
+    code.includes(' return ') ||
+    code.trim().startsWith('return ')
+  );
   const useCode = `${useReturn ? `return (${code});` : code}`;
   try {
-    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, options.state, options.context, options.event);
+    return new Function(
+      'builder',
+      'Builder',
+      'state',
+      'context',
+      'event',
+      useCode
+    )(builder, builder, options.state, options.context, options.event);
   } catch (e) {
-    console.warn("Builder custom code error", e);
+    console.warn('Builder custom code error: ', e);
   }
 }
-export {
-  evaluate
-};
+export { evaluate };

package/src/functions/event-handler-name.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}`;
+export { getEventHandlerName };

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

@@ -1,23 +1,23 @@
 import * as React from 'react';
-import { evaluate } from "./evaluate";
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
+import { evaluate } from './evaluate';
+import { getEventHandlerName } from './event-handler-name';
 function getBlockActions(options) {
   const obj = {};
   if (options.block.actions) {
     for (const key in options.block.actions) {
+      if (!options.block.actions.hasOwnProperty(key)) {
+        continue;
+      }
       const value = options.block.actions[key];
-      obj["on" + capitalizeFirstLetter(key)] = (event) => evaluate({
-        code: value,
-        context: options.context,
-        state: options.state,
-        event
-      });
+      obj[getEventHandlerName(key)] = (event) =>
+        evaluate({
+          code: value,
+          context: options.context,
+          state: options.state,
+          event,
+        });
     }
   }
   return obj;
 }
-export {
-  getBlockActions
-};
+export { getBlockActions };

package/src/functions/get-block-component-options.js

@@ -3,22 +3,29 @@ 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 __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 (__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]);
+      if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
     }
   return a;
 };
 function getBlockComponentOptions(block) {
   var _a;
-  return __spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options);
+  return __spreadValues(
+    __spreadValues({}, (_a = block.component) == null ? void 0 : _a.options),
+    block.options
+  );
 }
-export {
-  getBlockComponentOptions
-};
+export { getBlockComponentOptions };

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

@@ -5,39 +5,43 @@ 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 __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 (__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]);
+      if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
     }
   return a;
 };
 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 { findDOMNode } from 'react-dom';
+import { isBrowser } from './is-browser';
+import { isReactNative } from './is-react-native';
 function getBlockProperties(block) {
   return __spreadProps(__spreadValues({}, block.properties), {
     ref: (ref) => {
       if (isBrowser() && !isReactNative()) {
         const el = findDOMNode(ref);
         if (el) {
-          el.setAttribute("builder-id", block.id);
+          el.setAttribute('builder-id', block.id);
           el.classList.add(block.id);
         }
       }
     },
     dataSet: {
-      "builder-id": block.id,
-      class: [block.id, "builder-block", block.class].filter(Boolean).join(" ")
-    }
+      'builder-id': block.id,
+      class: [block.id, 'builder-block', block.class].filter(Boolean).join(' '),
+    },
   });
 }
-export {
-  getBlockProperties
-};
+export { getBlockProperties };

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

@@ -3,42 +3,55 @@ 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 __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 (__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]);
+      if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
     }
   return a;
 };
-const propertiesThatMustBeNumber = new Set(["lineHeight"]);
-const displayValues = new Set(["flex", "none"]);
+const propertiesThatMustBeNumber = new Set(['lineHeight']);
+const displayValues = new Set(['flex', 'none']);
 const SHOW_WARNINGS = false;
 function validateReactNativeStyles(styles) {
   for (const key in styles) {
     const propertyValue = styles[key];
-    if (key === "display" && !displayValues.has(propertyValue)) {
+    if (key === 'display' && !displayValues.has(propertyValue)) {
       if (SHOW_WARNINGS) {
-        console.warn(`Style value for key "display" must be "flex" or "none" but had ${propertyValue}`);
+        console.warn(
+          `Style value for key "display" must be "flex" or "none" but had ${propertyValue}`
+        );
       }
       delete styles[key];
     }
-    if (typeof propertyValue === "string" && propertyValue.match(/^\-?\d/)) {
+    if (typeof propertyValue === 'string' && propertyValue.match(/^\-?\d/)) {
       const newValue = parseFloat(propertyValue);
       if (!isNaN(newValue)) {
         styles[key] = newValue;
       }
-      if (typeof newValue === "number" && newValue < 0) {
+      if (typeof newValue === 'number' && newValue < 0) {
         styles[key] = 0;
       }
     }
-    if (propertiesThatMustBeNumber.has(key) && typeof styles[key] !== "number") {
+    if (
+      propertiesThatMustBeNumber.has(key) &&
+      typeof styles[key] !== 'number'
+    ) {
       if (SHOW_WARNINGS) {
-        console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
+        console.warn(
+          `Style key ${key} must be a number, but had value \`${styles[key]}\``
+        );
       }
       delete styles[key];
     }
@@ -46,7 +59,13 @@ function validateReactNativeStyles(styles) {
 }
 function getBlockStyles(block) {
   var _a, _b, _c;
-  const styles = __spreadValues(__spreadValues({}, (_a = block.responsiveStyles) == null ? void 0 : _a.large), block.styles);
+  const styles = __spreadValues(
+    __spreadValues(
+      {},
+      (_a = block.responsiveStyles) == null ? void 0 : _a.large
+    ),
+    block.styles
+  );
   if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
     Object.assign(styles, block.responsiveStyles.medium);
   }
@@ -56,6 +75,4 @@ function getBlockStyles(block) {
   validateReactNativeStyles(styles);
   return styles;
 }
-export {
-  getBlockStyles
-};
+export { getBlockStyles };

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { View } from "react-native";
+import { View } from 'react-native';
 function getBlockTag(block) {
   return View;
 }
-export {
-  getBlockTag
-};
+export { getBlockTag };

package/src/functions/get-content.js

@@ -5,15 +5,21 @@ 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 __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 (__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]);
+      if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
     }
   return a;
 };
@@ -34,38 +40,55 @@ var __async = (__this, __arguments, generator) => {
         reject(e);
       }
     };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    var step = (x) =>
+      x.done
+        ? resolve(x.value)
+        : Promise.resolve(x.value).then(fulfilled, rejected);
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { getFetch } from "./get-fetch";
+import { getFetch } from './get-fetch';
 const fetch = getFetch();
-function flatten(object, path = null, separator = ".") {
+function flatten(object, path = null, separator = '.') {
   return Object.keys(object).reduce((acc, key) => {
     const value = object[key];
     const newPath = [path, key].filter(Boolean).join(separator);
     const isObject = [
-      typeof value === "object",
+      typeof value === 'object',
       value !== null,
-      !(Array.isArray(value) && value.length === 0)
+      !(Array.isArray(value) && value.length === 0),
     ].every(Boolean);
-    return isObject ? __spreadValues(__spreadValues({}, acc), flatten(value, newPath, separator)) : __spreadProps(__spreadValues({}, acc), { [newPath]: value });
+    return isObject
+      ? __spreadValues(
+          __spreadValues({}, acc),
+          flatten(value, newPath, separator)
+        )
+      : __spreadProps(__spreadValues({}, acc), { [newPath]: value });
   }, {});
 }
 function getContent(options) {
   return __async(this, null, function* () {
-    return (yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }))).results[0] || null;
+    return (
+      (yield getAllContent(
+        __spreadProps(__spreadValues({}, options), { limit: 1 })
+      )).results[0] || null
+    );
   });
 }
 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 url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}`);
+    const { limit, testGroups, userAttributes, query } = __spreadValues(
+      {
+        limit: 1,
+        userAttributes: null,
+        testGroups: null,
+      },
+      options
+    );
+    const url = new URL(
+      `https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}`
+    );
     if (options.options) {
       const flattened = flatten(options.options);
       for (const key in flattened) {
@@ -73,7 +96,7 @@ function getAllContent(options) {
       }
     }
     if (userAttributes) {
-      url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
+      url.searchParams.set('userAttributes', JSON.stringify(userAttributes));
     }
     if (query) {
       const flattened = flatten({ query });
@@ -100,19 +123,21 @@ function getAllContent(options) {
               const testRatio = variation.testRatio;
               n += testRatio;
               if (random < n) {
-                const variationName = variation.name || (variation.id === item.id ? "Default variation" : "");
+                const variationName =
+                  variation.name ||
+                  (variation.id === item.id ? 'Default variation' : '');
                 set = true;
                 Object.assign(item, {
                   data: variation.data,
                   testVariationId: variation.id,
-                  testVariationName: variationName
+                  testVariationName: variationName,
                 });
               }
             }
             if (!set) {
               Object.assign(item, {
                 testVariationId: item.id,
-                testVariationName: "Default"
+                testVariationName: 'Default',
               });
             }
           }
@@ -122,7 +147,4 @@ function getAllContent(options) {
     return content;
   });
 }
-export {
-  getAllContent,
-  getContent
-};
+export { getAllContent, getContent };

package/src/functions/get-content.test.js

@@ -15,33 +15,44 @@ var __async = (__this, __arguments, generator) => {
         reject(e);
       }
     };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    var step = (x) =>
+      x.done
+        ? resolve(x.value)
+        : Promise.resolve(x.value).then(fulfilled, rejected);
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import fetchMock from "jest-fetch-mock";
+import fetchMock from 'jest-fetch-mock';
 fetchMock.enableMocks();
-import { test, beforeEach, expect } from "@jest/globals";
-import { getContent } from "./get-content";
-const testKey = "YJIGb4i01jvw0SRdL5Bt";
-const testModel = "page";
-const testId = "c1b81bab59704599b997574eb0736def";
-beforeEach(() => {
-});
-test.skip("Get content", () => __async(void 0, null, function* () {
-  var _a, _b;
-  expect((_a = yield getContent({
-    apiKey: testKey,
-    model: testModel,
-    query: {
-      id: testId
-    }
-  })) == null ? void 0 : _a.id).toEqual(testId);
-  expect((_b = yield getContent({
-    apiKey: testKey,
-    model: testModel,
-    userAttributes: {
-      urlPath: "/test-page"
-    }
-  })) == null ? void 0 : _b.id).toEqual(testId);
-}));
+import { test, beforeEach, expect } from '@jest/globals';
+import { getContent } from './get-content';
+const testKey = 'YJIGb4i01jvw0SRdL5Bt';
+const testModel = 'page';
+const testId = 'c1b81bab59704599b997574eb0736def';
+beforeEach(() => {});
+test.skip('Get content', () =>
+  __async(void 0, null, function* () {
+    var _a, _b;
+    expect(
+      (_a = yield getContent({
+        apiKey: testKey,
+        model: testModel,
+        query: {
+          id: testId,
+        },
+      })) == null
+        ? void 0
+        : _a.id
+    ).toEqual(testId);
+    expect(
+      (_b = yield getContent({
+        apiKey: testKey,
+        model: testModel,
+        userAttributes: {
+          urlPath: '/test-page',
+        },
+      })) == null
+        ? void 0
+        : _b.id
+    ).toEqual(testId);
+  }));