@builder.io/sdk-solid 0.0.16 → 0.0.17

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

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

package/src/constants/device-sizes.js

@@ -1,10 +1,4 @@
-const sizeNames = ["xsmall", "small", "medium", "large"];
-const sizes = {
-  xsmall: {
-    min: 0,
-    default: 0,
-    max: 0
-  },
+const SIZES = {
   small: {
     min: 320,
     default: 321,
@@ -19,21 +13,9 @@ const sizes = {
     min: 990,
     default: 991,
     max: 1200
-  },
-  getWidthForSize(size) {
-    return this[size].default;
-  },
-  getSizeForWidth(width) {
-    for (const size of sizeNames) {
-      const value = this[size];
-      if (width <= value.max) {
-        return size;
-      }
-    }
-    return "large";
   }
 };
+const getMaxWidthQueryForSize = (size) => `@media (max-width: ${SIZES[size].max}px)`;
 export {
-  sizeNames,
-  sizes
+  getMaxWidthQueryForSize
 };

package/src/context/builder.context.js

@@ -3,7 +3,9 @@ var stdin_default = createContext({
   content: null,
   context: {},
   state: {},
-  apiKey: null
+  apiKey: null,
+  registeredComponents: {},
+  inheritedStyles: {}
 });
 export {
   stdin_default as default

package/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/src/functions/convert-style-object.js

@@ -0,0 +1,14 @@
+const camelCaseToDashCase = (str = "") => str.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+const convertStyleObject = (obj) => {
+  if (!obj) {
+    return obj;
+  }
+  const newObj = {};
+  for (const key in obj) {
+    newObj[camelCaseToDashCase(key)] = obj[key];
+  }
+  return newObj;
+};
+export {
+  convertStyleObject
+};

package/src/functions/evaluate.js

@@ -20,7 +20,7 @@ function evaluate({
   try {
     return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
   } catch (e) {
-    console.warn("Builder custom code error: ", e);
+    console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e.message || e);
   }
 }
 export {

package/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/src/functions/fast-clone.js

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

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

@@ -1,5 +1,5 @@
-import { evaluate } from "./evaluate.js";
 import { getEventHandlerName } from "./event-handler-name.js";
+import { crateEventHandler } from "./get-block-actions-handler.js";
 function getBlockActions(options) {
   var _a;
   const obj = {};
@@ -9,12 +9,7 @@ function getBlockActions(options) {
       continue;
     }
     const value = optionActions[key];
-    obj[getEventHandlerName(key)] = (event) => evaluate({
-      code: value,
-      context: options.context,
-      state: options.state,
-      event
-    });
+    obj[getEventHandlerName(key)] = crateEventHandler(value, options);
   }
   return obj;
 }

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

@@ -1,4 +1,6 @@
 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;
@@ -14,9 +16,12 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function getBlockComponentOptions(block) {
   var _a;
-  return __spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options);
+  return __spreadProps(__spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
+    builderBlock: block
+  });
 }
 export {
   getBlockComponentOptions

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

@@ -14,28 +14,36 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { sizes } from "../constants/device-sizes";
-const camelCaseToDashCase = (str = "") => str.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
-const convertStyleObject = (obj) => {
-  if (!obj) {
-    return obj;
-  }
-  const newObj = {};
-  for (const key in obj) {
-    newObj[camelCaseToDashCase(key)] = obj[key];
+import { getMaxWidthQueryForSize } from "../constants/device-sizes.js";
+import { TARGET } from "../constants/target.js";
+import { convertStyleObject } from "./convert-style-object.js";
+import { sanitizeBlockStyles } from "./sanitize-styles.js";
+const getStyleForTarget = ({
+  styles,
+  context
+}) => {
+  switch (TARGET) {
+    case "reactNative": {
+      return __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, context.inheritedStyles), styles.large ? convertStyleObject(styles.large) : {}), styles.medium ? convertStyleObject(styles.medium) : {}), styles.small ? convertStyleObject(styles.small) : {});
+    }
+    default:
+      return __spreadValues(__spreadValues(__spreadValues({}, styles.large ? convertStyleObject(styles.large) : {}), styles.medium ? {
+        [getMaxWidthQueryForSize("medium")]: convertStyleObject(styles.medium)
+      } : {}), styles.small ? {
+        [getMaxWidthQueryForSize("small")]: convertStyleObject(styles.small)
+      } : {});
   }
-  return newObj;
 };
