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

package/README.md

@@ -0,0 +1,19 @@
+# Builder.io Svelte SDK (BETA)
+
+This is the Svelte SDK. It is currently in beta.
+
+## Mitosis
+
+This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).
+
+## Feature Support
+
+To check the status of the SDK, look at [these tables](../../README.md#feature-implementation).
+
+## Getting Started
+
+```
+npm install @builder.io/sdk-svelte@dev
+```
+
+Take a look at [our example repo](/examples/svelte/sveltekit) for how to use this SDK.

package/package.json

@@ -1,13 +1,20 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.1-3",
+  "version": "0.0.1-32",
   "type": "module",
   "files": [
     "src"
   ],
+  "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/svelte#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BuilderIO/builder.git",
+    "directory": "packages/sdks/output/svelte"
+  },
   "main": "./src/index.js",
   "module": "./src/index.js",
+  "svelte": "./src/index.js",
   "exports": {
     ".": {
       "import": "./src/index.js",

package/src/blocks/button/button.svelte

@@ -1,49 +1,36 @@
-<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>
-
-    
-
-
+<script context="module" lang="ts">
+  export interface ButtonProps {
+    attributes?: any;
+    text?: string;
+    link?: string;
+    openLinkInNewTab?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  export let attributes: ButtonProps["attributes"];
+  export let text: ButtonProps["text"];
+  export let link: ButtonProps["link"];
+  export let openLinkInNewTab: ButtonProps["openLinkInNewTab"];
+</script>
+
+{#if link}
+  <a
+    {...attributes}
+    role="button"
+    href={link}
+    target={openLinkInNewTab ? "_blank" : undefined}
+  >
+    {text}
+  </a>
 {:else}
-<span {...attributes}>{text}</span>
-
-{/if}
+  <button {...attributes} class="button">
+    {text}
+  </button>
+{/if}
+
+<style>
+  .button {
+    all: unset;
+  }
+</style>

package/src/blocks/columns/columns.svelte

@@ -1,103 +1,137 @@
-<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()
-}} >
-          
-<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>
+<script context="module" lang="ts">
+  type Column = {
+    blocks: any; // TODO: Implement this when support for dynamic CSS lands
+
+    width?: number;
+  };
+
+  type StackColumnsAt = "tablet" | "mobile" | "never";
+
+  export interface ColumnProps {
+    columns?: Column[];
+    builderBlock: BuilderBlock; // TODO: Implement this when support for dynamic CSS lands
+
+    space?: number; // TODO: Implement this when support for dynamic CSS lands
+
+    stackColumnsAt?: StackColumnsAt; // TODO: Implement this when support for dynamic CSS lands
+
+    reverseColumnsWhenStacked?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import RenderBlocks from "../../components/render-blocks.svelte";
+
+  export let space: ColumnProps["space"];
+  export let columns: ColumnProps["columns"];
+  export let stackColumnsAt: ColumnProps["stackColumnsAt"];
+  export let reverseColumnsWhenStacked: ColumnProps["reverseColumnsWhenStacked"];
+  export let builderBlock: ColumnProps["builderBlock"];
+
+  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}
+        path={`component.options.columns.${index}.blocks`}
+        parent={builderBlock.id}
+      />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .div {
+    display: flex;
+    align-items: stretch;
+    line-height: normal;
+  }
+  @media (max-width: 991px) {
+    .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: 991px) {
+    .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/columns/component-info.js

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util";
 const componentInfo = {
   name: "Columns",
   builtIn: true,
@@ -186,7 +187,31 @@ const componentInfo = {
           ]
         }
       ],
-      onChange: "        function clearWidths() {          columns.forEach(col => {            col.delete('width');          });        }        const columns = options.get('columns') as Array<Map<String, any>>;        if (Array.isArray(columns)) {          const containsColumnWithWidth = !!columns.find(col => col.get('width'));          if (containsColumnWithWidth) {            const containsColumnWithoutWidth = !!columns.find(col => !col.get('width'));            if (containsColumnWithoutWidth) {              clearWidths();            } else {              const sumWidths = columns.reduce((memo, col) => {                return memo + col.get('width');              }, 0);              const widthsDontAddUp = sumWidths !== 100;              if (widthsDontAddUp) {                clearWidths();              }            }          }        }      "
+      onChange: markSerializable((options) => {
+        function clearWidths() {
+          columns.forEach((col) => {
+            col.delete("width");
+          });
+        }
+        const columns = options.get("columns");
+        if (Array.isArray(columns)) {
+          const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
+          if (containsColumnWithWidth) {
+            const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
+            if (containsColumnWithoutWidth) {
+              clearWidths();
+            } else {
+              const sumWidths = columns.reduce((memo, col) => {
+                return memo + col.get("width");
+              }, 0);
+              const widthsDontAddUp = sumWidths !== 100;
+              if (widthsDontAddUp) {
+                clearWidths();
+              }
+            }
+          }
+        }
+      })
     },
     {
       name: "space",

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

@@ -1,64 +1,69 @@
-<script>
-    import { onMount } from 'svelte'
-    
-    
-    
-  
-  
+<script context="module" lang="ts">
+  export interface CustomCodeProps {
+    code: string;
+    replaceNodes?: boolean;
+  }
+</script>
 
-    
+<script lang="ts">
+  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') {
-  /** @type {HTMLScriptElement[]} */
-  const scripts = elem.getElementsByTagName('script');
+  export let elem: CustomCodeProps["elem"];
+  export let replaceNodes: CustomCodeProps["replaceNodes"];
+  export let code: CustomCodeProps["code"];
 
-  for (let i = 0; i < scripts.length; i++) {
-    const script = scripts[i];
+  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");
 
-    if (script.src) {
-      if (scriptsInserted.includes(script.src)) {
-        continue;
-      }
+      for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
 
-      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;
-      }
+        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);
+          try {
+            scriptsRun.push(script.innerText);
+            new Function(script.innerText)();
+          } catch (error) {
+            console.warn("`CustomCode`: Error running script:", error);
+          }
+        }
       }
     }
