@builder.io/sdk-react 0.0.1 → 0.0.3

package/packages/_rsc/src/constants/target.js

@@ -0,0 +1,4 @@
+const TARGET = "rsc";
+export {
+  TARGET
+};

package/packages/_rsc/src/context/builder.context.js

@@ -0,0 +1,11 @@
+var stdin_default = {
+  content: null,
+  context: {},
+  state: {},
+  apiKey: null,
+  registeredComponents: {},
+  inheritedStyles: {}
+};
+export {
+  stdin_default as default
+};

package/packages/_rsc/src/functions/camel-to-kebab-case.js

@@ -0,0 +1,4 @@
+const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+export {
+  camelToKebabCase
+};

package/packages/_rsc/src/functions/evaluate.js

@@ -0,0 +1,6 @@
+function evaluate() {
+  return null;
+}
+export {
+  evaluate
+};

package/packages/_rsc/src/functions/event-handler-name.js

@@ -0,0 +1,7 @@
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}`;
+export {
+  getEventHandlerName
+};

package/packages/_rsc/src/functions/extract-text-styles.js

@@ -0,0 +1,22 @@
+const TEXT_STYLE_KEYS = [
+  "color",
+  "whiteSpace",
+  "direction",
+  "hyphens",
+  "overflowWrap"
+];
+const isTextStyle = (key) => {
+  return TEXT_STYLE_KEYS.includes(key) || key.startsWith("font") || key.startsWith("text") || key.startsWith("letter") || key.startsWith("line") || key.startsWith("word") || key.startsWith("writing");
+};
+const extractTextStyles = (styles) => {
+  const textStyles = {};
+  Object.entries(styles).forEach(([key, value]) => {
+    if (isTextStyle(key)) {
+      textStyles[key] = value;
+    }
+  });
+  return textStyles;
+};
+export {
+  extractTextStyles
+};

package/packages/_rsc/src/functions/fast-clone.js

@@ -0,0 +1,4 @@
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+export {
+  fastClone
+};

package/packages/_rsc/src/functions/get-block-actions-handler.js

@@ -0,0 +1,12 @@
+import { evaluate } from "./evaluate.js";
+function crateEventHandler(value, options) {
+  return (event) => evaluate({
+    code: value,
+    context: options.context,
+    state: options.state,
+    event
+  });
+}
+export {
+  crateEventHandler
+};

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

@@ -0,0 +1,18 @@
+import { getEventHandlerName } from "./event-handler-name.js";
+import { crateEventHandler } from "./get-block-actions-handler.js";
+function getBlockActions(options) {
+  var _a;
+  const obj = {};
+  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)] = crateEventHandler(value, options);
+  }
+  return obj;
+}
+export {
+  getBlockActions
+};

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

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

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

@@ -0,0 +1,29 @@
+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 getBlockProperties(block) {
+  var _a;
+  return __spreadProps(__spreadValues({}, block.properties), {
+    "builder-id": block.id,
+    class: [block.id, "builder-block", block.class, (_a = block.properties) == null ? void 0 : _a.class].filter(Boolean).join(" ")
+  });
+}
+export {
+  getBlockProperties
+};

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

@@ -0,0 +1,6 @@
+function getBlockTag(block) {
+  return block.tagName || "div";
+}
+export {
+  getBlockTag
+};

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

@@ -0,0 +1,13 @@
+import { convertSearchParamsToQueryObject, getBuilderSearchParams } 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/packages/_rsc/src/functions/get-builder-search-params/index.js

@@ -0,0 +1,37 @@
+import { isBrowser } from "../is-browser.js";
+const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
+const convertSearchParamsToQueryObject = (searchParams) => {
+  const options = {};
+  searchParams.forEach((value, key) => {
+    options[key] = value;
+  });
+  return options;
+};
+const getBuilderSearchParams = (_options) => {
+  if (!_options) {
+    return {};
+  }
+  const options = normalizeSearchParams(_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;
+};
+const getBuilderSearchParamsFromWindow = () => {
+  if (!isBrowser()) {
+    return {};
+  }
+  const searchParams = new URLSearchParams(window.location.search);
+  return getBuilderSearchParams(searchParams);
+};
+const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
+export {
+  convertSearchParamsToQueryObject,
+  getBuilderSearchParams,
+  getBuilderSearchParamsFromWindow,
+  normalizeSearchParams
+};

package/packages/_rsc/src/functions/get-content/ab-testing.js

@@ -0,0 +1,99 @@
+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 {
+  getContentVariationCookie,
+  setContentVariationCookie
+} from "../../helpers/ab-tests.js";
+import { checkIsDefined } from "../../helpers/nullable.js";
+const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
+const getRandomVariationId = ({
+  id,
+  variations
+}) => {
+  var _a;
+  let n = 0;
+  const random = Math.random();
+  for (const id2 in variations) {
+    const testRatio = (_a = variations[id2]) == null ? void 0 : _a.testRatio;
+    n += testRatio;
+    if (random < n) {
+      return id2;
+    }
+  }
+  return id;
+};
+const getTestFields = ({
+  item,
+  testGroupId
+}) => {
+  const variationValue = item.variations[testGroupId];
+  if (testGroupId === item.id || !variationValue) {
+    return {
+      testVariationId: item.id,
+      testVariationName: "Default"
+    };
+  } else {
+    return {
+      data: variationValue.data,
+      testVariationId: variationValue.id,
+      testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
+    };
+  }
+};
+const getContentVariation = (_0) => __async(void 0, [_0], function* ({
+  item,
+  canTrack
+}) {
+  const testGroupId = yield getContentVariationCookie({
+    canTrack,
+    contentId: item.id
+  });
+  const testFields = testGroupId ? getTestFields({ item, testGroupId }) : void 0;
+  if (testFields) {
+    return testFields;
+  } else {
+    const randomVariationId = getRandomVariationId({
+      variations: item.variations,
+      id: item.id
+    });
+    setContentVariationCookie({
+      contentId: item.id,
+      value: randomVariationId,
+      canTrack
+    }).catch((err) => {
+      console.error("could not store A/B test variation: ", err);
+    });
+    return getTestFields({ item, testGroupId: randomVariationId });
+  }
+});
+const handleABTesting = (_0) => __async(void 0, [_0], function* ({
+  item,
+  canTrack
+}) {
+  if (!checkIsBuilderContentWithVariations(item)) {
+    return;
+  }
+  const variationValue = yield getContentVariation({ item, canTrack });
+  Object.assign(item, variationValue);
+});
+export {
+  handleABTesting
+};

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

@@ -0,0 +1,31 @@
+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/packages/_rsc/src/functions/get-content/index.js

@@ -0,0 +1,100 @@
+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";
+function getContent(options) {
+  return __async(this, null, function* () {
+    return (yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }))).results[0] || null;
+  });
+}
+const generateContentUrl = (options) => {
+  const {
+    limit = 30,
+    userAttributes,
+    query,
+    noTraverse = false,
+    model,
+    apiKey,
+    includeRefs = true
+  } = options;
+  if (!apiKey) {
+    throw new Error("Missing API key");
+  }
+  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}`);
+  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 getFetch();
+    const content = yield fetch(url.href).then((res) => res.json());
+    const canTrack = options.canTrack !== false;
+    if (canTrack) {
+      for (const item of content.results) {
+        yield handleABTesting({ item, canTrack });
+      }
+    }
+    return content;
+  });
+}
+export {
+  generateContentUrl,
+  getAllContent,
+  getContent
+};

