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

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,12 +1,30 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.1-2",
-  "dependencies": {
-    "node-fetch": "^2.6.1"
+  "version": "0.0.1-20",
+  "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",
+      "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/button.svelte

@@ -5,6 +5,7 @@
     
   
   
+  
 
     
 

package/src/blocks/columns/columns.svelte

@@ -3,8 +3,8 @@
     
     
     
-  import  RenderBlocks,  {  }  from '../../components/render-blocks.svelte';
-
+  import RenderBlocks from '../../components/render-blocks.svelte';
+  
   
 
     
@@ -15,31 +15,31 @@ export let columns;
 export let stackColumnsAt;
 export let reverseColumnsWhenStacked;
     
-    function getGutterSize() {
+    const getGutterSize = function getGutterSize() {
 return typeof space === 'number' ? space || 0 : 20;
-}
+};
 
-function getColumns() {
+const getColumns = function getColumns() {
 return columns || [];
-}
+};
 
-function getWidth(index) {
+const getWidth = function getWidth(index) {
 const columns = getColumns();
 return columns[index]?.width || 100 / columns.length;
-}
+};
 
-function getColumnCssWidth(index) {
+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)`;
-}
+};
 
-function maybeApplyForTablet(prop) {
+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 {
@@ -78,7 +78,7 @@ return {
 width: getColumnCssWidth(index),
 marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
 ...columnCssVars()
-}} >
+}}  key={index} >
           
 <RenderBlocks  blocks={column.blocks} ></RenderBlocks>
 

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

@@ -5,6 +5,7 @@
     
   
   
+  
 
     
 
@@ -13,10 +14,9 @@
 export let replaceNodes;
 export let code;
     
-    function findAndRunScripts() {
+    const findAndRunScripts = 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++) {
@@ -46,7 +46,7 @@ if (elem && typeof window !== 'undefined') {
     }
   }
 }
-}
+};
     
 
     

package/src/blocks/embed/embed.svelte

@@ -5,6 +5,7 @@
     
   
   
+  
 
     
 
@@ -12,10 +13,9 @@
     export let elem;
 export let content;
     
-    function findAndRunScripts() {
+    const findAndRunScripts = 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++) {
@@ -45,7 +45,7 @@ if (elem && typeof window !== 'undefined') {
     }
   }
 }
-}
+};
     
 
     

package/src/blocks/form/form.svelte

@@ -3,9 +3,9 @@
     
     
     
-  import  RenderBlock,  {  }  from '../../components/render-block/render-block.svelte';
-import  {  isEditing  }  from '../../functions/is-editing';
-
+  import RenderBlock from '../../components/render-block/render-block.svelte';
+import { isEditing } from '../../functions/is-editing.js';
+  
   
 
     
@@ -31,7 +31,7 @@ export let errorMessage;
 export let sendingMessage;
 export let successMessage;
     
-    function onSubmit(event) {
+    const onSubmit = function onSubmit(event) {
 const sendWithJs = sendWithJs || sendSubmissionsTo === 'email';
 
 if (sendSubmissionsTo === 'zapier') {
@@ -232,7 +232,7 @@ if (sendSubmissionsTo === 'zapier') {
     formState = 'error';
   });
 }
-}
+};
     $: submissionState = () => {
 return isEditing() && previewState || formState;
 };

package/src/blocks/fragment/fragment.svelte

@@ -6,6 +6,7 @@
 
 
 
+
   
 
   

package/src/blocks/image/image.svelte

@@ -5,6 +5,7 @@
     
   
   
+  
 
     
 
@@ -34,30 +35,30 @@ export let builderBlock;
     
   </script>
 
-  <div   >
+  <div  class="div" >
     
 <picture >
       
-<img  loading="lazy"    alt={altText}  aria-role={altText ? 'presentation' : undefined}  style={{
+<img  loading="lazy"  alt={altText}  role={altText ? 'presentation' : undefined}  style={{
 objectPosition: backgroundSize || 'center',
 objectFit: backgroundSize || 'cover'
-}}  class={'builder-image' + (className ? ' ' + className : '')}  src={image}  srcset={srcset}  sizes={sizes}  />
+}}  class={'builder-image' + (className ? ' ' + className : '') + 'img'}  src={image}  srcset={srcset}  sizes={sizes}  />
 
       
-<source  srcSet={srcset}  />
+<source  srcset={srcset}  />
 
     </picture>
 
     
 
 {#if aspectRatio && !(fitContent && builderBlock?.children?.length) }
+
+      
 <div  class="builder-image-sizer div-2"  style={{
 paddingTop: aspectRatio * 100 + '%'
-}} >
-          
-{' '}
+}} ></div>
 
-        </div>
+    
 
 
 {/if}

package/src/blocks/img/img.svelte

@@ -3,8 +3,8 @@
     
     
     
-  import  {  isEditing  }  from '../../functions/is-editing';
-
+  import { isEditing } from '../../functions/is-editing.js';
+  
   
 
     

package/src/blocks/input/input.svelte

@@ -3,7 +3,7 @@
   
   
   
-import  {  isEditing  }  from '../../functions/is-editing';
+import { isEditing } from '../../functions/is-editing.js';
 
 
 

package/src/blocks/raw-text/raw-text.svelte

@@ -6,6 +6,7 @@
 
 
 
+
   
 
   

package/src/blocks/section/section.svelte

@@ -5,6 +5,7 @@
     
   
   
+  
 
     
 

package/src/blocks/select/select.svelte

@@ -3,7 +3,7 @@
   
   
   
-import  {  isEditing  }  from '../../functions/is-editing';
+import { isEditing } from '../../functions/is-editing.js';
 
 
 

package/src/blocks/submit-button/submit-button.svelte

@@ -6,6 +6,7 @@
 
 
 
+
   
 
   

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

@@ -2,6 +2,7 @@ const componentInfo = {
   name: "Symbol",
   noWrap: true,
   static: true,
+  builtIn: true,
   inputs: [
     {
       name: "symbol",

package/src/blocks/symbol/symbol.svelte

@@ -3,10 +3,10 @@
     import { afterUpdate } from 'svelte'
     
     
-  import  RenderContent,  {  }  from '../../components/render-content/render-content.svelte';
-import  BuilderContext,  {  }  from '../../context/builder.context';
-import  {  getContent  }  from '../../functions/get-content';
-
+  import RenderContent from '../../components/render-content/render-content.svelte';
+import BuilderContext from '../../context/builder.context';
+import { getContent } from '../../functions/get-content/index.js';
+  
   
 
     import { getContext, setContext } from "svelte";
@@ -25,7 +25,9 @@ let content = null;
 
     onMount(() => { content = symbol?.content; });
 
-    afterUpdate(() => { const symbolToUse = symbol;
+    
+                  function onUpdateFn_0() {
+                    const symbolToUse = symbol;
 
 if (symbolToUse && !symbolToUse.content && !content && symbolToUse.model) {
 getContent({
@@ -37,7 +39,10 @@ getContent({
 }).then(response => {
   content = response;
 });
-} })
+}
+                  }
+                  $: onUpdateFn_0(...[props.symbol?.content, props.symbol?.model, props.symbol?.entry, state.content])
+                  
 
     
   </script>

package/src/blocks/text/text.svelte

@@ -6,6 +6,7 @@
 
 
 
+
   
 
   

package/src/blocks/textarea/textarea.svelte

@@ -6,6 +6,7 @@
 
 
 
+
   
 
   

package/src/blocks/video/video.svelte

@@ -5,6 +5,7 @@
     
   
   
+  
 
     
 

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

@@ -3,41 +3,46 @@
     
     
     
-  import  RenderInlinedStyles,  {  }  from '../render-inlined-styles.svelte';
-
+  import { TARGET } from '../../constants/target.js';
+import BuilderContext from '../../context/builder.context';
+import { getProcessedBlock } from '../../functions/get-processed-block.js';
+import RenderInlinedStyles from '../render-inlined-styles.svelte';
+import { convertStyleMaptoCSS } from '../../helpers/css.js';
+import { getMaxWidthQueryForSize } from '../../constants/device-sizes.js';
+  
   
 
-    
+    import { getContext, setContext } from "svelte";
 
     
     export let block;
     
-    function camelToKebabCase(string) {
-return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
-}
-    $: css = () => {
-// TODO: media queries
-const styleObject = block.responsiveStyles?.large;
-
-if (!styleObject) {
-  return '';
-}
-
-let str = `.${block.id} {`;
-
-for (const key in styleObject) {
-  const value = styleObject[key];
-
-  if (typeof value === 'string') {
-    str += `${camelToKebabCase(key)}: ${value};`;
-  }
-}
+    
+    $: useBlock = () => {
+return getProcessedBlock({
+  block: block,
+  state: builderContext.state,
+  context: builderContext.context
+});
+};
 
-str += '}';
-return str;
+$: css = () => {
+const styles = useBlock().responsiveStyles;
+const largeStyles = styles?.large;
+const mediumStyles = styles?.medium;
+const smallStyles = styles?.small;
+return `
+      ${largeStyles ? `.${useBlock().id} {${convertStyleMaptoCSS(largeStyles)}}` : ''}
+      ${mediumStyles ? `${getMaxWidthQueryForSize('medium')} {
+            .${useBlock().id} {${convertStyleMaptoCSS(mediumStyles)}}
+          }` : ''}
+      ${smallStyles ? `${getMaxWidthQueryForSize('small')} {
+            .${useBlock().id} {${convertStyleMaptoCSS(smallStyles)}}
+          }` : ''}
+    }`;
 };
 
-    
+    let builderContext = getContext(BuilderContext.key);
     
     
 
@@ -48,4 +53,13 @@ return str;
     
   </script>
 
-  <RenderInlinedStyles  styles={css()} ></RenderInlinedStyles>
+  
+{#if TARGET === 'vue2' || TARGET === 'vue3' || TARGET === 'svelte' }
+
+    
+<RenderInlinedStyles  styles={css()} ></RenderInlinedStyles>
+
+  
+
+
+{/if}

package/src/components/render-block/render-block.helpers.js

@@ -0,0 +1,23 @@
+const EMPTY_HTML_ELEMENTS = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "keygen",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+const isEmptyHtmlElement = (tagName) => {
+  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
+};
+export {
+  isEmptyHtmlElement
+};