@builder.io/sdk-react 0.1.1 → 0.1.3

package/packages/react/src/functions/register-component.js

@@ -0,0 +1,68 @@
+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 { serializeFn } from "../blocks/util.js";
+import { fastClone } from "./fast-clone.js";
+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 serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
+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/packages/react/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/packages/react/src/functions/sanitize-react-native-block-styles.js

@@ -0,0 +1,66 @@
+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));
+const propertiesThatMustBeNumber = new Set(["lineHeight"]);
+const displayValues = new Set(["flex", "none"]);
+const SHOW_WARNINGS = false;
+const normalizeNumber = (value) => {
+  if (Number.isNaN(value)) {
+    return void 0;
+  } else if (value < 0) {
+    return 0;
+  } else {
+    return value;
+  }
+};
+const sanitizeReactNativeBlockStyles = (styles) => {
+  return Object.keys(styles).reduce((acc, key) => {
+    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}`);
+      }
+      return acc;
+    }
+    if (propertiesThatMustBeNumber.has(key) && typeof propertyValue !== "number") {
+      if (SHOW_WARNINGS) {
+        console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
+      }
+      return acc;
+    }
+    if (typeof propertyValue === "string") {
+      const isPixelUnit = propertyValue.match(/^-?(\d*)(\.?)(\d*)*px$/);
+      if (isPixelUnit) {
+        const newValue = parseFloat(propertyValue);
+        const normalizedValue = normalizeNumber(newValue);
+        if (normalizedValue) {
+          return __spreadProps(__spreadValues({}, acc), { [key]: normalizedValue });
+        } else {
+          return acc;
+        }
+      } else if (propertyValue === "0") {
+        return __spreadProps(__spreadValues({}, acc), { [key]: 0 });
+      }
+    }
+    return __spreadProps(__spreadValues({}, acc), { [key]: propertyValue });
+  }, {});
+};
+export {
+  sanitizeReactNativeBlockStyles
+};

package/packages/react/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/packages/react/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/packages/react/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/packages/react/src/functions/track/helpers.js

@@ -0,0 +1,50 @@
+import { TARGET } from "../../constants/target";
+import { isBrowser } from "../is-browser";
+const getLocation = () => {
+  if (TARGET === "reactNative") {
+    return null;
+  } else if (isBrowser()) {
+    const parsedLocation = new URL(location.href);
+    if (parsedLocation.pathname === "") {
+      parsedLocation.pathname = "/";
+    }
+    return parsedLocation;
+  } else {
+    console.warn("Cannot get location for tracking in non-browser environment");
+    return null;
+  }
+};
+const getUserAgent = () => typeof navigator === "object" && navigator.userAgent || "";
+const getUserAttributes = () => {
+  const userAgent = getUserAgent();
+  const isMobile = {
+    Android() {
+      return userAgent.match(/Android/i);
+    },
+    BlackBerry() {
+      return userAgent.match(/BlackBerry/i);
+    },
+    iOS() {
+      return userAgent.match(/iPhone|iPod/i);
+    },
+    Opera() {
+      return userAgent.match(/Opera Mini/i);
+    },
+    Windows() {
+      return userAgent.match(/IEMobile/i) || userAgent.match(/WPDesktop/i);
+    },
+    any() {
+      return isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows() || TARGET === "reactNative";
+    }
+  };
+  const isTablet = userAgent.match(/Tablet|iPad/i);
+  const url = getLocation();
+  return {
+    urlPath: url == null ? void 0 : url.pathname,
+    host: (url == null ? void 0 : url.host) || (url == null ? void 0 : url.hostname),
+    device: isTablet ? "tablet" : isMobile.any() ? "mobile" : "desktop"
+  };
+};
+export {
+  getUserAttributes
+};

package/packages/react/src/functions/track/index.js

@@ -0,0 +1,128 @@
+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;
+};
+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 { 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";
+import { getUserAttributes } from "./helpers.js";
+const getTrackingEventData = (_0) => __async(void 0, [_0], function* ({
+  canTrack
+}) {
+  if (!canTrack) {
+    return { visitorId: void 0, sessionId: void 0 };
+  }
+  const sessionId = yield getSessionId({ canTrack });
+  const visitorId = getVisitorId({ canTrack });
+  return {
+    sessionId,
+    visitorId
+  };
+});
+const createEvent = (_a) => __async(void 0, null, function* () {
+  var _b = _a, {
+    type: eventType,
+    canTrack,
+    apiKey,
+    metadata
+  } = _b, properties = __objRest(_b, [
+    "type",
+    "canTrack",
+    "apiKey",
+    "metadata"
+  ]);
+  return {
+    type: eventType,
+    data: __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, properties), {
+      metadata: __spreadValues({
+        url: location.href
+      }, metadata)
+    }), yield getTrackingEventData({ canTrack })), {
+      userAttributes: getUserAttributes(),
+      ownerId: apiKey
+    })
+  };
+});
+function _track(eventProps) {
+  return __async(this, null, function* () {
+    if (!eventProps.apiKey) {
+      console.error("[Builder.io]: Missing API key for track call. Please provide your API key.");
+      return;
+    }
+    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: [yield createEvent(eventProps)]
+      }),
+      headers: {
+        "content-type": "application/json"
+      },
+      mode: "cors"
+    }).catch((err) => {
+      console.error("Failed to track: ", err);
+    });
+  });
+}
+const track = (args) => _track(__spreadProps(__spreadValues({}, args), { canTrack: true }));
+export {
+  _track,
+  track
+};

package/packages/react/src/functions/track/interaction.js

@@ -0,0 +1,53 @@
+function round(num) {
+  return Math.round(num * 1e3) / 1e3;
+}
+const findParentElement = (target, callback, checkElement = true) => {
+  if (!(target instanceof HTMLElement)) {
+    return null;
+  }
+  let parent = checkElement ? target : target.parentElement;
+  do {
+    if (!parent) {
+      return null;
+    }
+    const matches = callback(parent);
+    if (matches) {
+      return parent;
+    }
+  } while (parent = parent.parentElement);
+  return null;
+};
+const findBuilderParent = (target) => findParentElement(target, (el) => {
+  const id = el.getAttribute("builder-id") || el.id;
+  return Boolean((id == null ? void 0 : id.indexOf("builder-")) === 0);
+});
+const computeOffset = ({
+  event,
+  target
+}) => {
+  const targetRect = target.getBoundingClientRect();
+  const xOffset = event.clientX - targetRect.left;
+  const yOffset = event.clientY - targetRect.top;
+  const xRatio = round(xOffset / targetRect.width);
+  const yRatio = round(yOffset / targetRect.height);
+  return {
+    x: xRatio,
+    y: yRatio
+  };
+};
+const getInteractionPropertiesForEvent = (event) => {
+  const target = event.target;
+  const targetBuilderElement = target && findBuilderParent(target);
+  const builderId = (targetBuilderElement == null ? void 0 : targetBuilderElement.getAttribute("builder-id")) || (targetBuilderElement == null ? void 0 : targetBuilderElement.id);
+  return {
+    targetBuilderElement: builderId || void 0,
+    metadata: {
+      targetOffset: target ? computeOffset({ event, target }) : void 0,
+      builderTargetOffset: targetBuilderElement ? computeOffset({ event, target: targetBuilderElement }) : void 0,
+      builderElementIndex: targetBuilderElement && builderId ? [].slice.call(document.getElementsByClassName(builderId)).indexOf(targetBuilderElement) : void 0
+    }
+  };
+};
+export {
+  getInteractionPropertiesForEvent
+};

package/packages/react/src/functions/transform-block-properties.js

@@ -0,0 +1,6 @@
+function transformBlockProperties(properties) {
+  return properties;
+}
+export {
+  transformBlockProperties
+};

package/packages/react/src/functions/transform-block.js

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

package/packages/react/src/helpers/ab-tests.js

@@ -0,0 +1,16 @@
+import { getCookie, setCookie } from "./cookie.js";
+const BUILDER_STORE_PREFIX = "builderio.variations";
+const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
+const getContentVariationCookie = ({
+  contentId,
+  canTrack
+}) => getCookie({ name: getContentTestKey(contentId), canTrack });
+const setContentVariationCookie = ({
+  contentId,
+  canTrack,
+  value
+}) => setCookie({ name: getContentTestKey(contentId), value, canTrack });
+export {
+  getContentVariationCookie,
+  setContentVariationCookie
+};

package/packages/react/src/helpers/cookie.js

@@ -0,0 +1,81 @@
+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 { isBrowser } from "../functions/is-browser.js";
+import { checkIsDefined } from "./nullable.js";
+import { getTopLevelDomain } from "./url.js";
+const getCookie = (_0) => __async(void 0, [_0], function* ({
+  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);
+    return void 0;
+  }
+});
+const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).filter(checkIsDefined).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 = (_0) => __async(void 0, [_0], function* ({
+  name,
+  value,
+  expires,
+  canTrack
+}) {
+  try {
+    if (!canTrack) {
+      return;
+    }
+    const cookie = createCookieString({ name, value, expires });
+    document.cookie = cookie;
+  } catch (err) {
+    console.warn("[COOKIE] SET error: ", err);
+  }
+});
+export {
+  getCookie,
+  setCookie
+};

package/packages/react/src/helpers/css.js

@@ -0,0 +1,34 @@
+import { camelToKebabCase } from "../functions/camel-to-kebab-case.js";
+import { checkIsDefined } from "./nullable.js";
+const convertStyleMapToCSSArray = (style) => {
+  const cssProps = Object.entries(style).map(([key, value]) => {
+    if (typeof value === "string") {
+      return `${camelToKebabCase(key)}: ${value};`;
+    } else {
+      return void 0;
+    }
+  });
+  return cssProps.filter(checkIsDefined);
+};
+const convertStyleMapToCSS = (style) => convertStyleMapToCSSArray(style).join("\n");
+const createCssClass = ({
+  mediaQuery,
+  className,
+  styles
+}) => {
+  const cssClass = `.${className} {
+    ${convertStyleMapToCSS(styles)}
+  }`;
+  if (mediaQuery) {
+    return `${mediaQuery} {
+      ${cssClass}
+    }`;
+  } else {
+    return cssClass;
+  }
+};
+export {
+  convertStyleMapToCSS,
+  convertStyleMapToCSSArray,
+  createCssClass
+};

package/packages/{_rsc/src/blocks/input/input.js → react/src/helpers/flatten.js}

@@ -17,20 +17,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import * as React from "react";
-import { isEditing } from "../../functions/is-editing.js";
-function FormInputComponent(props) {
-  const _context = __spreadValues({}, props["_context"]);
-  return /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props.attributes), {
-    key: isEditing() && props.defaultValue ? props.defaultValue : "default-key",
-    placeholder: props.placeholder,
-    type: props.type,
-    name: props.name,
-    value: props.value,
-    defaultValue: props.defaultValue,
-    required: props.required
-  }));
+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 });
+  }, {});
 }
 export {
-  FormInputComponent as default
+  flatten
 };

package/packages/react/src/helpers/localStorage.js

@@ -0,0 +1,35 @@
+import { isBrowser } from "../functions/is-browser.js";
+const getLocalStorage = () => isBrowser() && typeof localStorage !== "undefined" ? localStorage : void 0;
+const getLocalStorageItem = ({
+  key,
+  canTrack
+}) => {
+  var _a;
+  try {
+    if (canTrack) {
+      return (_a = getLocalStorage()) == null ? void 0 : _a.getItem(key);
+    }
+    return void 0;
+  } catch (err) {
+    console.debug("[LocalStorage] GET error: ", err);
+    return void 0;
+  }
+};
+const setLocalStorageItem = ({
+  key,
+  canTrack,
+  value
+}) => {
+  var _a;
+  try {
+    if (canTrack) {
+      (_a = getLocalStorage()) == null ? void 0 : _a.setItem(key, value);
+    }
+  } catch (err) {
+    console.debug("[LocalStorage] SET error: ", err);
+  }
+};
+export {
+  getLocalStorageItem,
+  setLocalStorageItem
+};

package/packages/react/src/helpers/nullable.js

@@ -0,0 +1,4 @@
+const checkIsDefined = (maybeT) => maybeT !== null && maybeT !== void 0;
+export {
+  checkIsDefined
+};