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

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

@@ -0,0 +1,43 @@
+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));
+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.classList.add(block.id);
+        }
+      }
+    },
+    dataSet: {
+      "builder-id": block.id,
+      class: [block.id, "builder-block", block.class].filter(Boolean).join(" ")
+    }
+  });
+}
+export {
+  getBlockProperties
+};

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

@@ -0,0 +1,61 @@
+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;
+};
+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(__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
+};

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

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

package/src/functions/get-content.js

@@ -0,0 +1,128 @@
+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;
+  });
+}
+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}`);
+    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.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"
+              });
+            }
+          }
+        }
+      }
+    }
+    return content;
+  });
+}
+export {
+  getAllContent,
+  getContent
+};

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

@@ -0,0 +1,47 @@
+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,13 @@
+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,19 @@
+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

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

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { expect, test } from "@jest/globals";
+import { getProcessedBlock } from "./get-processed-block";
+test("Can process bindings", () => {
+  const block = {
+    properties: {
+      foo: "bar"
+    },
+    bindings: {
+      "properties.foo": '"baz"',
+      "responsiveStyles.large.zIndex": "1 + 1",
+      "properties.test": "state.test",
+      "properties.block": `
+        const foo = 'bar';
+        return foo;
+      `,
+      "properties.isEditing": "builder.isEditing"
+    }
+  };
+  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);
+});

package/src/functions/get-target.js

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

package/src/functions/if-target.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+function ifTarget(target, doThing, elseThing) {
+  return doThing();
+}
+export {
+  ifTarget
+};

package/src/functions/is-browser.js

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

package/src/functions/is-editing.js

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

package/src/functions/is-iframe.js

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

package/src/functions/is-previewing.js

@@ -0,0 +1,15 @@
+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

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

package/src/functions/macro-eval.js

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

package/src/functions/on-change.js

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

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

@@ -0,0 +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", () => {
+  let changeHappend = false;
+  const obj = onChange({ foo: "hi" }, () => changeHappend = true);
+  obj.foo = "yo";
+  expect(changeHappend).toBe(true);
+});
+test("onChange can observe a deep change", () => {
+  let changeHappend = false;
+  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", () => {
+  let changeHappend = false;
+  const obj = onChange({ foo: { bar: "hi" } }, () => changeHappend = true);
+  obj.foo.bar;
+  expect(changeHappend).toBe(false);
+});

package/src/functions/previewing-model-name.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { isPreviewing } from "./is-previewing";
+function previewingModelName() {
+  if (!isPreviewing()) {
+    return null;
+  }
+  const url = new URL(location.href);
+  return url.searchParams.get("builder.preview");
+}
+export {
+  previewingModelName
+};

package/src/functions/register-component.js

@@ -0,0 +1,54 @@
+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));
+import { isBrowser } from "./is-browser";
+const components = {};
+function registerComponent(component, info) {
+  var _a;
+  components[info.name] = { component, info };
+  if (isBrowser()) {
+    const sendInfo = prepareComponentInfoToSend(info);
+    (_a = window.parent) == null ? void 0 : _a.postMessage({
+      type: "builder.registerComponent",
+      data: sendInfo
+    }, "*");
+  }
+  return component;
+}
+function prepareComponentInfoToSend(info) {
+  return __spreadValues(__spreadValues({}, info), info.inputs && {
+    inputs: info.inputs.map((input) => {
+      const keysToConvertFnToString = ["onChange", "showIf"];
+      for (const key of keysToConvertFnToString) {
+        if (input[key] && typeof input[key] === "function") {
+          const fn = input[key];
+          input = __spreadProps(__spreadValues({}, input), {
+            [key]: `return (${fn.toString()}).apply(this, arguments)`
+          });
+        }
+      }
+      return input;
+    })
+  });
+}
+export {
+  components,
+  registerComponent
+};

package/src/functions/register.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { isBrowser } from "./is-browser";
+const registry = {};
+function register(type, info) {
+  let typeList = registry[type];
+  if (!typeList) {
+    typeList = registry[type] = [];
+  }
+  typeList.push(info);
+  if (isBrowser()) {
+    const message = {
+      type: "builder.register",
+      data: {
+        type,
+        info
+      }
+    };
+    try {
+      parent.postMessage(message, "*");
+      if (parent !== window) {
+        window.postMessage(message, "*");
+      }
+    } catch (err) {
+      console.debug("Could not postmessage", err);
+    }
+  }
+}
+export {
+  register
+};

package/src/functions/set-editor-settings.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { isBrowser } from "./is-browser";
+const settings = {};
+function setEditorSettings(newSettings) {
+  if (isBrowser()) {
+    Object.assign(settings, newSettings);
+    const message = {
+      type: "builder.settingsChange",
+      data: settings
+    };
+    parent.postMessage(message, "*");
+  }
+}
+export {
+  setEditorSettings
+};

package/src/functions/set.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+const set = (obj, _path, value) => {
+  if (Object(obj) !== obj) {
+    return obj;
+  }
+  const path = Array.isArray(_path) ? _path : _path.toString().match(/[^.[\]]+/g);
+  path.slice(0, -1).reduce((a, c, i) => Object(a[c]) === a[c] ? a[c] : a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}, obj)[path[path.length - 1]] = value;
+  return obj;
+};
+export {
+  set
+};

package/src/functions/set.test.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { expect, test } from "@jest/globals";
+import { set } from "./set";
+test("can shallow set a property", () => {
+  const obj = { foo: "bar" };
+  set(obj, "foo", "baz");
+  expect(obj.foo).toBe("baz");
+});
+test("can deeply set a property", () => {
+  const obj = { foo: "bar" };
+  set(obj, "foo.bar", "baz");
+  expect(obj.foo.bar).toBe("baz");
+});
+test("can deeply create arrays", () => {
+  const obj = { foo: "bar" };
+  set(obj, "foo.bar.0", "hi");
+  expect(obj.foo.bar).toEqual(["hi"]);
+});