@builder.io/sdk-react-native 0.0.1-5 → 0.0.1-50

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

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

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

@@ -1,7 +1,23 @@
 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;
+};
 function getBlockComponentOptions(block) {
   var _a;
-  return (_a = block.component) == null ? void 0 : _a.options;
+  return __spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options);
 }
 export {
   getBlockComponentOptions

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

@@ -19,13 +19,16 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 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: {

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

@@ -15,15 +15,45 @@ var __spreadValues = (a, b) => {
     }
   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 {

package/src/functions/get-builder-search-params/fn.test.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+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,23 @@
+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,32 @@
+import * as React from 'react';
+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,138 @@
+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,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

@@ -20,8 +20,10 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 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;
   }

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-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"
     },
@@ -17,11 +18,15 @@ test("Can process bindings", () => {
       "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,5 +1,5 @@
 import * as React from 'react';
-function getTarget() {
+function getTarget(_) {
   return "reactNative";
 }
 export {

package/src/functions/is-browser.js

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

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

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

@@ -1,5 +1,4 @@
 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;

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

@@ -30,6 +30,7 @@ function registerComponent(component, info) {
       data: sendInfo
     }, "*");
   }
+  return component;
 }
 function prepareComponentInfoToSend(info) {
   return __spreadValues(__spreadValues({}, info), info.inputs && {

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.test.js

@@ -1,5 +1,4 @@
 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" };

package/src/functions/track.js

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

package/src/functions/transform-block.js

@@ -0,0 +1,38 @@
+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));
+function transformBlock(block) {
+  if (block.id.startsWith("builder-pixel-") && !block.component) {
+    return __spreadProps(__spreadValues({}, block), {
+      component: {
+        name: "Image",
+        options: {
+          image: block.properties.src,
+          width: 1,
+          height: 1
+        }
+      }
+    });
+  }
+  return block;
+}
+export {
+  transformBlock
+};

package/src/index-helpers/blocks-exports.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+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/symbol";
+import { default as default6 } from "../blocks/button";
+import { default as default7 } from "../blocks/section";
+import { default as default8 } from "../blocks/fragment";
+import { default as default9 } from "../components/render-content";
+export {
+  default6 as Button,
+  default2 as Columns,
+  default8 as Fragment,
+  default3 as Image,
+  default9 as RenderContent,
+  default7 as Section,
+  default5 as Symbol,
+  default4 as Text
+};

package/src/index-helpers/top-of-file.js

@@ -0,0 +1,2 @@
+import * as React from 'react';
+import "react-native-url-polyfill/auto";

package/src/index.js

@@ -1,24 +1,14 @@
 import * as React from 'react';
+import("./index-helpers/top-of-file");
 import { isEditing } from "./functions/is-editing";
 if (isEditing()) {
   import("./scripts/init-editing");
 }
-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 "./components/render-content";
+export * from "./index-helpers/blocks-exports";
+export * from "./functions/is-editing";
+export * from "./functions/is-previewing";
 export * from "./functions/register-component";
-export {
-  default7 as Button,
-  default2 as Columns,
-  default3 as Image,
-  default9 as RenderContent,
-  default8 as Section,
-  default6 as Symbol,
-  default4 as Text,
-  default5 as Video
-};
+export * from "./functions/register";
+export * from "./functions/set-editor-settings";
+export * from "./functions/get-content";
+export * from "./functions/get-builder-search-params";