@builder.io/sdk-svelte 0.0.1-2 → 0.0.1-22

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";
+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-content/index.js

@@ -37,7 +37,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { getFetch } from "../get-fetch";
+import { getFetch } from "../get-fetch.js";
 const fetch$ = getFetch();
 function flatten(object, path = null, separator = ".") {
   return Object.keys(object).reduce((acc, key) => {

package/src/functions/get-fetch.js

@@ -18,7 +18,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { getGlobalThis } from "./get-global-this";
+import { getGlobalThis } from "./get-global-this.js";
 function getFetch() {
   return __async(this, null, function* () {
     const globalFetch = getGlobalThis().fetch;

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

@@ -17,12 +17,14 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { evaluate } from "./evaluate";
-import { set } from "./set";
-import { transformBlock } from "./transform-block";
-function getProcessedBlock(options) {
-  const { state, context } = options;
-  const block = transformBlock(options.block);
+import { evaluate } from "./evaluate.js";
+import { set } from "./set.js";
+import { transformBlock } from "./transform-block.js";
+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

@@ -1,4 +1,4 @@
-import { getProcessedBlock } from "./get-processed-block";
+import { getProcessedBlock } from "./get-processed-block.js";
 test("Can process bindings", () => {
   var _a, _b, _c, _d, _e, _f;
   const block = {
@@ -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/if-target.js

@@ -1,4 +1,4 @@
-import { TARGET } from "../constants/target";
+import { TARGET } from "../constants/target.js";
 function ifTarget({
   targets,
   doThing,

package/src/functions/is-editing.js

@@ -1,4 +1,4 @@
-import { isIframe } from "./is-iframe";
+import { isIframe } from "./is-iframe.js";
 function isEditing() {
   return isIframe() && window.location.search.indexOf("builder.frameEditing=") !== -1;
 }

package/src/functions/is-iframe.js

@@ -1,4 +1,4 @@
-import { isBrowser } from "./is-browser";
+import { isBrowser } from "./is-browser.js";
 function isIframe() {
   return isBrowser() && window.self !== window.top;
 }

package/src/functions/is-previewing.js

@@ -1,5 +1,5 @@
-import { isBrowser } from "./is-browser";
-import { isEditing } from "./is-editing";
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
 function isPreviewing() {
   if (!isBrowser()) {
     return false;

package/src/functions/on-change.test.js

@@ -1,4 +1,4 @@
-import { onChange } from "./on-change";
+import { onChange } from "./on-change.js";
 test("onChange can observe a shallow change", () => {
   let changeHappend = false;
   const obj = onChange({ foo: "hi" }, () => changeHappend = true);

package/src/functions/previewing-model-name.js

@@ -1,4 +1,4 @@
-import { isPreviewing } from "./is-previewing";
+import { isPreviewing } from "./is-previewing.js";
 function previewingModelName() {
   if (!isPreviewing()) {
     return null;

package/src/functions/register-component.js

@@ -17,37 +17,46 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { isBrowser } from "./is-browser";
-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 serializeFn = (fn) => `return (${fn.toString()}).apply(this, arguments)`;
+const prepareComponentInfoToSend = (info) => {
+  var _a;
+  return __spreadProps(__spreadValues({}, info), {
+    inputs: (_a = info.inputs) == null ? void 0 : _a.map((input) => Object.entries(input).reduce((acc, [key, value]) => __spreadProps(__spreadValues({}, acc), {
+      [key]: typeof value === "function" ? serializeFn(value) : value
+    }), {}))
   });
-}
+};
 export {
   components,
+  createRegisterComponentMessage,
   registerComponent
 };

package/src/functions/register.js

@@ -1,4 +1,4 @@
-import { isBrowser } from "./is-browser";
+import { isBrowser } from "./is-browser.js";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];

package/src/functions/sanitize-styles.js

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

package/src/functions/set-editor-settings.js

@@ -1,4 +1,4 @@
-import { isBrowser } from "./is-browser";
+import { isBrowser } from "./is-browser.js";
 const settings = {};
 function setEditorSettings(newSettings) {
   if (isBrowser()) {

package/src/functions/set.test.js

@@ -1,4 +1,4 @@
-import { set } from "./set";
+import { set } from "./set.js";
 test("can shallow set a property", () => {
   const obj = { foo: "bar" };
   set(obj, "foo", "baz");

package/src/functions/track.js

@@ -1,6 +1,6 @@
-import { TARGET } from "../constants/target";
-import { isBrowser } from "./is-browser";
-import { isEditing } from "./is-editing";
+import { TARGET } from "../constants/target.js";
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
 function track(event, properties) {
   if (isEditing()) {
     return;

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/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/index.js

@@ -1,10 +1,10 @@
-import "./index-helpers/top-of-file";
-import "./scripts/init-editing";
-export * from "./index-helpers/blocks-exports";
-export * from "./functions/is-editing";
-export * from "./functions/is-previewing";
-export * from "./functions/register-component";
-export * from "./functions/register";
-export * from "./functions/set-editor-settings";
-export * from "./functions/get-content";
-export * from "./functions/get-builder-search-params";
+import "./index-helpers/top-of-file.js";
+import "./scripts/init-editing.js";
+export * from "./index-helpers/blocks-exports.js";
+export * from "./functions/is-editing.js";
+export * from "./functions/is-previewing.js";
+export * from "./functions/register-component.js";
+export * from "./functions/register.js";
+export * from "./functions/set-editor-settings.js";
+export * from "./functions/get-content/index.js";
+export * from "./functions/get-builder-search-params/index.js";

package/src/scripts/init-editing.js

@@ -1,7 +1,7 @@
-import { TARGET } from "../constants/target";
-import { isBrowser } from "../functions/is-browser";
-import { isEditing } from "../functions/is-editing";
-import { register } from "../functions/register";
+import { TARGET } from "../constants/target.js";
+import { isBrowser } from "../functions/is-browser.js";
+import { isEditing } from "../functions/is-editing.js";
+import { register } from "../functions/register.js";
 const registerInsertMenu = () => {
   register("insertMenu", {
     name: "_default",

package/src/blocks/button/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component";
-import component from "./button.svelte";
-import { componentInfo } from "./component-info";
-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";
-import component from "./columns.svelte";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-import component from "./embed.svelte";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/form/index.js

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

package/src/blocks/fragment/index.js

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

package/src/blocks/image/index.js

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

package/src/blocks/img/index.js

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

package/src/blocks/input/index.js

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

package/src/blocks/raw-text/index.js

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

package/src/blocks/section/index.js

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

package/src/blocks/select/index.js

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

package/src/blocks/submit-button/index.js

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

package/src/blocks/symbol/index.js

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

package/src/blocks/text/index.js

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

package/src/blocks/textarea/index.js

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

package/src/blocks/video/index.js

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

package/src/components/error-boundary.svelte

@@ -1,26 +0,0 @@
-<script>
-  
-  
-  
-  
-
-
-
-  
-
-  
-  
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
-</script>

package/src/functions/macro-eval.js

@@ -1,5 +0,0 @@
-function macroEval(items, string) {
-}
-export {
-  macroEval
-};