@builder.io/sdk-svelte 0.0.1-6 → 0.0.1-7

package/package.json

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

package/src/blocks/columns/columns.svelte

@@ -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/image/image.svelte

@@ -38,7 +38,7 @@ export let builderBlock;
     
 <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}  />

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

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

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

@@ -12,6 +12,7 @@ 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';
 
   
 
@@ -103,9 +104,11 @@ return componentRef() ? [] : children();
   </script>
 
   
+{#if !componentInfo?.()?.noWrap }
+
     
 
-{#if !componentInfo?.()?.noWrap }
+{#if !isEmptyHtmlElement(tagName()) }
 
       
 <svelte:element {...propertiesAndActions()} style={css()}  this={tagName()} >
@@ -128,7 +131,7 @@ return componentRef() ? [] : children();
             
 
 {#each children() as child, index }
-<svelte:self  block={child} ></svelte:self>
+<svelte:self  key={child.id}  block={child} ></svelte:self>
 {/each}
 
 
@@ -140,7 +143,7 @@ return componentRef() ? [] : children();
         
 
 {#each noCompRefChildren() as child, index }
-<svelte:self  block={child} ></svelte:self>
+<svelte:self  key={child.id}  block={child} ></svelte:self>
 {/each}
 
 
@@ -149,15 +152,23 @@ return componentRef() ? [] : children();
     
 
 
+{:else}
+<svelte:element {...propertiesAndActions()} style={css()}  this={tagName()} ></svelte:element>
+
+{/if}
+
+  
+
+
 {:else}
 <svelte:component {...componentOptions()} attributes={propertiesAndActions()}  builderBlock={useBlock()}  style={css()}  this={componentRef()} >
-          
+        
 
 {#each children() as child, index }
-<svelte:self  block={child} ></svelte:self>
+<svelte:self  key={child.id}  block={child} ></svelte:self>
 {/each}
 
 
-        </svelte:component>
+      </svelte:component>
 
 {/if}

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

@@ -111,14 +111,16 @@ Object.entries(requests).forEach(([key, url]) => {
 }
 
 function emitStateUpdate() {
-window.dispatchEvent(new CustomEvent('builder:component:stateChange', {
-  detail: {
-    state: contentState(),
-    ref: {
-      name: model
+if (isEditing()) {
+  window.dispatchEvent(new CustomEvent('builder:component:stateChange', {
+    detail: {
+      state: contentState(),
+      ref: {
+        name: model
+      }
     }
-  }
-}));
+  }));
+}
 }
     $: useContent = () => {
 const mergedContent = { ...content,