@builder.io/sdk-react 0.2.3-3 → 0.2.3

package/packages/react/src/components/render-inlined-styles.jsx

@@ -1,31 +0,0 @@
-"use client";
-import * as React from "react";
-import { TARGET } from "../constants/target.js";
-
-function RenderInlinedStyles(props) {
-  function tag() {
-    // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
-    // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
-    return "sty" + "le";
-  }
-
-  function injectedStyleScript() {
-    return `<${tag()}>${props.styles}</${tag()}>`;
-  }
-
-  const TagRef = tag();
-
-  return (
-    <>
-      {TARGET === "svelte" || TARGET === "qwik" ? (
-        <>
-          <TagRef dangerouslySetInnerHTML={{ __html: props.styles }} />
-        </>
-      ) : (
-        <TagRef>{props.styles}</TagRef>
-      )}
-    </>
-  );
-}
-
-export default RenderInlinedStyles;

package/packages/react/src/constants/builder-registered-components.js

@@ -1,54 +0,0 @@
-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 { default as Button } from "../blocks/button/button";
-import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info.js";
-import { default as Columns } from "../blocks/columns/columns";
-import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info.js";
-import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info.js";
-import { default as Fragment } from "../blocks/fragment/fragment";
-import { componentInfo as imageComponentInfo } from "../blocks/image/component-info.js";
-import { default as Image } from "../blocks/image/image";
-import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info.js";
-import { default as Section } from "../blocks/section/section";
-import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info.js";
-import { default as Symbol } from "../blocks/symbol/symbol";
-import { componentInfo as textComponentInfo } from "../blocks/text/component-info.js";
-import { default as Text } from "../blocks/text/text";
-import { componentInfo as videoComponentInfo } from "../blocks/video/component-info.js";
-import { default as Video } from "../blocks/video/video";
-import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info.js";
-import { default as embed } from "../blocks/embed/embed";
-import { default as Img } from "../blocks/img/img";
-import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.js";
-import { default as customCode } from "../blocks/custom-code/custom-code";
-import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
-const getDefaultRegisteredComponents = () => [
-  __spreadValues({ component: Button }, buttonComponentInfo),
-  __spreadValues({ component: Columns }, columnsComponentInfo),
-  __spreadValues({ component: customCode }, customCodeInfo),
-  __spreadValues({ component: embed }, embedComponentInfo),
-  __spreadValues({ component: Fragment }, fragmentComponentInfo),
-  __spreadValues({ component: Image }, imageComponentInfo),
-  __spreadValues({ component: Img }, imgComponentInfo),
-  __spreadValues({ component: Section }, sectionComponentInfo),
-  __spreadValues({ component: Symbol }, symbolComponentInfo),
-  __spreadValues({ component: Text }, textComponentInfo),
-  __spreadValues({ component: Video }, videoComponentInfo)
-];
-export {
-  getDefaultRegisteredComponents
-};

package/packages/react/src/constants/device-sizes.js

@@ -1,48 +0,0 @@
-import { fastClone } from "../functions/fast-clone";
-const SIZES = {
-  small: {
-    min: 320,
-    default: 321,
-    max: 640
-  },
-  medium: {
-    min: 641,
-    default: 642,
-    max: 991
-  },
-  large: {
-    min: 990,
-    default: 991,
-    max: 1200
-  }
-};
-const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-const getSizesForBreakpoints = ({ small, medium }) => {
-  const newSizes = fastClone(SIZES);
-  if (!small || !medium) {
-    return newSizes;
-  }
-  const smallMin = Math.floor(small / 2);
-  newSizes.small = {
-    max: small,
-    min: smallMin,
-    default: smallMin + 1
-  };
-  const mediumMin = newSizes.small.max + 1;
-  newSizes.medium = {
-    max: medium,
-    min: mediumMin,
-    default: mediumMin + 1
-  };
-  const largeMin = newSizes.medium.max + 1;
-  newSizes.large = {
-    max: 2e3,
-    min: largeMin,
-    default: largeMin + 1
-  };
-  return newSizes;
-};
-export {
-  getMaxWidthQueryForSize,
-  getSizesForBreakpoints
-};

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

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

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

@@ -1,15 +0,0 @@
-import { createContext } from "react";
-var stdin_default = createContext({
-  content: null,
-  context: {},
-  state: {},
-  setState() {
-  },
-  apiKey: null,
-  apiVersion: void 0,
-  registeredComponents: {},
-  inheritedStyles: {}
-});
-export {
-  stdin_default as default
-};

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

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

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

@@ -1,29 +0,0 @@
-import { isBrowser } from "./is-browser.js";
-import { isEditing } from "./is-editing.js";
-function evaluate({
-  code,
-  context,
-  state,
-  event,
-  isExpression = true
-}) {
-  if (code === "") {
-    console.warn("Skipping evaluation of empty code block.");
-    return;
-  }
-  const builder = {
-    isEditing: isEditing(),
-    isBrowser: isBrowser(),
-    isServer: !isBrowser()
-  };
-  const useReturn = isExpression && !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
-  const useCode = useReturn ? `return (${code});` : code;
-  try {
-    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
-  } catch (e) {
-    console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e);
-  }
-}
-export {
-  evaluate
-};

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

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

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

