@builder.io/sdk-svelte 0.0.1-20 → 0.0.1-23

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

@@ -1,51 +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

@@ -30,6 +30,8 @@ import { componentInfo as textComponentInfo } from "../blocks/text/component-inf
 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),
@@ -38,7 +40,8 @@ const getDefaultRegisteredComponents = () => [
   __spreadValues({ component: Symbol }, symbolComponentInfo),
   __spreadValues({ component: Button }, buttonComponentInfo),
   __spreadValues({ component: Section }, sectionComponentInfo),
-  __spreadValues({ component: Fragment }, fragmentComponentInfo)
+  __spreadValues({ component: Fragment }, fragmentComponentInfo),
+  __spreadValues({ component: embed }, embedComponentInfo)
 ];
 export {
   getDefaultRegisteredComponents

package/src/context/builder.context.js

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

package/src/functions/convert-style-object.js

@@ -0,0 +1,6 @@
+const convertStyleObject = (obj) => {
+  return obj;
+};
+export {
+  convertStyleObject
+};

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

@@ -15,15 +15,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 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[getMaxWidthQueryForSize("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[getMaxWidthQueryForSize("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-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

@@ -29,7 +29,6 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { fastClone } from "./fast-clone.js";
 const components = [];
 function registerComponent(component, info) {
   components.push(__spreadValues({ component }, info));
@@ -38,31 +37,24 @@ function registerComponent(component, info) {
 }
 const createRegisterComponentMessage = (_a) => {
   var _b = _a, {
-    component
+    component: _
   } = _b, info = __objRest(_b, [
     "component"
   ]);
   return {
     type: "builder.registerComponent",
-    data: prepareComponentInfoToSend(fastClone(info))
+    data: prepareComponentInfoToSend(info)
   };
 };
-function prepareComponentInfoToSend(info) {
-  return __spreadValues(__spreadValues({}, info), info.inputs && {
-    inputs: info.inputs.map((input) => {
-      const keysToConvertFnToString = ["onChange", "showIf"];
-      for (const key of keysToConvertFnToString) {
-        const fn = input[key];
-        if (fn && typeof fn === "function") {
-          input = __spreadProps(__spreadValues({}, input), {
-            [key]: `return (${fn.toString()}).apply(this, arguments)`
-          });
-        }
-      }
-      return input;
-    })
+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,

package/src/functions/sanitize-styles.js

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

package/src/functions/fast-clone.js

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