package/packages/_rsc/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.default || nodeFetch;
+    }
+    return globalFetch.default || globalFetch;
+  });
+}
+export {
+  getFetch
+};

package/packages/_rsc/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/packages/_rsc/src/functions/get-processed-block.js

@@ -0,0 +1,59 @@
+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 { fastClone } from "./fast-clone.js";
+import { set } from "./set.js";
+import { transformBlock } from "./transform-block.js";
+const evaluateBindings = ({
+  block,
+  context,
+  state
+}) => {
+  if (!block.bindings) {
+    return block;
+  }
+  const copy = fastClone(block);
+  const copied = __spreadProps(__spreadValues({}, copy), {
+    properties: __spreadValues({}, copy.properties),
+    actions: __spreadValues({}, copy.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({
+  block,
+  context,
+  shouldEvaluateBindings,
+  state
+}) {
+  const transformedBlock = transformBlock(block);
+  if (shouldEvaluateBindings) {
+    return evaluateBindings({ block: transformedBlock, state, context });
+  } else {
+    return transformedBlock;
+  }
+}
+export {
+  getProcessedBlock
+};

package/packages/_rsc/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" },
+    shouldEvaluateBindings: 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/packages/_rsc/src/functions/get-react-native-block-styles.js

@@ -0,0 +1,32 @@
+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;
+};
+import { sanitizeReactNativeBlockStyles } from "./sanitize-react-native-block-styles.js";
+function getReactNativeBlockStyles({
+  block,
+  context
+}) {
+  const responsiveStyles = block.responsiveStyles;
+  if (!responsiveStyles) {
+    return {};
+  }
+  const styles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, context.inheritedStyles), responsiveStyles.large || {}), responsiveStyles.medium || {}), responsiveStyles.small || {});
+  const newStyles = sanitizeReactNativeBlockStyles(styles);
+  return newStyles;
+}
+export {
+  getReactNativeBlockStyles
+};

package/packages/_rsc/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/packages/_rsc/src/functions/is-browser.js

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

package/packages/_rsc/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
+};