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

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-9",
   "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,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
+};

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,
@@ -150,7 +152,7 @@ const allComponentsArray = [...getDefaultRegisteredComponents(), // While this `
 // which is the new standard way of providing custom components, and must therefore take precedence.
 ...components, ...(customComponents || [])];
 const allComponents = allComponentsArray.reduce((acc, curr) => ({ ...acc,
-  [curr.info.name]: curr
+  [curr.name]: curr
 }), {});
 return allComponents;
 };

package/src/constants/builder-registered-components.js

@@ -1,3 +1,19 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 import { default as Button } from "../blocks/button/button.svelte";
 import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info";
 import { default as Columns } from "../blocks/columns/columns.svelte";
@@ -15,14 +31,14 @@ import { default as Text } from "../blocks/text/text.svelte";
 import { componentInfo as videoComponentInfo } from "../blocks/video/component-info";
 import { default as Video } from "../blocks/video/video.svelte";
 const getDefaultRegisteredComponents = () => [
-  { component: Columns, info: columnsComponentInfo },
-  { component: Image, info: imageComponentInfo },
-  { component: Text, info: textComponentInfo },
-  { component: Video, info: videoComponentInfo },
-  { component: Symbol, info: symbolComponentInfo },
-  { component: Button, info: buttonComponentInfo },
-  { component: Section, info: sectionComponentInfo },
-  { component: Fragment, info: fragmentComponentInfo }
+  __spreadValues({ component: Columns }, columnsComponentInfo),
+  __spreadValues({ component: Image }, imageComponentInfo),
+  __spreadValues({ component: Text }, textComponentInfo),
+  __spreadValues({ component: Video }, videoComponentInfo),
+  __spreadValues({ component: Symbol }, symbolComponentInfo),
+  __spreadValues({ component: Button }, buttonComponentInfo),
+  __spreadValues({ component: Section }, sectionComponentInfo),
+  __spreadValues({ component: Fragment }, fragmentComponentInfo)
 ];
 export {
   getDefaultRegisteredComponents

package/src/functions/register-component.js

@@ -17,19 +17,36 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import { fastClone } from "./fast-clone.js";
 const components = [];
 function registerComponent(component, info) {
-  components.push({ component, info });
+  components.push(__spreadValues({ component }, info));
   console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
   return component;
 }
-const createRegisterComponentMessage = ({
-  info
-}) => ({
-  type: "builder.registerComponent",
-  data: prepareComponentInfoToSend(fastClone(info))
-});
+const createRegisterComponentMessage = (_a) => {
+  var _b = _a, {
+    component
+  } = _b, info = __objRest(_b, [
+    "component"
+  ]);
+  return {
+    type: "builder.registerComponent",
+    data: prepareComponentInfoToSend(fastClone(info))
+  };
+};
 function prepareComponentInfoToSend(info) {
   return __spreadValues(__spreadValues({}, info), info.inputs && {
     inputs: info.inputs.map((input) => {