@builder.io/sdk-react-native 0.0.1-4 → 0.0.1-40

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

@@ -5,35 +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 { 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) => {
-      const el = findDOMNode(ref);
-      if (el) {
-        el.setAttribute("builder-id", block.id);
-        el.classList.add(block.id);
+      if (isBrowser() && !isReactNative()) {
+        const el = findDOMNode(ref);
+        if (el) {
+          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,29 +3,76 @@ 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 SHOW_WARNINGS = false;
+function validateReactNativeStyles(styles) {
+  for (const key in styles) {
+    const propertyValue = styles[key];
+    if (key === 'display' && !displayValues.has(propertyValue)) {
+      if (SHOW_WARNINGS) {
+        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/)) {
+      const newValue = parseFloat(propertyValue);
+      if (!isNaN(newValue)) {
+        styles[key] = newValue;
+      }
+      if (typeof newValue === 'number' && newValue < 0) {
+        styles[key] = 0;
+      }
+    }
+    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]}\``
+        );
+      }
+      delete styles[key];
+    }
+  }
+}
 function getBlockStyles(block) {
   var _a, _b, _c;
-  const styles = __spreadValues({}, (_a = block.responsiveStyles) == null ? void 0 : _a.large);
+  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);
   }
   if ((_c = block.responsiveStyles) == null ? void 0 : _c.small) {
     Object.assign(styles, block.responsiveStyles.small);
   }
+  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,31 +40,73 @@ 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 { isBrowser } from "./is-browser";
-import { isReactNative } from "./is-react-native";
-if (!(isBrowser() || isReactNative())) {
-  import("node-fetch");
+import { getFetch } from './get-fetch';
+const fetch = getFetch();
+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',
+      value !== null,
+      !(Array.isArray(value) && value.length === 0),
+    ].every(Boolean);
+    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 } = __spreadValues({
-      limit: 1,
-      userAttributes: null,
-      testGroups: null
-    }, options);
-    const content = yield fetch(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&userAttributes=${JSON.stringify(userAttributes)}`).then((res) => res.json());
+    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) {
+        url.searchParams.set(key, String(flattened[key]));
+      }
+    }
+    if (userAttributes) {
+      url.searchParams.set('userAttributes', JSON.stringify(userAttributes));
+    }
+    if (query) {
+      const flattened = flatten({ query });
+      for (const key in flattened) {
+        url.searchParams.set(key, JSON.stringify(flattened[key]));
+      }
+    }
+    const content = yield fetch(url.href).then((res) => res.json());
     if (testGroups) {
-      for (const item of content) {
+      for (const item of content.results) {
         if (item.variations && Object.keys(item.variations).length) {
           const testGroup = testGroups[item.id];
           const variationValue = item.variations[testGroup];
@@ -75,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',
               });
             }
           }
@@ -97,7 +147,4 @@ function getAllContent(options) {
     return content;
   });
 }
-export {
-  getAllContent,
-  getContent
-};
+export { getAllContent, getContent };

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

@@ -0,0 +1,58 @@
+import * as React from 'react';
+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 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);
+  }));

package/src/functions/get-fetch.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { getGlobalThis } from './get-global-this';
+function getFetch() {
+  let fetch = getGlobalThis().fetch;
+  if (typeof fetch === 'undefined' && typeof global !== 'undefined') {
+    const _require = eval('require');
+    fetch = _require('node-fetch');
+  }
+  return fetch;
+}
+export { getFetch };

package/src/functions/get-global-this.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+function getGlobalThis() {
+  if (typeof globalThis !== 'undefined') {
+    return globalThis;
+  }
+  if (typeof window !== 'undefined') {
+    return window;
+  }
+  if (typeof global !== 'undefined') {
+    return global;
+  }
+  if (typeof self !== 'undefined') {
+    return self;
+  }
+  return null;
+}
+export { getGlobalThis };

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

@@ -5,41 +5,47 @@ 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 { evaluate } from "./evaluate";
-import { set } from "./set";
+import { evaluate } from './evaluate';
+import { set } from './set';
+import { transformBlock } from './transform-block';
 function getProcessedBlock(options) {
-  const { block, state, context } = options;
+  const { state, context } = options;
+  const block = transformBlock(options.block);
   if (!block.bindings) {
     return block;
   }
   const copied = __spreadProps(__spreadValues({}, block), {
     properties: __spreadValues({}, block.properties),
-    actions: __spreadValues({}, block.actions)
+    actions: __spreadValues({}, block.actions),
   });
   for (const binding in block.bindings) {
     const expression = block.bindings[binding];
     const value = evaluate({
       code: expression,
       state,
-      context
+      context,
     });
     set(copied, binding, value);
   }
   return copied;
 }
-export {
-  getProcessedBlock
-};
+export { getProcessedBlock };

package/src/functions/get-processed-block.test.js

@@ -1,27 +1,31 @@
 import * as React from 'react';
-import { expect, test } from "@jest/globals";
-import { getProcessedBlock } from "./get-processed-block";
-test("Can process bindings", () => {
+import { expect, test } from '@jest/globals';
+import { getProcessedBlock } from './get-processed-block';
+test('Can process bindings', () => {
   const block = {
     properties: {
-      foo: "bar"
+      foo: 'bar',
     },
     bindings: {
-      "properties.foo": '"baz"',
-      "responsiveStyles.large.zIndex": "1 + 1",
-      "properties.test": "state.test",
-      "properties.block": `
+      'properties.foo': '"baz"',
+      'responsiveStyles.large.zIndex': '1 + 1',
+      'properties.test': 'state.test',
+      'properties.block': `
         const foo = 'bar';
         return foo;
       `,
-      "properties.isEditing": "builder.isEditing"
-    }
+      'properties.isEditing': 'builder.isEditing',
+    },
   };
