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

package/package.json

@@ -1,12 +1,23 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.1-0",
-  "dependencies": {
-    "node-fetch": "^2.6.1"
+  "version": "0.0.1-3",
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "require": "./src/index.js"
+    }
   },
-  "main": "src/index.js",
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
+  },
+  "dependencies": {
+    "node-fetch": "^2.6.1"
   }
 }

package/src/blocks/{button.svelte → button/button.svelte}

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

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

@@ -0,0 +1,41 @@
+const componentInfo = {
+  name: "Core:Button",
+  builtIn: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
+  defaultStyles: {
+    appearance: "none",
+    paddingTop: "15px",
+    paddingBottom: "15px",
+    paddingLeft: "25px",
+    paddingRight: "25px",
+    backgroundColor: "#000000",
+    color: "white",
+    borderRadius: "4px",
+    textAlign: "center",
+    cursor: "pointer"
+  },
+  inputs: [
+    {
+      name: "text",
+      type: "text",
+      defaultValue: "Click me!",
+      bubble: true
+    },
+    {
+      name: "link",
+      type: "url",
+      bubble: true
+    },
+    {
+      name: "openLinkInNewTab",
+      type: "boolean",
+      defaultValue: false,
+      friendlyName: "Open link in new tab"
+    }
+  ],
+  static: true,
+  noWrap: true
+};
+export {
+  componentInfo
+};

package/src/blocks/button/index.js

@@ -0,0 +1,7 @@
+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.svelte → columns/columns.svelte}

@@ -3,17 +3,18 @@
     
     
     
-  import  RenderBlocks,  {  }  from '../components/render-blocks.lite';
+  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;
 }
@@ -23,26 +24,27 @@ return columns || [];
 }
 
 function getWidth(index) {
-const columns = this.getColumns();
+const columns = getColumns();
 return columns[index]?.width || 100 / columns.length;
 }
 
 function getColumnCssWidth(index) {
-const columns = this.getColumns();
-const gutterSize = this.getGutterSize();
+const columns = getColumns();
+const gutterSize = getGutterSize();
 const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
-return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
+return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
 }
 
 function maybeApplyForTablet(prop) {
-const stackColumnsAt = stackColumnsAt || 'tablet';
-return stackColumnsAt === 'tablet' ? prop : 'inherit';
+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': this.maybeApplyForTablet(flexDir)
+  '--flex-dir-tablet': maybeApplyForTablet(flexDir)
 };
 };
 
@@ -52,12 +54,14 @@ const marginLeft = '0';
 return {
   '--column-width': width,
   '--column-margin-left': marginLeft,
-  '--column-width-tablet': this.maybeApplyForTablet(width),
-  '--column-margin-left-tablet': this.maybeApplyForTablet(marginLeft)
+  '--column-width-tablet': maybeApplyForTablet(width),
+  '--column-margin-left-tablet': maybeApplyForTablet(marginLeft)
 };
 };
 
     
+    
+    
 
     
 