-  }
-}
-}
-    
-
-    
-    
-    let scriptsInserted = [];
-let scriptsRun = [];
-
-    onMount(() => { findAndRunScripts(); });
+  };
 
-    
+  let scriptsInserted = [];
+  let scriptsRun = [];
 
-    
-  </script>
+  onMount(() => {
+    findAndRunScripts();
+  });
+</script>
 
-  <div  bind:this={elem}  class={'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')} >{@html code}</div>
+<div
+  bind:this={elem}
+  class={"builder-custom-code" + (replaceNodes ? " replace-nodes" : "")}
+>
+  {@html code}
+</div>

package/src/blocks/embed/component-info.js

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util";
 const componentInfo = {
   name: "Embed",
   static: true,
@@ -9,7 +10,26 @@ const componentInfo = {
       required: true,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange: "        const url = options.get('url');        if (url) {          options.set('content', 'Loading...');          // TODO: get this out of here!          const apiKey = 'ae0e60e78201a3f2b0de4b';          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`)            .then(res => res.json())            .then(data => {              if (options.get('url') === url) {                if (data.html) {                  options.set('content', data.html);                } else {                  options.set('content', 'Invalid url, please try another');                }              }            })            .catch(err => {              options.set(                'content',                'There was an error embedding this URL, please try again or another URL'              );            });        } else {          options.delete('content');        }      "
+      onChange: markSerializable((options) => {
+        const url = options.get("url");
+        if (url) {
+          options.set("content", "Loading...");
+          const apiKey = "ae0e60e78201a3f2b0de4b";
+          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
+            if (options.get("url") === url) {
+              if (data.html) {
+                options.set("content", data.html);
+              } else {
+                options.set("content", "Invalid url, please try another");
+              }
+            }
+          }).catch((_err) => {
+            options.set("content", "There was an error embedding this URL, please try again or another URL");
+          });
+        } else {
+          options.delete("content");
+        }
+      })
     },
     {
       name: "content",