-  const processed = getProcessedBlock({ block, context: {}, state: { test: "hello" } });
+  const processed = getProcessedBlock({
+    block,
+    context: {},
+    state: { test: 'hello' },
+  });
   expect(processed).not.toEqual(block);
-  expect(processed.properties.foo).toEqual("baz");
-  expect(processed.properties.test).toEqual("hello");
-  expect(processed.properties.block).toEqual("bar");
+  expect(processed.properties.foo).toEqual('baz');
+  expect(processed.properties.test).toEqual('hello');
+  expect(processed.properties.block).toEqual('bar');
   expect(processed.properties.isEditing).toEqual(false);
   expect(processed.responsiveStyles.large.zIndex).toEqual(2);
 });

package/src/functions/get-target.js

@@ -1,7 +1,5 @@
 import * as React from 'react';
-function getTarget() {
-  return "reactNative";
+function getTarget(_) {
+  return 'reactNative';
 }
-export {
-  getTarget
-};
+export { getTarget };

package/src/functions/if-target.js

@@ -2,6 +2,4 @@ import * as React from 'react';
 function ifTarget(target, doThing, elseThing) {
   return doThing();
 }
-export {
-  ifTarget
-};
+export { ifTarget };

package/src/functions/is-browser.js

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

package/src/functions/is-editing.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { isIframe } from "./is-iframe";
+import { isIframe } from './is-iframe';
 function isEditing() {
-  return isIframe() && window.location.search.indexOf("builder.frameEditing=") !== -1;
+  return (
+    isIframe() && window.location.search.indexOf('builder.frameEditing=') !== -1
+  );
 }
-export {
-  isEditing
-};
+export { isEditing };

package/src/functions/is-iframe.js

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { isBrowser } from "./is-browser";
+import { isBrowser } from './is-browser';
 function isIframe() {
   return isBrowser() && window.self !== window.top;
 }
-export {
-  isIframe
-};
+export { isIframe };

package/src/functions/is-previewing.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { isBrowser } from './is-browser';
+import { isEditing } from './is-editing';
+function isPreviewing() {
+  if (!isBrowser()) {
+    return false;
+  }
+  if (isEditing()) {
+    return false;
+  }
+  return Boolean(location.search.indexOf('builder.preview=') !== -1);
+}
+export { isPreviewing };

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

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

package/src/functions/macro-eval.js

@@ -1,6 +1,3 @@
 import * as React from 'react';
-function macroEval(items, string) {
-}
-export {
-  macroEval
-};
+function macroEval(items, string) {}
+export { macroEval };

package/src/functions/on-change.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-const onChangeProxySymbol = Symbol("onChangeProxySymbol");
+const onChangeProxySymbol = Symbol('onChangeProxySymbol');
 function onChange(obj, cb) {
   return new Proxy(obj, {
     get(target, key) {
@@ -7,7 +7,7 @@ function onChange(obj, cb) {
         return true;
       }
       const value = Reflect.get(target, key);
-      if (value && typeof value === "object") {
+      if (value && typeof value === 'object') {
         if (value[onChangeProxySymbol]) {
           return value;
         }
@@ -19,10 +19,7 @@ function onChange(obj, cb) {
       const returnValue = Reflect.set(target, key, value);
       cb();
       return returnValue;
-    }
+    },
   });
 }
-export {
-  onChange,
-  onChangeProxySymbol
-};
+export { onChange, onChangeProxySymbol };

package/src/functions/on-change.test.js

@@ -1,21 +1,21 @@
 import * as React from 'react';
-import { expect, test } from "@jest/globals";
-import { onChange } from "./on-change";
-test("onChange can observe a shallow change", () => {
+import { expect, test } from '@jest/globals';
+import { onChange } from './on-change';
+test('onChange can observe a shallow change', () => {
   let changeHappend = false;
-  const obj = onChange({ foo: "hi" }, () => changeHappend = true);
-  obj.foo = "yo";
+  const obj = onChange({ foo: 'hi' }, () => (changeHappend = true));
+  obj.foo = 'yo';
   expect(changeHappend).toBe(true);
 });
-test("onChange can observe a deep change", () => {
+test('onChange can observe a deep change', () => {
   let changeHappend = false;
-  const obj = onChange({ foo: { bar: "hi" } }, () => changeHappend = true);
-  obj.foo.bar = "yo";
+  const obj = onChange({ foo: { bar: 'hi' } }, () => (changeHappend = true));
+  obj.foo.bar = 'yo';
   expect(changeHappend).toBe(true);
 });
-test("Smoke test: callback is not fired if no properties updated", () => {
+test('Smoke test: callback is not fired if no properties updated', () => {
   let changeHappend = false;
-  const obj = onChange({ foo: { bar: "hi" } }, () => changeHappend = true);
+  const obj = onChange({ foo: { bar: 'hi' } }, () => (changeHappend = true));
   obj.foo.bar;
   expect(changeHappend).toBe(false);
 });