@@ -1,22 +0,0 @@
-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/react/src/functions/fast-clone.js

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

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

@@ -1,11 +0,0 @@
-import { evaluate } from "./evaluate.js";
-const createEventHandler = (value, options) => (event) => evaluate({
-  code: value,
-  context: options.context,
-  state: options.state,
-  event,
-  isExpression: false
-});
-export {
-  createEventHandler
-};

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

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

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

@@ -1,28 +0,0 @@
-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/react/src/functions/get-block-properties.js

@@ -1,53 +0,0 @@
-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 { TARGET } from "../constants/target.js";
-import { convertStyleMapToCSSArray } from "../helpers/css.js";
-import { transformBlockProperties } from "./transform-block-properties.js";
-const extractRelevantRootBlockProperties = (block) => {
-  return { href: block.href };
-};
-function getBlockProperties(block) {
-  var _a;
-  const properties = __spreadProps(__spreadValues(__spreadValues({}, extractRelevantRootBlockProperties(block)), block.properties), {
-    "builder-id": block.id,
-    style: getStyleAttribute(block.style),
-    class: [block.id, "builder-block", block.class, (_a = block.properties) == null ? void 0 : _a.class].filter(Boolean).join(" ")
-  });
-  return transformBlockProperties(properties);
-}
-function getStyleAttribute(style) {
-  if (!style) {
-    return void 0;
-  }
-  switch (TARGET) {
-    case "svelte":
-    case "vue2":
-    case "vue3":
-    case "solid":
-      return convertStyleMapToCSSArray(style).join(" ");
-    case "qwik":
-    case "reactNative":
-    case "react":
-      return style;
-  }
-}
-export {
-  getBlockProperties
-};

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

@@ -1,13 +0,0 @@
-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/react/src/functions/get-builder-search-params/index.js

@@ -1,38 +0,0 @@
-import { isBrowser } from "../is-browser.js";
-const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
-const BUILDER_OPTIONS_PREFIX = "options.";
-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, "").replace(BUILDER_OPTIONS_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/react/src/functions/get-content/ab-testing.js

@@ -1,99 +0,0 @@
-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/react/src/functions/get-content/generate-content-url.js

@@ -1,60 +0,0 @@
-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 { flatten } from "../../helpers/flatten.js";
-import {
-  getBuilderSearchParamsFromWindow,
-  normalizeSearchParams
-} from "../get-builder-search-params/index.js";
-import { DEFAULT_API_VERSION } from "../../types/api-version";
-const generateContentUrl = (options) => {
-  const {
-    limit = 30,
-    userAttributes,
-    query,
-    noTraverse = false,
-    model,
-    apiKey,
-    includeRefs = true,
-    locale,
-    apiVersion = DEFAULT_API_VERSION
-  } = options;
-  if (!apiKey) {
-    throw new Error("Missing API key");
-  }
-  if (!["v2", "v3"].includes(apiVersion)) {
-    throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
-  }
-  const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
-  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;
-};
-export {
-  generateContentUrl
-};

package/packages/react/src/functions/get-content/generate-content-url.test.js

@@ -1,82 +0,0 @@
-import { generateContentUrl } from "./generate-content-url";
-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();
-  });
-  test("generate content url with apiVersion as default", () => {
-    const output = generateContentUrl({
-      apiKey: testKey,
-      model: testModel,
-      query: { id: testId },
-      options
-    });
-    expect(output).toMatchSnapshot();
-  });
-  test("generate content url with apiVersion as v2", () => {
-    const output = generateContentUrl({
-      apiKey: testKey,
-      model: testModel,
-      query: { id: testId },
-      options,
-      apiVersion: "v2"
-    });
-    expect(output).toMatchSnapshot();
-  });
-  test("generate content url with apiVersion as v3", () => {
-    const output = generateContentUrl({
-      apiKey: testKey,
-      model: testModel,
-      query: { id: testId },
-      options,
-      apiVersion: "v3"
-    });
-    expect(output).toMatchSnapshot();
-  });
-  test("throw error when trying to generate content url with apiVersion as v1", () => {
-    expect(() => {
-      generateContentUrl({
-        apiKey: testKey,
-        model: testModel,
-        query: { id: testId },
-        options,
-        apiVersion: "v1"
-      });
-    }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'v1'`);
-  });
-  test("throw error when trying to generate content url with an invalid apiVersion value", () => {
-    expect(() => {
-      generateContentUrl({
-        apiKey: testKey,
-        model: testModel,
-        query: { id: testId },
-        options,
-        apiVersion: "INVALID_API_VERSION"
-      });
-    }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'INVALID_API_VERSION'`);
-  });
-});