@builder.io/sdk-svelte 0.0.1-8 → 0.0.1

package/package.json

@@ -1,22 +1,45 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.1-8",
+  "version": "0.0.1",
   "type": "module",
   "files": [
-    "src"
+    "package"
   ],
-  "main": "./src/index.js",
-  "module": "./src/index.js",
-  "svelte": "./src/index.js",
+  "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": "./package/index.js",
+  "module": "./package/index.js",
+  "svelte": "./package/index.js",
   "exports": {
     ".": {
-      "import": "./src/index.js",
-      "require": "./src/index.js"
+      "import": "./package/index.js",
+      "require": "./package/index.js"
     }
   },
+  "types": "./package/index.d.ts",
   "scripts": {
-    "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
+    "release:patch": "yarn run build && npm version patch --no-git-tag-version && npm publish --access public",
+    "release:dev": "yarn run build && npm version prerelease --no-git-tag-version && npm publish --tag dev --access public",
+    "dev": "vite dev",
+    "build": "svelte-kit sync && svelte-package && rm package/package.json",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "1.0.0-next.71",
+    "@sveltejs/kit": "1.0.0-next.474",
+    "@sveltejs/package": "1.0.0-next.1",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.7.1",
+    "svelte-preprocess": "^4.10.6",
+    "tslib": "^2.3.1",
+    "typescript": "^4",
+    "vite": "^3.0.4"
   },
   "dependencies": {
     "node-fetch": "^2.6.1"

package/src/blocks/button/button.svelte

@@ -1,49 +0,0 @@
-<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>
-
-    
-
-
-{:else}
-<span {...attributes}>{text}</span>
-
-{/if}

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

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

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

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

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

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

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

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

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