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

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-13",
   "type": "module",
   "files": [
     "src"

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

@@ -10,8 +10,9 @@ 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  RenderComponentAndStyles,  {  }  from './render-component-and-styles.svelte';
+import  RenderComponent,  {  }  from './render-component.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-and-styles.svelte → render-component.svelte}

@@ -3,7 +3,6 @@
   
   
   
-import  {  TARGET  }  from '../../constants/target.js';
 import  BlockStyles,  {  }  from './block-styles.svelte';
 import  RenderBlock,  {  }  from './render-block.svelte';
 
@@ -12,8 +11,7 @@ import  RenderBlock,  {  }  from './render-block.svelte';
   
 
   
-  export let block;
-export let componentRef;
+  export let componentRef;
 export let componentOptions;
 export let blockChildren;
   
@@ -32,30 +30,29 @@ export let blockChildren;
 </script>
 
 
-  
-
-{#if TARGET === 'vue' || TARGET === 'svelte' }
-
-    
-<BlockStyles  block={block} ></BlockStyles>
+{#if componentRef }
 
   
+<svelte:component {...componentOptions} this={componentRef} >
+    
 
+    
 
-{/if}
+{#each blockChildren as child, index }
+<RenderBlock  key={'render-block-' + child.id}  block={child} ></RenderBlock>
+{/each}
 
-  
 
-{#if componentRef }
-<svelte:component {...componentOptions} this={componentRef} >
-      
+    
 
 {#each blockChildren as child, index }
-<RenderBlock  key={child.id}  block={child} ></RenderBlock>
+<BlockStyles  key={'block-style-' + child.id}  block={child} ></BlockStyles>
 {/each}
 
 
-    </svelte:component>
+  </svelte:component>
+
+
 
 
 {/if}

package/src/components/render-blocks.svelte

@@ -4,6 +4,7 @@
     
     
   import  {  isEditing  }  from '../functions/is-editing.js';
+import  BlockStyles,  {  }  from './render-block/block-styles.svelte';
 import  RenderBlock,  {  }  from './render-block/render-block.svelte';
 
   
@@ -58,12 +59,30 @@ class: className()
 }}  on:click="{event => onClick()}"  on:mouseenter="{event => onMouseEnter()}"  class={className()} >
     
 
+    
+
+{#if blocks }
+
+      
+
+{#each blocks as block, index }
+<RenderBlock  key={'render-block-' + block.id}  block={block} ></RenderBlock>
+{/each}
+
+
+    
+
+
+{/if}
+
+    
+
 {#if blocks }
 
       
 
 {#each blocks as block, index }
-<RenderBlock  key={block.id}  block={block} ></RenderBlock>
+<BlockStyles  key={'block-style-' + block.id}  block={block} ></BlockStyles>
 {/each}