@builder.io/sdk-svelte 0.0.1-10 → 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-10",
+  "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

@@ -3,8 +3,7 @@
     
     
     
-  import  {  TARGET  }  from '../../constants/target.js';
-import  BuilderContext,  {  }  from '../../context/builder.context';
+  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';
@@ -13,6 +12,7 @@ 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';
 
   
 
@@ -70,22 +70,32 @@ return getProcessedBlock({
 });
 };
 
-$: propertiesAndActions = () => {
+$: attributes = () => {
 return { ...getBlockProperties(useBlock()),
   ...getBlockActions({
     block: useBlock(),
     state: builderContext.state,
     context: builderContext.context
-  })
+  }),
+  style: getBlockStyles(useBlock())
 };
 };
 
-$: css = () => {
-return getBlockStyles(useBlock());
+$: shouldWrap = () => {
+return !componentInfo?.()?.noWrap;
 };
 
 $: componentOptions = () => {
-return getBlockComponentOptions(useBlock());
+return { ...getBlockComponentOptions(useBlock()),
+
+  /**
+   * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+   * they are provided to the component itself directly.
+   */
+  ...(shouldWrap() ? {} : {
+    attributes: attributes()
+  })
+};
 };
 
 $: children = () => {
@@ -97,6 +107,10 @@ return useBlock().children ?? [];
 };
 
 $: noCompRefChildren = () => {
+/**
+ * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+ * we render them outside of `componentRef`
+ */
 return componentRef() ? [] : children();
 };
 
@@ -112,46 +126,30 @@ return componentRef() ? [] : children();
   </script>
 
   
-{#if !componentInfo?.()?.noWrap }
+{#if shouldWrap() }
 
     
 
 {#if !isEmptyHtmlElement(tagName()) }
 
       
-<svelte:element {...propertiesAndActions()} style={css()}  this={tagName()} >
+<svelte:element {...attributes()} this={tagName()} >
         
-
-{#if TARGET === 'vue' || TARGET === 'svelte' }
-
-          
-<BlockStyles  block={useBlock()} ></BlockStyles>
+<RenderComponent  blockChildren={children()}  componentRef={componentRef()}  componentOptions={componentOptions()} ></RenderComponent>
 
         
 
-
-{/if}
-
         
 
-{#if componentRef() }
-<svelte:component {...componentOptions()} builderBlock={useBlock()}  this={componentRef()} >
-            
-
-{#each children() as child, index }
-<svelte:self  key={child.id}  block={child} ></svelte:self>
+{#each noCompRefChildren() as child, index }
+<svelte:self  key={'render-block-' + child.id}  block={child} ></svelte:self>
 {/each}
 
 
-          </svelte:component>
-
-
-{/if}
-
         
 
 {#each noCompRefChildren() as child, index }
-<svelte:self  key={child.id}  block={child} ></svelte:self>
+<BlockStyles  key={'block-style-' + child.id}  block={child} ></BlockStyles>
 {/each}
 
 
@@ -161,7 +159,7 @@ return componentRef() ? [] : children();
 
 
 {:else}
-<svelte:element {...propertiesAndActions()} style={css()}  this={tagName()} ></svelte:element>
+<svelte:element {...attributes()} this={tagName()} ></svelte:element>
 
 {/if}
 
@@ -169,14 +167,6 @@ return componentRef() ? [] : children();
 
 
 {:else}
-<svelte:component {...componentOptions()} attributes={propertiesAndActions()}  builderBlock={useBlock()}  style={css()}  this={componentRef()} >
-        
-
-{#each children() as child, index }
-<svelte:self  key={child.id}  block={child} ></svelte:self>
-{/each}
-
-
-      </svelte:component>
+<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

@@ -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}
 
 

package/src/functions/get-block-component-options.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,9 +16,12 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function getBlockComponentOptions(block) {
   var _a;
-  return __spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options);
+  return __spreadProps(__spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
+    builderBlock: block
+  });
 }
 export {
   getBlockComponentOptions