@builder.io/sdk-svelte 0.0.1-3 → 0.0.1-30

package/src/components/render-inlined-styles.svelte

@@ -1,49 +1,21 @@
 <script>
-    
-    
-    
-    
-  import  {  TARGET  }  from '../constants/target.js';
+  import { TARGET } from "../constants/target.js";
 
-  
+  export let styles;
 
-    
-
-    
-    export let styles;
-    
-    
-    $: injectedStyleScript = () => {
-return `<${tagName()}>${styles}</${tagName()}>`;
-};
-
-$: tagName = () => {
-// 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';
-};
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  
-{#if TARGET === 'svelte' }
-
-    
-{@html injectedStyleScript()}
-
-  
+  $: injectedStyleScript = () => {
+    return `<${tagName()}>${styles}</${tagName()}>`;
+  };
 
+  $: tagName = () => {
+    // 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";
+  };
+</script>
 
+{#if TARGET === "svelte"}
+  {@html injectedStyleScript()}
 {:else}
-<svelte:component  this={tagName()} >{styles}</svelte:component>
-
-{/if}
+  <svelte:component this={tagName()}>{styles}</svelte:component>
+{/if}

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

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

@@ -1,6 +1,12 @@
 const key = Symbol();
 var stdin_default = {
-  Builder: { content: null, context: {}, state: {}, apiKey: null },
+  Builder: {
+    content: null,
+    context: {},
+    state: {},
+    apiKey: null,
+    registeredComponents: {}
+  },
   key
 };
 export {

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,6 @@
+const convertStyleObject = (obj) => {
+  return obj;
+};
+export {
+  convertStyleObject
+};

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,16 +14,19 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { sizes } from "../constants/device-sizes.js";
+import { getMaxWidthQueryForSize } from "../constants/device-sizes.js";
+import { convertStyleObject } from "./convert-style-object.js";
+import { sanitizeBlockStyles } from "./sanitize-styles.js";
 function getBlockStyles(block) {
   var _a, _b, _c, _d, _e;
-  const styles = __spreadValues(__spreadValues({}, (_a = block.responsiveStyles) == null ? void 0 : _a.large), block.styles);
+  const styles = __spreadValues(__spreadValues({}, convertStyleObject((_a = block.responsiveStyles) == null ? void 0 : _a.large)), block.styles);
   if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
-    styles[`@media (max-width: ${sizes.medium})`] = (_c = block.responsiveStyles) == null ? void 0 : _c.medium;
+    styles[getMaxWidthQueryForSize("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})`] = (_e = block.responsiveStyles) == null ? void 0 : _e.small;
+    styles[getMaxWidthQueryForSize("small")] = convertStyleObject((_e = block.responsiveStyles) == null ? void 0 : _e.small);
   }
+  sanitizeBlockStyles(styles);
   return styles;
 }
 export {

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

@@ -1,3 +1,4 @@
+import { isBrowser } from "../is-browser";
 const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
 const convertSearchParamsToQueryObject = (searchParams) => {
   const options = {};
@@ -16,7 +17,17 @@ const getBuilderSearchParams = (options) => {
   });
   return newOptions;
 };
+const getBuilderSearchParamsFromWindow = () => {
+  if (!isBrowser()) {
+    return {};
+  }
+  const searchParams = new URLSearchParams(window.location.search);
+  return getBuilderSearchParams(convertSearchParamsToQueryObject(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,38 @@
+const handleABTesting = (item, testGroups) => {
+  if (item.variations && Object.keys(item.variations).length) {
+    const testGroup = item.id ? testGroups[item.id] : void 0;
+    const variationValue = testGroup ? item.variations[testGroup] : void 0;
+    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"
+        });
+      }
+    }
+  }
+};
+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,14 @@ 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";
+import { handleABTesting } from "./ab-testing.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 });
-  }, {});
-}
 function getContent(options) {
   return __async(this, null, function* () {
     return (yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }))).results[0] || null;
@@ -66,67 +60,31 @@ 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 content = yield fetch(url.href).then((res) => res.json());
     if (options.testGroups) {
-      handleABTesting(content, options.testGroups);
+      for (const item of content.results) {
+        handleABTesting(item, options.testGroups);
+      }
     }
     return content;
   });

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

@@ -20,9 +20,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { evaluate } from "./evaluate.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;
   }
@@ -32,14 +34,19 @@ function getProcessedBlock(options) {
   });
   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(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

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

package/src/functions/register-component.js

@@ -17,37 +17,56 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { isBrowser } from "./is-browser.js";
-const components = {};
+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) {
-  var _a;
-  components[info.name] = { component, info };
-  if (isBrowser()) {
-    const sendInfo = prepareComponentInfoToSend(info);
-    (_a = window.parent) == null ? void 0 : _a.postMessage({
-      type: "builder.registerComponent",
-      data: sendInfo
-    }, "*");
-  }
+  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;
 }
-function prepareComponentInfoToSend(info) {
-  return __spreadValues(__spreadValues({}, info), info.inputs && {
-    inputs: info.inputs.map((input) => {
-      const keysToConvertFnToString = ["onChange", "showIf"];
-      for (const key of keysToConvertFnToString) {
-        if (input[key] && typeof input[key] === "function") {
-          const fn = input[key];
-          input = __spreadProps(__spreadValues({}, input), {
-            [key]: `return (${fn.toString()}).apply(this, arguments)`
-          });
-        }
-      }
-      return input;
-    })
+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/sanitize-styles.js

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

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
+};

package/src/helpers/flatten.js

@@ -0,0 +1,34 @@
+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 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 {
+  flatten
+};

package/src/index-helpers/blocks-exports.js

@@ -1,17 +1,19 @@
-import { default as default2 } from "../blocks/columns";
-import { default as default3 } from "../blocks/image";
-import { default as default4 } from "../blocks/text";
-import { default as default5 } from "../blocks/video";
-import { default as default6 } from "../blocks/symbol";
-import { default as default7 } from "../blocks/button";
-import { default as default8 } from "../blocks/section";
-import { default as default9 } from "../blocks/fragment";
+import { default as default2 } from "../blocks/columns/columns.svelte";
+import { default as default3 } from "../blocks/image/image.svelte";
+import { default as default4 } from "../blocks/text/text.svelte";
+import { default as default5 } from "../blocks/video/video.svelte";
+import { default as default6 } from "../blocks/symbol/symbol.svelte";
+import { default as default7 } from "../blocks/button/button.svelte";
+import { default as default8 } from "../blocks/section/section.svelte";
+import { default as default9 } from "../blocks/fragment/fragment.svelte";
 import { default as default10 } from "../components/render-content/render-content.svelte";
+import { default as default11 } from "../components/render-blocks.svelte";
 export {
   default7 as Button,
   default2 as Columns,
   default9 as Fragment,
   default3 as Image,
+  default11 as RenderBlocks,
   default10 as RenderContent,
   default8 as Section,
   default6 as Symbol,

package/src/blocks/button/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import component from "./button.svelte";
-import { componentInfo } from "./component-info.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/columns/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import component from "./columns.svelte";
-import { componentInfo } from "./component-info.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/custom-code/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./custom-code.svelte";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/embed/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./embed.svelte";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};