@@ -68,7 +72,9 @@ return {
 
   <div  class="builder-columns div"  style={columnsCssVars()} >
     
-{#each columns as column }<div  class="builder-column div-2"  style={{
+
+{#each columns as column, index }
+<div  class="builder-column div-2"  style={{
 width: getColumnCssWidth(index),
 marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
 ...columnCssVars()
@@ -76,7 +82,9 @@ marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
           
 <RenderBlocks  blocks={column.blocks} ></RenderBlocks>
 
-        </div>{/each}
+        </div>
+{/each}
+
 
   </div>
 

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

@@ -0,0 +1,217 @@
+const componentInfo = {
+  name: "Columns",
+  builtIn: true,
+  inputs: [
+    {
+      name: "columns",
+      type: "array",
+      broadcast: true,
+      subFields: [
+        {
+          name: "blocks",
+          type: "array",
+          hideFromUI: true,
+          defaultValue: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto",
+                  minHeight: "20px",
+                  minWidth: "20px",
+                  overflow: "hidden"
+                }
+              },
+              component: {
+                name: "Image",
+                options: {
+                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  aspectRatio: 0.7004048582995948
+                }
+              }
+            },
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto"
+                }
+              },
+              component: {
+                name: "Text",
+                options: {
+                  text: "<p>Enter some text...</p>"
+                }
+              }
+            }
+          ]
+        },
+        {
+          name: "width",
+          type: "number",
+          hideFromUI: true,
+          helperText: "Width %, e.g. set to 50 to fill half of the space"
+        },
+        {
+          name: "link",
+          type: "url",
+          helperText: "Optionally set a url that clicking this column will link to"
+        }
+      ],
+      defaultValue: [
+        {
+          blocks: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto",
+                  minHeight: "20px",
+                  minWidth: "20px",
+                  overflow: "hidden"
+                }
+              },
+              component: {
+                name: "Image",
+                options: {
+                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  aspectRatio: 0.7004048582995948
+                }
+              }
+            },
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto"
+                }
+              },
+              component: {
+                name: "Text",
+                options: {
+                  text: "<p>Enter some text...</p>"
+                }
+              }
+            }
+          ]
+        },
+        {
+          blocks: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto",
+                  minHeight: "20px",
+                  minWidth: "20px",
+                  overflow: "hidden"
+                }
+              },
+              component: {
+                name: "Image",
+                options: {
+                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  aspectRatio: 0.7004048582995948
+                }
+              }
+            },
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto"
+                }
+              },
+              component: {
+                name: "Text",
+                options: {
+                  text: "<p>Enter some text...</p>"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      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();              }            }          }        }      "
+    },
+    {
+      name: "space",
+      type: "number",
+      defaultValue: 20,
+      helperText: "Size of gap between columns",
+      advanced: true
+    },
+    {
+      name: "stackColumnsAt",
+      type: "string",
+      defaultValue: "tablet",
+      helperText: "Convert horizontal columns to vertical at what device size",
+      enum: ["tablet", "mobile", "never"],
+      advanced: true
+    },
+    {
+      name: "reverseColumnsWhenStacked",
+      type: "boolean",
+      defaultValue: false,
+      helperText: "When stacking columns for mobile devices, reverse the ordering",
+      advanced: true
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/columns/index.js

@@ -0,0 +1,7 @@
+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/component-info.js

@@ -0,0 +1,31 @@
+const componentInfo = {
+  name: "Custom Code",
+  static: true,
+  builtIn: true,
+  requiredPermissions: ["editCode"],
+  inputs: [
+    {
+      name: "code",
+      type: "html",
+      required: true,
+      defaultValue: "<p>Hello there, I am custom HTML code!</p>",
+      code: true
+    },
+    {
+      name: "replaceNodes",
+      type: "boolean",
+      helperText: "Preserve server rendered dom nodes",
+      advanced: true
+    },
+    {
+      name: "scriptsClientOnly",
+      type: "boolean",
+      defaultValue: false,
+      helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
+      advanced: true
+    }
+  ]
+};
+export {
+  componentInfo
+};

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

@@ -0,0 +1,64 @@
+<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') {
+  /** @type {HTMLScriptElement[]} */
+  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>

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

@@ -0,0 +1,7 @@
+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/component-info.js

@@ -0,0 +1,24 @@
+const componentInfo = {
+  name: "Embed",
+  static: true,
+  builtIn: true,
+  inputs: [
+    {
+      name: "url",
+      type: "url",
+      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');        }      "
+    },
+    {
+      name: "content",
+      type: "html",
+      defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+      hideFromUI: true
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/embed/embed.svelte

@@ -0,0 +1,63 @@
+<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') {
+  /** @type {HTMLScriptElement[]} */
+  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(); });
+
+    
+
+    
+  </script>
+
+  <div  class="builder-embed"  bind:this={elem} >{@html content}</div>

package/src/blocks/embed/index.js

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