@builder.io/sdk-react 0.0.1-0

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

@@ -0,0 +1,96 @@
+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 { flatten } from "../../helpers/flatten.js";
+import {
+  getBuilderSearchParamsFromWindow,
+  normalizeSearchParams
+} from "../get-builder-search-params/index.js";
+import { getFetch } from "../get-fetch.js";
+import { handleABTesting } from "./ab-testing.js";
+const fetch$ = getFetch();
+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}`);
+  const queryOptions = __spreadValues(__spreadValues({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
+  const flattened = flatten(queryOptions);
+  for (const key in flattened) {
+    url.searchParams.set(key, String(flattened[key]));
+  }
+  if (userAttributes) {
+    url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
+  }
+  if (query) {
+    const flattened2 = flatten({ query });
+    for (const key in flattened2) {
+      url.searchParams.set(key, JSON.stringify(flattened2[key]));
+    }
+  }
+  return url;
+};
+function getAllContent(options) {
+  return __async(this, null, function* () {
+    const url = generateContentUrl(options);
+    const fetch = yield fetch$;
+    const content = yield fetch(url.href).then((res) => res.json());
+    if (options.testGroups) {
+      for (const item of content.results) {
+        handleABTesting(item, options.testGroups);
+      }
+    }
+    return content;
+  });
+}
+export {
+  generateContentUrl,
+  getAllContent,
+  getContent
+};

package/src/functions/get-fetch.js

@@ -0,0 +1,34 @@
+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 { getGlobalThis } from "./get-global-this.js";
+function getFetch() {
+  return __async(this, null, function* () {
+    const globalFetch = getGlobalThis().fetch;
+    if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
+      const nodeFetch = import("node-fetch").then((d) => d.default);
+      return nodeFetch;
+    }
+    return globalFetch;
+  });
+}
+export {
+  getFetch
+};

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

@@ -0,0 +1,18 @@
+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,53 @@
+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.js";
+import { set } from "./set.js";
+import { transformBlock } from "./transform-block.js";
+const evaluateBindings = ({
+  block,
+  context,
+  state
+}) => {
+  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;
+};
+function getProcessedBlock(options) {
+  const { state, context } = options;
+  const block = transformBlock(options.block);
+  if (evaluateBindings) {
+    return evaluateBindings({ block, state, context });
+  } else {
+    return block;
+  }
+}
+export {
+  getProcessedBlock
+};

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

@@ -0,0 +1,32 @@
+import { getProcessedBlock } from "./get-processed-block.js";
+test("Can process bindings", () => {
+  var _a, _b, _c, _d, _e, _f;
+  const block = {
+    "@type": "@builder.io/sdk:Element",
+    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" },
+    evaluateBindings: true
+  });
+  expect(processed).not.toEqual(block);
+  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/if-target.js

@@ -0,0 +1,15 @@
+import { TARGET } from "../constants/target.js";
+function ifTarget({
+  targets,
+  doThing,
+  elseThing
+}) {
+  if (TARGET && targets.includes(TARGET)) {
+    return doThing();
+  } else {
+    return elseThing == null ? void 0 : elseThing();
+  }
+}
+export {
+  ifTarget
+};

package/src/functions/is-browser.js

@@ -0,0 +1,6 @@
+function isBrowser() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+export {
+  isBrowser
+};

package/src/functions/is-editing.js

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

package/src/functions/is-iframe.js

@@ -0,0 +1,7 @@
+import { isBrowser } from "./is-browser.js";
+function isIframe() {
+  return isBrowser() && window.self !== window.top;
+}
+export {
+  isIframe
+};

package/src/functions/is-previewing.js

@@ -0,0 +1,14 @@
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
+function isPreviewing() {
+  if (!isBrowser()) {
+    return false;
+  }
+  if (isEditing()) {
+    return false;
+  }
+  return Boolean(location.search.indexOf("builder.preview=") !== -1);
+}
+export {
+  isPreviewing
+};

package/src/functions/on-change.js

@@ -0,0 +1,27 @@
+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,19 @@
+import { onChange } from "./on-change.js";
+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/register-component.js

@@ -0,0 +1,72 @@
+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 __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const components = [];
+function registerComponent(component, info) {
+  components.push(__spreadValues({ component }, info));
+  console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
+  return component;
+}
+const createRegisterComponentMessage = (_a) => {
+  var _b = _a, {
+    component: _
+  } = _b, info = __objRest(_b, [
+    "component"
+  ]);
+  return {
+    type: "builder.registerComponent",
+    data: prepareComponentInfoToSend(info)
+  };
+};
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+const serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
+const serializeFn = (fnValue) => {
+  const fnStr = fnValue.toString().trim();
+  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
+  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
+};
+const prepareComponentInfoToSend = (_c) => {
+  var _d = _c, {
+    inputs
+  } = _d, info = __objRest(_d, [
+    "inputs"
+  ]);
+  return __spreadProps(__spreadValues({}, fastClone(info)), {
+    inputs: inputs == null ? void 0 : inputs.map((input) => Object.entries(input).reduce((acc, [key, value]) => __spreadProps(__spreadValues({}, acc), {
+      [key]: serializeValue(value)
+    }), {}))
+  });
+};
+export {
+  components,
+  createRegisterComponentMessage,
+  registerComponent
+};

package/src/functions/register.js

@@ -0,0 +1,29 @@
+import { isBrowser } from "./is-browser.js";
+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/sanitize-styles.js

@@ -0,0 +1,5 @@
+const sanitizeBlockStyles = (_styles) => {
+};
+export {
+  sanitizeBlockStyles
+};

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

@@ -0,0 +1,15 @@
+import { isBrowser } from "./is-browser.js";
+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,11 @@
+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,16 @@
+import { set } from "./set.js";
+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"]);
+});

package/src/functions/track.js

@@ -0,0 +1,91 @@
+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 __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { TARGET } from "../constants/target.js";
+import { getSessionId } from "../helpers/sessionId.js";
+import { getVisitorId } from "../helpers/visitorId.js";
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
+const getTrackingEventData = ({ canTrack }) => {
+  if (!canTrack) {
+    return { visitorId: void 0, sessionId: void 0 };
+  }
+  const sessionId = getSessionId({ canTrack });
+  const visitorId = getVisitorId({ canTrack });
+  return {
+    sessionId,
+    visitorId
+  };
+};
+const createEvent = (_a) => {
+  var _b = _a, {
+    type: eventType,
+    canTrack,
+    orgId,
+    contentId
+  } = _b, properties = __objRest(_b, [
+    "type",
+    "canTrack",
+    "orgId",
+    "contentId"
+  ]);
+  return {
+    type: eventType,
+    data: __spreadProps(__spreadValues(__spreadValues({}, properties), getTrackingEventData({ canTrack })), {
+      ownerId: orgId,
+      contentId
+    })
+  };
+};
+function track(eventProps) {
+  if (!eventProps.canTrack) {
+    return;
+  }
+  if (isEditing()) {
+    return;
+  }
+  if (!(isBrowser() || TARGET === "reactNative")) {
+    return;
+  }
+  return fetch(`https://builder.io/api/v1/track`, {
+    method: "POST",
+    body: JSON.stringify({
+      events: [createEvent(eventProps)]
+    }),
+    headers: {
+      "content-type": "application/json"
+    },
+    mode: "cors"
+  });
+}
+export {
+  track
+};

