@builder.io/sdk-svelte 0.0.1-19 → 0.0.1-21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.1-19",
+  "version": "0.0.1-21",
   "type": "module",
   "files": [
     "src"

package/src/blocks/button/button.svelte

@@ -1,50 +1,19 @@
 <script>
-    
-    
-    
-    
-  
-  
-  
-
-    
-
-    
-    export let attributes;
-export let text;
-export let link;
-export let openLinkInNewTab;
-    
-    
-    
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  
-    
-
-{#if link }
-
-      
-<a {...attributes} role="button"  href={link}  target={openLinkInNewTab ? '_blank' : undefined} >
-        
-{text}
-
-      </a>
-
-    
-
-
+  export let attributes;
+  export let text;
+  export let link;
+  export let openLinkInNewTab;
+</script>
+
+{#if link}
+  <a
+    {...attributes}
+    role="button"
+    href={link}
+    target={openLinkInNewTab ? "_blank" : undefined}
+  >
+    {text}
+  </a>
 {:else}
-<span {...attributes}>{text}</span>
-
-{/if}
+  <span {...attributes}>{text}</span>
+{/if}

package/src/blocks/columns/columns.svelte

@@ -1,103 +1,111 @@
 <script>
-    
-    
-    
-    
-  import RenderBlocks from '../../components/render-blocks.svelte';
-  
-  
-
-    
-
-    
-    export let space;
-export let columns;
-export let stackColumnsAt;
-export let reverseColumnsWhenStacked;
-    
-    function getGutterSize() {
-return typeof space === 'number' ? space || 0 : 20;
-}
-
-function getColumns() {
-return columns || [];
-}
-
-function getWidth(index) {
-const columns = getColumns();
-return columns[index]?.width || 100 / columns.length;
-}
-
-function getColumnCssWidth(index) {
-const columns = getColumns();
-const gutterSize = getGutterSize();
-const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
-return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
-}
-
-function maybeApplyForTablet(prop) {
-const _stackColumnsAt = stackColumnsAt || 'tablet';
-
-return _stackColumnsAt === 'tablet' ? prop : 'inherit';
-}
-    $: columnsCssVars = () => {
-const flexDir = stackColumnsAt === 'never' ? 'inherit' : reverseColumnsWhenStacked ? 'column-reverse' : 'column';
-return {
-  '--flex-dir': flexDir,
-  '--flex-dir-tablet': maybeApplyForTablet(flexDir)
-};
-};
-
-$: columnCssVars = () => {
-const width = '100%';
-const marginLeft = '0';
-return {
-  '--column-width': width,
-  '--column-margin-left': marginLeft,
-  '--column-width-tablet': maybeApplyForTablet(width),
-  '--column-margin-left-tablet': maybeApplyForTablet(marginLeft)
-};
-};
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  <div  class="builder-columns div"  style={columnsCssVars()} >
-    
-
-{#each columns as column, index }
-<div  class="builder-column div-2"  style={{
-width: getColumnCssWidth(index),
-marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
-...columnCssVars()
-}}  key={index} >
-          
-<RenderBlocks  blocks={column.blocks} ></RenderBlocks>
-
-        </div>
-{/each}
-
-
-  </div>
-
-  <style>
-    .div { 
-display: flex;
-align-items: stretch;
-line-height: normal; }@media (max-width: 999px) { .div { 
-flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div { 
-flex-direction: var(--flex-dir); } }.div-2 { 
-flex-grow: 1; }@media (max-width: 999px) { .div-2 { 
-width: var(--column-width-tablet) !important;
-margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-2 { 
-width: var(--column-width) !important;
-margin-left: var(--column-margin-left) !important; } }
-  </style>
+  import RenderBlocks from "../../components/render-blocks.svelte";
+
+  export let space;
+  export let columns;
+  export let stackColumnsAt;
+  export let reverseColumnsWhenStacked;
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+      node.style[p] = v;
+    });
+  }
+
+  const getGutterSize = function getGutterSize() {
+    return typeof space === "number" ? space || 0 : 20;
+  };
+
+  const getColumns = function getColumns() {
+    return columns || [];
+  };
+
+  const getWidth = function getWidth(index) {
+    const columns = getColumns();
+    return columns[index]?.width || 100 / columns.length;
+  };
+
+  const getColumnCssWidth = function getColumnCssWidth(index) {
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
+    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+  };
+
+  const maybeApplyForTablet = function maybeApplyForTablet(prop) {
+    const _stackColumnsAt = stackColumnsAt || "tablet";
+
+    return _stackColumnsAt === "tablet" ? prop : "inherit";
+  };
+  $: columnsCssVars = () => {
+    const flexDir =
+      stackColumnsAt === "never"
+        ? "inherit"
+        : reverseColumnsWhenStacked
+        ? "column-reverse"
+        : "column";
+    return {
+      "--flex-dir": flexDir,
+      "--flex-dir-tablet": maybeApplyForTablet(flexDir),
+    };
+  };
+
+  $: columnCssVars = () => {
+    const width = "100%";
+    const marginLeft = "0";
+    return {
+      "--column-width": width,
+      "--column-margin-left": marginLeft,
+      "--column-width-tablet": maybeApplyForTablet(width),
+      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
+    };
+  };
+</script>
+
+<div use:mitosis_styling={columnsCssVars()} class="builder-columns div">
+  {#each columns as column, index (index)}
+    <div
+      use:mitosis_styling={{
+        width: getColumnCssWidth(index),
+        marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
+        ...columnCssVars(),
+      }}
+      class="builder-column div-2"
+    >
+      <RenderBlocks blocks={column.blocks} />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .div {
+    display: flex;
+    align-items: stretch;
+    line-height: normal;
+  }
+  @media (max-width: 999px) {
+    .div {
+      flex-direction: var(--flex-dir-tablet);
+    }
+  }
+  @media (max-width: 639px) {
+    .div {
+      flex-direction: var(--flex-dir);
+    }
+  }
+  .div-2 {
+    flex-grow: 1;
+  }
+  @media (max-width: 999px) {
+    .div-2 {
+      width: var(--column-width-tablet) !important;
+      margin-left: var(--column-margin-left-tablet) !important;
+    }
+  }
+  @media (max-width: 639px) {
+    .div-2 {
+      width: var(--column-width) !important;
+      margin-left: var(--column-margin-left) !important;
+    }
+  }
+</style>

package/src/blocks/custom-code/custom-code.svelte

@@ -1,64 +1,62 @@
 <script>
-    import { onMount } from 'svelte'
-    
-    
-    
-  
-  
-  
-
-    
-
-    
-    export let elem;
-export let replaceNodes;
-export let code;
-    
-    function findAndRunScripts() {
-// TODO: Move this function to standalone one in '@builder.io/utils'
-if (elem && typeof window !== 'undefined') {
-  const scripts = elem.getElementsByTagName('script');
-
-  for (let i = 0; i < scripts.length; i++) {
-    const script = scripts[i];
-
-    if (script.src) {
-      if (scriptsInserted.includes(script.src)) {
-        continue;
-      }
-
-      scriptsInserted.push(script.src);
-      const newScript = document.createElement('script');
-      newScript.async = true;
-      newScript.src = script.src;
-      document.head.appendChild(newScript);
-    } else if (!script.type || ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(script.type)) {
-      if (scriptsRun.includes(script.innerText)) {
-        continue;
-      }
-
-      try {
-        scriptsRun.push(script.innerText);
-        new Function(script.innerText)();
-      } catch (error) {
-        console.warn('`CustomCode`: Error running script:', error);
+  import { onMount } from "svelte";
+
+  export let elem;
+  export let replaceNodes;
+  export let code;
+
+  const findAndRunScripts = function findAndRunScripts() {
+    // TODO: Move this function to standalone one in '@builder.io/utils'
+    if (elem && typeof window !== "undefined") {
+      const scripts = elem.getElementsByTagName("script");
+
+      for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
+
+        if (script.src) {
+          if (scriptsInserted.includes(script.src)) {
+            continue;
+          }
+
+          scriptsInserted.push(script.src);
+          const newScript = document.createElement("script");
+          newScript.async = true;
+          newScript.src = script.src;
+          document.head.appendChild(newScript);
+        } else if (
+          !script.type ||
+          [
+            "text/javascript",
+            "application/javascript",
+            "application/ecmascript",
+          ].includes(script.type)
+        ) {
+          if (scriptsRun.includes(script.innerText)) {
+            continue;
+          }
+
+          try {
+            scriptsRun.push(script.innerText);
+            new Function(script.innerText)();
+          } catch (error) {
+            console.warn("`CustomCode`: Error running script:", error);
+          }
+        }
       }
     }
-  }
-}
-}
-    
-
-    
-    
-    let scriptsInserted = [];
-let scriptsRun = [];
-
-    onMount(() => { findAndRunScripts(); });
-
-    
-
-    
-  </script>
-
-  <div  bind:this={elem}  class={'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')} >{@html code}</div>
+  };
+
+  let scriptsInserted = [];
+  let scriptsRun = [];
+
+  onMount(() => {
+    findAndRunScripts();
+  });
+</script>
+
+<div
+  bind:this={elem}
+  class={"builder-custom-code" + (replaceNodes ? " replace-nodes" : "")}
+>
+  {@html code}
+</div>

package/src/blocks/embed/embed.svelte

@@ -1,63 +1,56 @@
 <script>
-    import { onMount } from 'svelte'
-    
-    
-    
-  
-  
-  
-
-    
-
-    
-    export let elem;
-export let content;
-    
-    function findAndRunScripts() {
-// TODO: Move this function to standalone one in '@builder.io/utils'
-if (elem && typeof window !== 'undefined') {
-  const scripts = elem.getElementsByTagName('script');
-
-  for (let i = 0; i < scripts.length; i++) {
-    const script = scripts[i];
-
-    if (script.src) {
-      if (scriptsInserted.includes(script.src)) {
-        continue;
-      }
-
-      scriptsInserted.push(script.src);
-      const newScript = document.createElement('script');
-      newScript.async = true;
-      newScript.src = script.src;
-      document.head.appendChild(newScript);
-    } else if (!script.type || ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(script.type)) {
-      if (scriptsRun.includes(script.innerText)) {
-        continue;
-      }
-
-      try {
-        scriptsRun.push(script.innerText);
-        new Function(script.innerText)();
-      } catch (error) {
-        console.warn('`Embed`: Error running script:', error);
+  import { onMount } from "svelte";
+
+  export let elem;
+  export let content;
+
+  const findAndRunScripts = function findAndRunScripts() {
+    // TODO: Move this function to standalone one in '@builder.io/utils'
+    if (elem && typeof window !== "undefined") {
+      const scripts = elem.getElementsByTagName("script");
+
+      for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
+
+        if (script.src) {
+          if (scriptsInserted.includes(script.src)) {
+            continue;
+          }
+
+          scriptsInserted.push(script.src);
+          const newScript = document.createElement("script");
+          newScript.async = true;
+          newScript.src = script.src;
+          document.head.appendChild(newScript);
+        } else if (
+          !script.type ||
+          [
+            "text/javascript",
+            "application/javascript",
+            "application/ecmascript",
+          ].includes(script.type)
+        ) {
+          if (scriptsRun.includes(script.innerText)) {
+            continue;
+          }
+
+          try {
+            scriptsRun.push(script.innerText);
+            new Function(script.innerText)();
+          } catch (error) {
+            console.warn("`Embed`: Error running script:", error);
+          }
+        }
       }
     }
-  }
-}
-}
-    
-
-    
-    
-    let scriptsInserted = [];
-let scriptsRun = [];
-
-    onMount(() => { findAndRunScripts(); });
+  };
 
-    
+  let scriptsInserted = [];
+  let scriptsRun = [];
 
-    
-  </script>
+  onMount(() => {
+    findAndRunScripts();
+  });
+</script>
 
-  <div  class="builder-embed"  bind:this={elem} >{@html content}</div>
+<div class="builder-embed" bind:this={elem}>{@html content}</div>