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

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

@@ -5,35 +5,42 @@ 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 { isEditing } from './is-editing';
 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 (isEditing()) {
+        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-builder-search-params/fn.test.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { describe, test, expect } from '@jest/globals';
+import { getBuilderSearchParams, convertSearchParamsToQueryObject } from '.';
+const querystring =
+  'someotherValue=jklsjfdal&abc=klfdjklgfds&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=037948e52eaf4743afed464f02c70da4&builder.overrides.037948e52eaf4743afed464f02c70da4=037948e52eaf4743afed464f02c70da4&builder.overrides.page%3A%2F=037948e52eaf4743afed464f02c70da4&preview_theme_id=128854393017';
+const url = new URL(`localhost:3000/about-us?${querystring}`);
+describe('Get Builder SearchParams', () => {
+  test('correctly converts URLSearchParams to object', () => {
+    const output = convertSearchParamsToQueryObject(url.searchParams);
+    expect(output).toMatchSnapshot();
+  });
+  test('correctly extracts all builder params from a query object', () => {
+    const output = getBuilderSearchParams(
+      convertSearchParamsToQueryObject(url.searchParams)
+    );
+    expect(output).toMatchSnapshot();
+  });
+});

package/src/functions/get-builder-search-params/index.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
+const convertSearchParamsToQueryObject = (searchParams) => {
+  const options = {};
+  searchParams.forEach((value, key) => {
+    options[key] = value;
+  });
+  return options;
+};
+const getBuilderSearchParams = (options) => {
+  const newOptions = {};
+  Object.keys(options).forEach((key) => {
+    if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
+      const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '');
+      newOptions[trimmedKey] = options[key];
+    }
+  });
+  return newOptions;
+};
+export { convertSearchParamsToQueryObject, getBuilderSearchParams };

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { describe, test, expect } from '@jest/globals';
+import { generateContentUrl } from '.';
+const testKey = 'YJIGb4i01jvw0SRdL5Bt';
+const testModel = 'page';
+const testId = 'c1b81bab59704599b997574eb0736def';
+const options = {
+  cachebust: 'true',
+  noCache: 'true',
+  'overrides.037948e52eaf4743afed464f02c70da4':
+    '037948e52eaf4743afed464f02c70da4',
+  'overrides.page': '037948e52eaf4743afed464f02c70da4',
+  'overrides.page:/': '037948e52eaf4743afed464f02c70da4',
+  preview: 'page',
+};
+describe('Generate Content URL', () => {
+  test('generates the proper value for a simple query', () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel,
+      query: { id: testId },
+    });
+    expect(output).toMatchSnapshot();
+  });
+  test('Handles overrides correctly', () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel,
+      query: { id: testId },
+      options,
+    });
+    expect(output).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,156 @@
+import * as React from 'react';
+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));
+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 { 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
+    );
+  });
+}
+const generateContentUrl = (options) => {
+  const {
+    limit = 1,
+    userAttributes,
+    query,
+    noTraverse = false,
+    model,
+    apiKey,
+  } = options;
+  const url = new URL(
+    `https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`
+  );
+  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]));
+    }
+  }
+  return url;
+};
+const handleABTesting = (content, testGroups) => {
+  for (const item of content.results) {
+    if (item.variations && Object.keys(item.variations).length) {
+      const testGroup = testGroups[item.id];
+      const variationValue = item.variations[testGroup];
+      if (testGroup && variationValue) {
+        item.data = variationValue.data;
+        item.testVariationId = variationValue.id;
+        item.testVariationName = variationValue.name;
+      } else {
+        let n = 0;
+        const random = Math.random();
+        let set = false;
+        for (const id in item.variations) {
+          const variation = item.variations[id];
+          const testRatio = variation.testRatio;
+          n += testRatio;
+          if (random < n) {
+            const variationName =
+              variation.name ||
+              (variation.id === item.id ? 'Default variation' : '');
+            set = true;
+            Object.assign(item, {
+              data: variation.data,
+              testVariationId: variation.id,
+              testVariationName: variationName,
+            });
+          }
+        }
+        if (!set) {
+          Object.assign(item, {
+            testVariationId: item.id,
+            testVariationName: 'Default',
+          });
+        }
+      }
+    }
+  }
+};
+function getAllContent(options) {
+  return __async(this, null, function* () {
+    const url = generateContentUrl(options);
+    const content = yield fetch(url.href).then((res) => res.json());
+    if (options.testGroups) {
+      handleABTesting(content, options.testGroups);
+    }
+    return content;
+  });
+}
+export { generateContentUrl, getAllContent, getContent };

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,43 @@
 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', () => {
+  var _a, _b, _c, _d, _e, _f;
   const block = {
+    '@type': '@builder.io/sdk:Element',
     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.isEditing).toEqual(false);
-  expect(processed.responsiveStyles.large.zIndex).toEqual(2);
+  expect((_a = processed.properties) == null ? void 0 : _a.foo).toEqual('baz');
+  expect((_b = processed.properties) == null ? void 0 : _b.test).toEqual(
+    'hello'
+  );
+  expect((_c = processed.properties) == null ? void 0 : _c.block).toEqual(
+    'bar'
+  );
+  expect((_d = processed.properties) == null ? void 0 : _d.isEditing).toEqual(
+    false
+  );
+  expect(
+    (_f = (_e = processed.responsiveStyles) == null ? void 0 : _e.large) == null
+      ? void 0
+      : _f.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,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
-};
+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 true;
 }
-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 };