package/src/functions/transform-block.js

@@ -0,0 +1,6 @@
+function transformBlock(block) {
+  return block;
+}
+export {
+  transformBlock
+};

package/src/helpers/cookie.js

@@ -0,0 +1,59 @@
+import { isBrowser } from "../functions/is-browser";
+import { getTopLevelDomain } from "./url";
+const getCookie = ({
+  name,
+  canTrack
+}) => {
+  var _a;
+  try {
+    if (!canTrack) {
+      return void 0;
+    }
+    return (_a = document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))) == null ? void 0 : _a.split("=")[1];
+  } catch (err) {
+    console.debug("[COOKIE] GET error: ", err);
+  }
+};
+const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).join("; ");
+const SECURE_CONFIG = [
+  ["secure", ""],
+  ["SameSite", "None"]
+];
+const createCookieString = ({
+  name,
+  value,
+  expires
+}) => {
+  const secure = isBrowser() ? location.protocol === "https:" : true;
+  const secureObj = secure ? SECURE_CONFIG : [[]];
+  const expiresObj = expires ? [["expires", expires.toUTCString()]] : [[]];
+  const cookieValue = [
+    [name, value],
+    ...expiresObj,
+    ["path", "/"],
+    ["domain", getTopLevelDomain(window.location.hostname)],
+    ...secureObj
+  ];
+  const cookie = stringifyCookie(cookieValue);
+  return cookie;
+};
+const setCookie = ({
+  name,
+  value,
+  expires,
+  canTrack
+}) => {
+  try {
+    if (!canTrack) {
+      return void 0;
+    }
+    const cookie = createCookieString({ name, value, expires });
+    document.cookie = cookie;
+  } catch (err) {
+    console.warn("[COOKIE] SET error: ", err);
+  }
+};
+export {
+  getCookie,
+  setCookie
+};

package/src/helpers/css.js

@@ -0,0 +1,12 @@
+import { camelToKebabCase } from "../functions/camel-to-kebab-case";
+const convertStyleMaptoCSS = (style) => {
+  const cssProps = Object.entries(style).map(([key, value]) => {
+    if (typeof value === "string") {
+      return `${camelToKebabCase(key)}: ${value};`;
+    }
+  });
+  return cssProps.join("\n");
+};
+export {
+  convertStyleMaptoCSS
+};