@builder.io/sdk-svelte 0.0.1-12 → 0.0.1-15

package/README.md

@@ -2,6 +2,10 @@
 
 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).

package/package.json

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

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';
+  
   
 
     

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

@@ -5,6 +5,7 @@
     
   
   
+  
 
     
 
@@ -16,7 +17,6 @@ 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++) {

package/src/blocks/embed/embed.svelte

@@ -5,6 +5,7 @@
     
   
   
+  
 
     
 
@@ -15,7 +16,6 @@ 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++) {

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.js';
-
+  import RenderBlock from '../../components/render-block/render-block.svelte';
+import { isEditing } from '../../functions/is-editing.js';
+  
   
 
     

package/src/blocks/fragment/fragment.svelte

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

package/src/blocks/image/image.svelte

@@ -5,6 +5,7 @@
     
   
   
+  
 
     
 
@@ -34,17 +35,17 @@ export let builderBlock;
     
   </script>
 
-  <div   >
+  <div  class="div" >
     
 <picture >
       
-<img  loading="lazy"    alt={altText}  role={altText ? 'presentation' : undefined}  style={{
+<img  loading="lazy"  class="img"  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 : '')}  src={image}  srcset={srcset}  sizes={sizes}  />
 
       
-<source  srcSet={srcset}  />
+<source  srcset={srcset}  />
 
     </picture>
 

package/src/blocks/img/img.svelte

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

package/src/blocks/input/input.svelte

@@ -3,7 +3,7 @@
   
   
   
-import  {  isEditing  }  from '../../functions/is-editing.js';
+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.js';
+import { isEditing } from '../../functions/is-editing.js';
 
 
 

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

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

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/index.js';
-
+  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";

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/error-boundary.svelte

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

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

@@ -3,11 +3,14 @@
     
     
     
-  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 { getContext, setContext } from "svelte";
 
     
     export let block;
@@ -15,15 +18,23 @@
     function camelToKebabCase(string) {
 return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
 }
-    $: css = () => {
+    $: useBlock = () => {
+return getProcessedBlock({
+  block: block,
+  state: builderContext.state,
+  context: builderContext.context
+});
+};
+
+$: css = () => {
 // TODO: media queries
-const styleObject = block.responsiveStyles?.large;
+const styleObject = useBlock().responsiveStyles?.large;
 
 if (!styleObject) {
   return '';
 }
 
-let str = `.${block.id} {`;
+let str = `.${useBlock().id} {`;
 
 for (const key in styleObject) {
   const value = styleObject[key];
@@ -37,7 +48,7 @@ str += '}';
 return str;
 };
 
-    
+    let builderContext = getContext(BuilderContext.key);
     
     
 
@@ -48,4 +59,13 @@ return str;
     
   </script>
 
-  <RenderInlinedStyles  styles={css()} ></RenderInlinedStyles>
+  
+{#if TARGET === 'vue' || TARGET === 'svelte' }
+
+    
+<RenderInlinedStyles  styles={css()} ></RenderInlinedStyles>
+
+  
+
+
+{/if}

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

@@ -3,16 +3,17 @@
     
     
     
-  import  BuilderContext,  {  }  from '../../context/builder.context';
-import  {  getBlockActions  }  from '../../functions/get-block-actions.js';
-import  {  getBlockComponentOptions  }  from '../../functions/get-block-component-options.js';
-import  {  getBlockProperties  }  from '../../functions/get-block-properties.js';
-import  {  getBlockStyles  }  from '../../functions/get-block-styles.js';
-import  {  getBlockTag  }  from '../../functions/get-block-tag.js';
-import  {  getProcessedBlock  }  from '../../functions/get-processed-block.js';
-import  {  isEmptyHtmlElement  }  from './render-block.helpers.js';
-import  RenderComponentAndStyles,  {  }  from './render-component-and-styles.svelte';
-
+  import BuilderContext from '../../context/builder.context';
+import { getBlockActions } from '../../functions/get-block-actions.js';
+import { getBlockComponentOptions } from '../../functions/get-block-component-options.js';
+import { getBlockProperties } from '../../functions/get-block-properties.js';
+import { getBlockStyles } from '../../functions/get-block-styles.js';
+import { getBlockTag } from '../../functions/get-block-tag.js';
+import { getProcessedBlock } from '../../functions/get-processed-block.js';
+import BlockStyles from './block-styles.svelte';
+import { isEmptyHtmlElement } from './render-block.helpers.js';
+import RenderComponent from './render-component.svelte';
+  
   
 
     import { getContext, setContext } from "svelte";
@@ -134,12 +135,21 @@ return componentRef() ? [] : children();
       
 <svelte:element {...attributes()} this={tagName()} >
         
-<RenderComponentAndStyles  block={useBlock()}  blockChildren={children()}  componentRef={componentRef()}  componentOptions={componentOptions()} ></RenderComponentAndStyles>
+<RenderComponent  blockChildren={children()}  componentRef={componentRef()}  componentOptions={componentOptions()} ></RenderComponent>
+
+        
+
+        
+
+{#each noCompRefChildren() as child, index }
+<svelte:self  key={'render-block-' + child.id}  block={child} ></svelte:self>
+{/each}
+
 
         
 
 {#each noCompRefChildren() as child, index }
-<svelte:self  key={child.id}  block={child} ></svelte:self>
+<BlockStyles  key={'block-style-' + child.id}  block={child} ></BlockStyles>
 {/each}
 
 
@@ -157,6 +167,6 @@ return componentRef() ? [] : children();
 
 
 {:else}
-<RenderComponentAndStyles  block={useBlock()}  blockChildren={children()}  componentRef={componentRef()}  componentOptions={componentOptions()} ></RenderComponentAndStyles>
+<RenderComponent  blockChildren={children()}  componentRef={componentRef()}  componentOptions={componentOptions()} ></RenderComponent>
 
 {/if}

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

@@ -0,0 +1,58 @@
+<script>
+  
+  
+  
+  
+import BlockStyles from './block-styles.svelte';
+import RenderBlock from './render-block.svelte';
+
+
+
+  
+
+  
+  export let componentRef;
+export let componentOptions;
+export let blockChildren;
+  
+  
+  
+
+  
+  
+  
+
+  
+
+  
+
+  
+</script>
+
+
+{#if componentRef }
+
+  
+<svelte:component {...componentOptions} this={componentRef} >
+    
+
+    
+
+{#each blockChildren as child, index }
+<RenderBlock  key={'render-block-' + child.id}  block={child} ></RenderBlock>
+{/each}
+
+
+    
+
+{#each blockChildren as child, index }
+<BlockStyles  key={'block-style-' + child.id}  block={child} ></BlockStyles>
+{/each}
+
+
+  </svelte:component>
+
+
+
+
+{/if}

package/src/components/render-blocks.svelte

@@ -3,9 +3,10 @@
     
     
     
-  import  {  isEditing  }  from '../functions/is-editing.js';
-import  RenderBlock,  {  }  from './render-block/render-block.svelte';
-
+  import { isEditing } from '../functions/is-editing.js';
+import BlockStyles from './render-block/block-styles.svelte';
+import RenderBlock from './render-block/render-block.svelte';
+  
   
 
     
@@ -53,9 +54,27 @@ return 'builder-blocks' + (!blocks?.length ? ' no-blocks' : '');
     
   </script>
 
-  <div    builder-path={path}  builder-parent-id={parent}  dataSet={{
+  <div  class="div"  class={className()}  builder-path={path}  builder-parent-id={parent}  dataSet={{
 class: className()
-}}  on:click="{event => onClick()}"  on:mouseenter="{event => onMouseEnter()}"  class={className()} >
+}}  on:click="{event => onClick()}"  on:mouseenter="{event => onMouseEnter()}" >
+    
+
+    
+
+{#if blocks }
+
+      
+
+{#each blocks as block, index }
+<RenderBlock  key={'render-block-' + block.id}  block={block} ></RenderBlock>
+{/each}
+
+
+    
+
+
+{/if}
+
     
 
 {#if blocks }
@@ -63,7 +82,7 @@ class: className()
       
 
 {#each blocks as block, index }
-<RenderBlock  key={block.id}  block={block} ></RenderBlock>
+<BlockStyles  key={'block-style-' + block.id}  block={block} ></BlockStyles>
 {/each}
 
 

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

@@ -3,8 +3,8 @@
     
     
     
-  import  RenderInlinedStyles,  {  }  from '../../render-inlined-styles.svelte';
-
+  import RenderInlinedStyles from '../../render-inlined-styles.svelte';
+  
   
 
     

package/src/components/render-content/render-content.svelte

@@ -3,22 +3,22 @@
     import { afterUpdate } from 'svelte'
     import { onDestroy } from 'svelte'
     
-  import  {  getDefaultRegisteredComponents  }  from '../../constants/builder-registered-components.js';
-import  {  TARGET  }  from '../../constants/target.js';
-import  BuilderContext,  {  }  from '../../context/builder.context';
-import  {  evaluate  }  from '../../functions/evaluate.js';
-import  {  convertSearchParamsToQueryObject  ,  getBuilderSearchParams  }  from '../../functions/get-builder-search-params/index.js';
-import  {  getContent  }  from '../../functions/get-content/index.js';
-import  {  getFetch  }  from '../../functions/get-fetch.js';
-import  {  isBrowser  }  from '../../functions/is-browser.js';
-import  {  isEditing  }  from '../../functions/is-editing.js';
-import  {  isPreviewing  }  from '../../functions/is-previewing.js';
-import  {  previewingModelName  }  from '../../functions/previewing-model-name.js';
-import  {  components  ,  createRegisterComponentMessage  }  from '../../functions/register-component.js';
-import  {  track  }  from '../../functions/track.js';
-import  RenderBlocks,  {  }  from '../render-blocks.svelte';
-import  RenderContentStyles,  {  }  from './components/render-styles.svelte';
-
+  import { getDefaultRegisteredComponents } from '../../constants/builder-registered-components.js';
+import { TARGET } from '../../constants/target.js';
+import BuilderContext from '../../context/builder.context';
+import { evaluate } from '../../functions/evaluate.js';
+import { convertSearchParamsToQueryObject, getBuilderSearchParams } from '../../functions/get-builder-search-params/index.js';
+import { getContent } from '../../functions/get-content/index.js';
+import { getFetch } from '../../functions/get-fetch.js';
+import { isBrowser } from '../../functions/is-browser.js';
+import { isEditing } from '../../functions/is-editing.js';
+import { isPreviewing } from '../../functions/is-previewing.js';
+import { previewingModelName } from '../../functions/previewing-model-name.js';
+import { components, createRegisterComponentMessage } from '../../functions/register-component.js';
+import { track } from '../../functions/track.js';
+import RenderBlocks from '../render-blocks.svelte';
+import RenderContentStyles from './components/render-styles.svelte';
+  
   
 
     import { getContext, setContext } from "svelte";

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

@@ -3,8 +3,8 @@
     
     
     
-  import  {  TARGET  }  from '../constants/target.js';
-
+  import { TARGET } from '../constants/target.js';
+  
   
 
     

package/src/index-helpers/blocks-exports.js

@@ -7,11 +7,13 @@ import { default as default7 } from "../blocks/button/button.svelte";
 import { default as default8 } from "../blocks/section/section.svelte";
 import { default as default9 } from "../blocks/fragment/fragment.svelte";
 import { default as default10 } from "../components/render-content/render-content.svelte";
+import { default as default11 } from "../components/render-blocks.svelte";
 export {
   default7 as Button,
   default2 as Columns,
   default9 as Fragment,
   default3 as Image,
+  default11 as RenderBlocks,
   default10 as RenderContent,
   default8 as Section,
   default6 as Symbol,

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

@@ -1,61 +0,0 @@
-<script>
-  
-  
-  
-  
-import  {  TARGET  }  from '../../constants/target.js';
-import  BlockStyles,  {  }  from './block-styles.svelte';
-import  RenderBlock,  {  }  from './render-block.svelte';
-
-
-
-  
-
-  
-  export let block;
-export let componentRef;
-export let componentOptions;
-export let blockChildren;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
-</script>
-
-
-  
-
-{#if TARGET === 'vue' || TARGET === 'svelte' }
-
-    
-<BlockStyles  block={block} ></BlockStyles>
-
-  
-
-
-{/if}
-
-  
-
-{#if componentRef }
-<svelte:component {...componentOptions} this={componentRef} >
-      
-
-{#each blockChildren as child, index }
-<RenderBlock  key={child.id}  block={child} ></RenderBlock>
-{/each}
-
-
-    </svelte:component>
-
-
-{/if}