-function getBlockStyles(block) {
-  var _a, _b, _c, _d, _e;
-  const styles = __spreadValues({}, convertStyleObject((_a = block.responsiveStyles) == null ? void 0 : _a.large));
-  if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
-    styles[`@media (max-width: ${sizes.medium})`] = convertStyleObject((_c = block.responsiveStyles) == null ? void 0 : _c.medium);
-  }
-  if ((_d = block.responsiveStyles) == null ? void 0 : _d.small) {
-    styles[`@media (max-width: ${sizes.small})`] = convertStyleObject((_e = block.responsiveStyles) == null ? void 0 : _e.small);
+function getBlockStyles({
+  block,
+  context
+}) {
+  if (!block.responsiveStyles) {
+    return {};
   }
-  return styles;
+  const styles = getStyleForTarget({ styles: block.responsiveStyles, context });
+  const newStyles = sanitizeBlockStyles(styles);
+  return newStyles;
 }
 export {
   getBlockStyles

package/src/functions/get-builder-search-params/index.js

@@ -1,3 +1,4 @@
+import { isBrowser } from "../is-browser.js";
 const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
 const convertSearchParamsToQueryObject = (searchParams) => {
   const options = {};
@@ -6,7 +7,11 @@ const convertSearchParamsToQueryObject = (searchParams) => {
   });
   return options;
 };
-const getBuilderSearchParams = (options) => {
+const getBuilderSearchParams = (_options) => {
+  if (!_options) {
+    return {};
+  }
+  const options = normalizeSearchParams(_options);
   const newOptions = {};
   Object.keys(options).forEach((key) => {
     if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
@@ -16,7 +21,17 @@ const getBuilderSearchParams = (options) => {
   });
   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
+  getBuilderSearchParams,
+  getBuilderSearchParamsFromWindow,
+  normalizeSearchParams
 };

package/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/src/functions/get-content/fn.test.js

@@ -1,4 +1,4 @@
-import { generateContentUrl } from ".js";
+import { generateContentUrl } from ".";
 const testKey = "YJIGb4i01jvw0SRdL5Bt";
 const testModel = "page";
 const testId = "c1b81bab59704599b997574eb0736def";

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

@@ -37,20 +37,13 @@ var __async = (__this, __arguments, generator) => {
     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";
-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 });
-  }, {});
-}
+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;
@@ -58,7 +51,7 @@ function getContent(options) {
 }
 const generateContentUrl = (options) => {
   const {
-    limit = 1,
+    limit = 30,
     userAttributes,
     query,
     noTraverse = false,
@@ -66,67 +59,32 @@ const generateContentUrl = (options) => {
     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]));
-    }
+  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 flattened = flatten({ query });
-    for (const key in flattened) {
-      url.searchParams.set(key, JSON.stringify(flattened[key]));
+    const flattened2 = flatten({ query });
+    for (const key in flattened2) {
+      url.searchParams.set(key, JSON.stringify(flattened2[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 fetch = yield fetch$;
+    const fetch = yield getFetch();
     const content = yield fetch(url.href).then((res) => res.json());
-    if (options.testGroups) {
-      handleABTesting(content, options.testGroups);
+    const canTrack = options.canTrack !== false;
+    if (canTrack) {
+      for (const item of content.results) {
+        yield handleABTesting({ item, canTrack });
+      }
     }
     return content;
   });

package/src/functions/get-fetch.js

@@ -24,9 +24,9 @@ function getFetch() {
     const globalFetch = getGlobalThis().fetch;
     if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
       const nodeFetch = import("node-fetch").then((d) => d.default);
-      return nodeFetch;
+      return nodeFetch.default || nodeFetch;
     }
-    return globalFetch;
+    return globalFetch.default || globalFetch;
   });
 }
 export {

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

@@ -18,28 +18,41 @@ var __spreadValues = (a, b) => {
 };
 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";
-function getProcessedBlock(options) {
-  const { state, context } = options;
-  const block = transformBlock(options.block);
+const evaluateBindings = ({
+  block,
+  context,
+  state
+}) => {
   if (!block.bindings) {
     return block;
   }
-  const copied = __spreadProps(__spreadValues({}, block), {
-    properties: __spreadValues({}, block.properties),
-    actions: __spreadValues({}, block.actions)
+  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
-    });
+    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/src/functions/get-processed-block.test.js

@@ -20,7 +20,8 @@ test("Can process bindings", () => {
   const processed = getProcessedBlock({
     block,
     context: {},
-    state: { test: "hello" }
+    state: { test: "hello" },
+    shouldEvaluateBindings: true
   });
   expect(processed).not.toEqual(block);
   expect((_a = processed.properties) == null ? void 0 : _a.foo).toEqual("baz");

package/src/functions/mark-mutable.js

@@ -0,0 +1,10 @@
+function markMutable(value) {
+  return value;
+}
+function markPropsMutable(props) {
+  return props;
+}
+export {
+  markMutable,
+  markPropsMutable
+};