@builder.io/sdk-svelte 4.0.6 → 4.0.7

package/lib/browser/blocks/form/input/input.svelte

@@ -15,14 +15,15 @@ export let value = undefined;
 export let required = undefined;
 </script>
 
-<input
-  {...filterAttrs(attributes, "on:", false)}
-  key={isEditing() && defaultValue ? defaultValue : "default-key"}
-  {placeholder}
-  {type}
-  {name}
-  {value}
-  {defaultValue}
-  {required}
-  use:setAttrs={filterAttrs(attributes, "on:", true)}
-/>
+{#key isEditing() && defaultValue ? defaultValue : "default-key"}
+  <input
+    {...filterAttrs(attributes, "on:", false)}
+    {placeholder}
+    {type}
+    {name}
+    {value}
+    {defaultValue}
+    {required}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  />
+{/key}

package/lib/browser/blocks/form/select/select.svelte

@@ -14,16 +14,17 @@ export let required = undefined;
 export let options = undefined;
 </script>
 
-<select
-  {...filterAttrs(attributes, "on:", false)}
-  {value}
-  key={isEditing() && defaultValue ? defaultValue : "default-key"}
-  {defaultValue}
-  {name}
-  {required}
-  use:setAttrs={filterAttrs(attributes, "on:", true)}
->
-  {#each options as option, index (`${option.name}-${index}`)}
-    <option value={option.value}>{option.name || option.value}</option>
-  {/each}
-</select>
+{#key isEditing() && defaultValue ? defaultValue : "default-key"}
+  <select
+    {...filterAttrs(attributes, "on:", false)}
+    {value}
+    {defaultValue}
+    {name}
+    {required}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  >
+    {#each options as option, index (`${option.name}-${index}`)}
+      <option value={option.value}>{option.name || option.value}</option>
+    {/each}
+  </select>
+{/key}

package/lib/browser/blocks/image/image.svelte

@@ -1,4 +1,5 @@
-<script>import { getSrcSet } from "./image.helpers";
+<script>import { onMount } from "svelte";
+import { getSrcSet } from "./image.helpers";
 export let image;
 export let src = undefined;
 export let srcset = undefined;
@@ -66,6 +67,7 @@ $: aspectRatioCss = () => {
     const out = aspectRatio ? aspectRatioStyles : undefined;
     return out;
 };
+onMount(() => { });
 </script>
 
 <picture>

package/lib/browser/blocks/img/img.svelte

@@ -24,14 +24,15 @@ function stringifyStyles(stylesObj) {
 }
 </script>
 
-<img
-  style={stringifyStyles({
-    objectFit: backgroundSize || "cover",
-    objectPosition: backgroundPosition || "center",
-  })}
-  key={(isEditing() && imgSrc) || "default-key"}
-  alt={altText}
-  src={imgSrc || image}
-  {...filterAttrs(attributes, "on:", false)}
-  use:setAttrs={filterAttrs(attributes, "on:", true)}
-/>
+{#key (isEditing() && imgSrc) || "default-key"}
+  <img
+    style={stringifyStyles({
+      objectFit: backgroundSize || "cover",
+      objectPosition: backgroundPosition || "center",
+    })}
+    alt={altText}
+    src={imgSrc || image}
+    {...filterAttrs(attributes, "on:", false)}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  />
+{/key}

package/lib/browser/blocks/text/component-info.js

@@ -1,9 +1,9 @@
 import { TARGET } from '../../constants/target';
 export const componentInfo = {
-    shouldReceiveBuilderProps: {
-        builderBlock: TARGET === 'reactNative' ? true : false,
+    shouldReceiveBuilderProps: TARGET === 'reactNative' ? {
+        builderBlock: true,
         builderContext: true
-    },
+    } : {},
     name: 'Text',
     static: true,
     isRSC: true,

package/lib/browser/components/block/block.helpers.d.ts

@@ -38,3 +38,4 @@ export declare const provideBuilderContext: (block: RegisteredComponent | null |
 } | {
     builderContext?: undefined;
 };
+export declare const generateKey: (index: number) => string;

package/lib/browser/components/block/block.helpers.js

@@ -103,3 +103,7 @@ export const provideBuilderContext = (block, context) => {
         };
     return {};
 };
+export const generateKey = (index) => {
+    //This does not handle the case in Qwik
+    return index.toString();
+};

package/lib/browser/components/block/block.svelte

@@ -7,7 +7,7 @@ import { getProcessedBlock } from "../../functions/get-processed-block";
 import "../../server-index";
 import "../dynamic-div.svelte";
 import { bindAnimations } from "./animator";
-import { getComponent, getRepeatItemData, provideBuilderBlock, provideBuilderContext, provideLinkComponent, provideRegisteredComponents, } from "./block.helpers";
+import { generateKey, getComponent, getRepeatItemData, provideBuilderBlock, provideBuilderContext, provideLinkComponent, provideRegisteredComponents, } from "./block.helpers";
 import BlockStyles from "./components/block-styles.svelte";
 import BlockWrapper from "./components/block-wrapper.svelte";
 import ComponentRef from "./components/component-ref/component-ref.svelte";
@@ -135,7 +135,7 @@ afterUpdate(() => { });
         {/each}
       </BlockWrapper>
     {:else}
-      {#each repeatItem() as data, index (index)}
+      {#each repeatItem() as data, index (generateKey(index))}
         <RepeatedBlock
           repeatContext={data.context}
           block={data.block}
@@ -157,7 +157,7 @@ afterUpdate(() => { });
       isInteractive={componentRefProps().isInteractive}
     />
   {:else}
-    {#each repeatItem() as data, index (index)}
+    {#each repeatItem() as data, index (generateKey(index))}
       <RepeatedBlock
         repeatContext={data.context}
         block={data.block}

package/lib/browser/components/block/components/interactive-element.svelte

@@ -6,8 +6,8 @@ import Awaiter from "../../awaiter.svelte";
 export let includeBlockProps;
 export let block;
 export let context;
-export let Wrapper;
 export let wrapperProps;
+export let Wrapper;
 $: attributes = () => {
     return includeBlockProps
         ? {
@@ -25,6 +25,9 @@ $: attributes = () => {
         }
         : {};
 };
+$: targetWrapperProps = () => {
+    return wrapperProps;
+};
 </script>
 
 {#if Wrapper.load}
@@ -35,7 +38,9 @@ $: attributes = () => {
     attributes={attributes()}><slot /></Awaiter
   >
 {:else}
-  <svelte:component this={Wrapper} {...wrapperProps} attributes={attributes()}
-    ><slot /></svelte:component
+  <svelte:component
+    this={Wrapper}
+    {...targetWrapperProps()}
+    attributes={attributes()}><slot /></svelte:component
   >
 {/if}

package/lib/browser/components/block/components/repeated-block.svelte

@@ -9,6 +9,10 @@ export let block;
 export let registeredComponents;
 export let linkComponent;
 let store = writable(repeatContext);
+function onUpdateFn_0(..._args) {
+    $store = repeatContext;
+}
+$: onUpdateFn_0(...[repeatContext]);
 setContext(BuilderContext.key, store);
 </script>
 

package/lib/browser/components/blocks/blocks-wrapper.svelte

@@ -69,7 +69,7 @@ $: onUpdateFn_0(...[blocks]);
   this={BlocksWrapper}
   style={stringifyStyles(styleProp)}
   bind:this={blocksWrapperRef}
-  class={className() + " svelte-element"}
+  class={className() + " svelteelement"}
   builder-path={dataPath()}
   builder-parent-id={parent}
   {...{}}
@@ -86,7 +86,7 @@ $: onUpdateFn_0(...[blocks]);
 >
 
 <style>
-  .svelte-element {
+  .svelteelement {
     display: flex;
     flex-direction: column;
     align-items: stretch;

package/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "4.0.6";
+export declare const SDK_VERSION = "4.0.7";

package/lib/browser/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "4.0.6";
+export const SDK_VERSION = "4.0.7";

package/lib/edge/blocks/form/input/input.svelte

@@ -15,14 +15,15 @@ export let value = undefined;
 export let required = undefined;
 </script>
 
-<input
-  {...filterAttrs(attributes, "on:", false)}
-  key={isEditing() && defaultValue ? defaultValue : "default-key"}
-  {placeholder}
-  {type}
-  {name}
-  {value}
-  {defaultValue}
-  {required}
-  use:setAttrs={filterAttrs(attributes, "on:", true)}
-/>
+{#key isEditing() && defaultValue ? defaultValue : "default-key"}
+  <input
+    {...filterAttrs(attributes, "on:", false)}
+    {placeholder}
+    {type}
+    {name}
+    {value}
+    {defaultValue}
+    {required}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  />
+{/key}

package/lib/edge/blocks/form/select/select.svelte

@@ -14,16 +14,17 @@ export let required = undefined;
 export let options = undefined;
 </script>
 
-<select
-  {...filterAttrs(attributes, "on:", false)}
-  {value}
-  key={isEditing() && defaultValue ? defaultValue : "default-key"}
-  {defaultValue}
-  {name}
-  {required}
-  use:setAttrs={filterAttrs(attributes, "on:", true)}
->
-  {#each options as option, index (`${option.name}-${index}`)}
-    <option value={option.value}>{option.name || option.value}</option>
-  {/each}
-</select>
+{#key isEditing() && defaultValue ? defaultValue : "default-key"}
+  <select
+    {...filterAttrs(attributes, "on:", false)}
+    {value}
+    {defaultValue}
+    {name}
+    {required}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  >
+    {#each options as option, index (`${option.name}-${index}`)}
+      <option value={option.value}>{option.name || option.value}</option>
+    {/each}
+  </select>
+{/key}

package/lib/edge/blocks/image/image.svelte

@@ -1,4 +1,5 @@
-<script>import { getSrcSet } from "./image.helpers";
+<script>import { onMount } from "svelte";
+import { getSrcSet } from "./image.helpers";
 export let image;
 export let src = undefined;
 export let srcset = undefined;
@@ -66,6 +67,7 @@ $: aspectRatioCss = () => {
     const out = aspectRatio ? aspectRatioStyles : undefined;
     return out;
 };
+onMount(() => { });
 </script>
 
 <picture>

package/lib/edge/blocks/img/img.svelte

@@ -24,14 +24,15 @@ function stringifyStyles(stylesObj) {
 }
 </script>
 
-<img
-  style={stringifyStyles({
-    objectFit: backgroundSize || "cover",
-    objectPosition: backgroundPosition || "center",
-  })}
-  key={(isEditing() && imgSrc) || "default-key"}
-  alt={altText}
-  src={imgSrc || image}
-  {...filterAttrs(attributes, "on:", false)}
-  use:setAttrs={filterAttrs(attributes, "on:", true)}
-/>
+{#key (isEditing() && imgSrc) || "default-key"}
+  <img
+    style={stringifyStyles({
+      objectFit: backgroundSize || "cover",
+      objectPosition: backgroundPosition || "center",
+    })}
+    alt={altText}
+    src={imgSrc || image}
+    {...filterAttrs(attributes, "on:", false)}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  />
+{/key}

package/lib/edge/blocks/text/component-info.js

@@ -1,9 +1,9 @@
 import { TARGET } from '../../constants/target';
 export const componentInfo = {
-    shouldReceiveBuilderProps: {
-        builderBlock: TARGET === 'reactNative' ? true : false,
+    shouldReceiveBuilderProps: TARGET === 'reactNative' ? {
+        builderBlock: true,
         builderContext: true
-    },
+    } : {},
     name: 'Text',
     static: true,
     isRSC: true,

package/lib/edge/components/block/block.helpers.d.ts

@@ -38,3 +38,4 @@ export declare const provideBuilderContext: (block: RegisteredComponent | null |
 } | {
     builderContext?: undefined;
 };
+export declare const generateKey: (index: number) => string;

package/lib/edge/components/block/block.helpers.js

@@ -103,3 +103,7 @@ export const provideBuilderContext = (block, context) => {
         };
     return {};
 };
+export const generateKey = (index) => {
+    //This does not handle the case in Qwik
+    return index.toString();
+};

package/lib/edge/components/block/block.svelte

@@ -7,7 +7,7 @@ import { getProcessedBlock } from "../../functions/get-processed-block";
 import "../../server-index";
 import "../dynamic-div.svelte";
 import { bindAnimations } from "./animator";
-import { getComponent, getRepeatItemData, provideBuilderBlock, provideBuilderContext, provideLinkComponent, provideRegisteredComponents, } from "./block.helpers";
+import { generateKey, getComponent, getRepeatItemData, provideBuilderBlock, provideBuilderContext, provideLinkComponent, provideRegisteredComponents, } from "./block.helpers";
 import BlockStyles from "./components/block-styles.svelte";
 import BlockWrapper from "./components/block-wrapper.svelte";
 import ComponentRef from "./components/component-ref/component-ref.svelte";
@@ -135,7 +135,7 @@ afterUpdate(() => { });
         {/each}
       </BlockWrapper>
     {:else}
-      {#each repeatItem() as data, index (index)}
+      {#each repeatItem() as data, index (generateKey(index))}
         <RepeatedBlock
           repeatContext={data.context}
           block={data.block}
@@ -157,7 +157,7 @@ afterUpdate(() => { });
       isInteractive={componentRefProps().isInteractive}
     />
   {:else}
-    {#each repeatItem() as data, index (index)}
+    {#each repeatItem() as data, index (generateKey(index))}
       <RepeatedBlock
         repeatContext={data.context}
         block={data.block}

package/lib/edge/components/block/components/interactive-element.svelte

@@ -6,8 +6,8 @@ import Awaiter from "../../awaiter.svelte";
 export let includeBlockProps;
 export let block;
 export let context;
-export let Wrapper;
 export let wrapperProps;
+export let Wrapper;
 $: attributes = () => {
     return includeBlockProps
         ? {
@@ -25,6 +25,9 @@ $: attributes = () => {
         }
         : {};
 };
+$: targetWrapperProps = () => {
+    return wrapperProps;
+};
 </script>
 
 {#if Wrapper.load}
@@ -35,7 +38,9 @@ $: attributes = () => {
     attributes={attributes()}><slot /></Awaiter
   >
 {:else}
-  <svelte:component this={Wrapper} {...wrapperProps} attributes={attributes()}
-    ><slot /></svelte:component
+  <svelte:component
+    this={Wrapper}
+    {...targetWrapperProps()}
+    attributes={attributes()}><slot /></svelte:component
   >
 {/if}

package/lib/edge/components/block/components/repeated-block.svelte

@@ -9,6 +9,10 @@ export let block;
 export let registeredComponents;
 export let linkComponent;
 let store = writable(repeatContext);
+function onUpdateFn_0(..._args) {
+    $store = repeatContext;
+}
+$: onUpdateFn_0(...[repeatContext]);
 setContext(BuilderContext.key, store);
 </script>
 

package/lib/edge/components/blocks/blocks-wrapper.svelte

@@ -69,7 +69,7 @@ $: onUpdateFn_0(...[blocks]);
   this={BlocksWrapper}
   style={stringifyStyles(styleProp)}
   bind:this={blocksWrapperRef}
-  class={className() + " svelte-element"}
+  class={className() + " svelteelement"}
   builder-path={dataPath()}
   builder-parent-id={parent}
   {...{}}
@@ -86,7 +86,7 @@ $: onUpdateFn_0(...[blocks]);
 >
 
 <style>
-  .svelte-element {
+  .svelteelement {
     display: flex;
     flex-direction: column;
     align-items: stretch;

package/lib/edge/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "4.0.6";
+export declare const SDK_VERSION = "4.0.7";

package/lib/edge/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "4.0.6";
+export const SDK_VERSION = "4.0.7";

package/lib/node/blocks/form/input/input.svelte

@@ -15,14 +15,15 @@ export let value = undefined;
 export let required = undefined;
 </script>
 
-<input
-  {...filterAttrs(attributes, "on:", false)}
-  key={isEditing() && defaultValue ? defaultValue : "default-key"}
-  {placeholder}
-  {type}
-  {name}
-  {value}
-  {defaultValue}
-  {required}
-  use:setAttrs={filterAttrs(attributes, "on:", true)}
-/>
+{#key isEditing() && defaultValue ? defaultValue : "default-key"}
+  <input
+    {...filterAttrs(attributes, "on:", false)}
+    {placeholder}
+    {type}
+    {name}
+    {value}
+    {defaultValue}
+    {required}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  />
+{/key}

package/lib/node/blocks/form/select/select.svelte

@@ -14,16 +14,17 @@ export let required = undefined;
 export let options = undefined;
 </script>
 
-<select
-  {...filterAttrs(attributes, "on:", false)}
-  {value}
-  key={isEditing() && defaultValue ? defaultValue : "default-key"}
-  {defaultValue}
-  {name}
-  {required}
-  use:setAttrs={filterAttrs(attributes, "on:", true)}
->
-  {#each options as option, index (`${option.name}-${index}`)}
-    <option value={option.value}>{option.name || option.value}</option>
-  {/each}
-</select>
+{#key isEditing() && defaultValue ? defaultValue : "default-key"}
+  <select
+    {...filterAttrs(attributes, "on:", false)}
+    {value}
+    {defaultValue}
+    {name}
+    {required}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  >
+    {#each options as option, index (`${option.name}-${index}`)}
+      <option value={option.value}>{option.name || option.value}</option>
+    {/each}
+  </select>
+{/key}

package/lib/node/blocks/image/image.svelte

@@ -1,4 +1,5 @@
-<script>import { getSrcSet } from "./image.helpers";
+<script>import { onMount } from "svelte";
+import { getSrcSet } from "./image.helpers";
 export let image;
 export let src = undefined;
 export let srcset = undefined;
@@ -66,6 +67,7 @@ $: aspectRatioCss = () => {
     const out = aspectRatio ? aspectRatioStyles : undefined;
     return out;
 };
+onMount(() => { });
 </script>
 
 <picture>

package/lib/node/blocks/img/img.svelte

@@ -24,14 +24,15 @@ function stringifyStyles(stylesObj) {
 }
 </script>
 
-<img
-  style={stringifyStyles({
-    objectFit: backgroundSize || "cover",
-    objectPosition: backgroundPosition || "center",
-  })}
-  key={(isEditing() && imgSrc) || "default-key"}
-  alt={altText}
-  src={imgSrc || image}
-  {...filterAttrs(attributes, "on:", false)}
-  use:setAttrs={filterAttrs(attributes, "on:", true)}
-/>
+{#key (isEditing() && imgSrc) || "default-key"}
+  <img
+    style={stringifyStyles({
+      objectFit: backgroundSize || "cover",
+      objectPosition: backgroundPosition || "center",
+    })}
+    alt={altText}
+    src={imgSrc || image}
+    {...filterAttrs(attributes, "on:", false)}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  />
+{/key}

package/lib/node/blocks/text/component-info.js

@@ -1,9 +1,9 @@
 import { TARGET } from '../../constants/target';
 export const componentInfo = {
-    shouldReceiveBuilderProps: {
-        builderBlock: TARGET === 'reactNative' ? true : false,
+    shouldReceiveBuilderProps: TARGET === 'reactNative' ? {
+        builderBlock: true,
         builderContext: true
-    },
+    } : {},
     name: 'Text',
     static: true,
     isRSC: true,

package/lib/node/components/block/block.helpers.d.ts

@@ -38,3 +38,4 @@ export declare const provideBuilderContext: (block: RegisteredComponent | null |
 } | {
     builderContext?: undefined;
 };
+export declare const generateKey: (index: number) => string;

package/lib/node/components/block/block.helpers.js

@@ -103,3 +103,7 @@ export const provideBuilderContext = (block, context) => {
         };
     return {};
 };
+export const generateKey = (index) => {
+    //This does not handle the case in Qwik
+    return index.toString();
+};

package/lib/node/components/block/block.svelte

@@ -7,7 +7,7 @@ import { getProcessedBlock } from "../../functions/get-processed-block";
 import "../../server-index";
 import "../dynamic-div.svelte";
 import { bindAnimations } from "./animator";
-import { getComponent, getRepeatItemData, provideBuilderBlock, provideBuilderContext, provideLinkComponent, provideRegisteredComponents, } from "./block.helpers";
+import { generateKey, getComponent, getRepeatItemData, provideBuilderBlock, provideBuilderContext, provideLinkComponent, provideRegisteredComponents, } from "./block.helpers";
 import BlockStyles from "./components/block-styles.svelte";
 import BlockWrapper from "./components/block-wrapper.svelte";
 import ComponentRef from "./components/component-ref/component-ref.svelte";
@@ -135,7 +135,7 @@ afterUpdate(() => { });
         {/each}
       </BlockWrapper>
     {:else}
-      {#each repeatItem() as data, index (index)}
+      {#each repeatItem() as data, index (generateKey(index))}
         <RepeatedBlock
           repeatContext={data.context}
           block={data.block}
@@ -157,7 +157,7 @@ afterUpdate(() => { });
       isInteractive={componentRefProps().isInteractive}
     />
   {:else}
-    {#each repeatItem() as data, index (index)}
+    {#each repeatItem() as data, index (generateKey(index))}
       <RepeatedBlock
         repeatContext={data.context}
         block={data.block}

package/lib/node/components/block/components/interactive-element.svelte

@@ -6,8 +6,8 @@ import Awaiter from "../../awaiter.svelte";
 export let includeBlockProps;
 export let block;
 export let context;
-export let Wrapper;
 export let wrapperProps;
+export let Wrapper;
 $: attributes = () => {
     return includeBlockProps
         ? {
@@ -25,6 +25,9 @@ $: attributes = () => {
         }
         : {};
 };
+$: targetWrapperProps = () => {
+    return wrapperProps;
+};
 </script>
 
 {#if Wrapper.load}
@@ -35,7 +38,9 @@ $: attributes = () => {
     attributes={attributes()}><slot /></Awaiter
   >
 {:else}
-  <svelte:component this={Wrapper} {...wrapperProps} attributes={attributes()}
-    ><slot /></svelte:component
+  <svelte:component
+    this={Wrapper}
+    {...targetWrapperProps()}
+    attributes={attributes()}><slot /></svelte:component
   >
 {/if}

package/lib/node/components/block/components/repeated-block.svelte

@@ -9,6 +9,10 @@ export let block;
 export let registeredComponents;
 export let linkComponent;
 let store = writable(repeatContext);
+function onUpdateFn_0(..._args) {
+    $store = repeatContext;
+}
+$: onUpdateFn_0(...[repeatContext]);
 setContext(BuilderContext.key, store);
 </script>
 

package/lib/node/components/blocks/blocks-wrapper.svelte

@@ -69,7 +69,7 @@ $: onUpdateFn_0(...[blocks]);
   this={BlocksWrapper}
   style={stringifyStyles(styleProp)}
   bind:this={blocksWrapperRef}
-  class={className() + " svelte-element"}
+  class={className() + " svelteelement"}
   builder-path={dataPath()}
   builder-parent-id={parent}
   {...{}}
@@ -86,7 +86,7 @@ $: onUpdateFn_0(...[blocks]);
 >
 
 <style>
-  .svelte-element {
+  .svelteelement {
     display: flex;
     flex-direction: column;
     align-items: stretch;

package/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "4.0.6";
+export declare const SDK_VERSION = "4.0.7";

package/lib/node/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "4.0.6";
+export const SDK_VERSION = "4.0.7";

package/package.json

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

package/src/blocks/form/input/input.svelte

@@ -28,14 +28,15 @@
   export let required: FormInputProps["required"] = undefined;
 </script>
 
-<input
-  {...filterAttrs(attributes, "on:", false)}
-  key={isEditing() && defaultValue ? defaultValue : "default-key"}
-  {placeholder}
-  {type}
-  {name}
-  {value}
-  {defaultValue}
-  {required}
-  use:setAttrs={filterAttrs(attributes, "on:", true)}
-/>
+{#key isEditing() && defaultValue ? defaultValue : "default-key"}
+  <input
+    {...filterAttrs(attributes, "on:", false)}
+    {placeholder}
+    {type}
+    {name}
+    {value}
+    {defaultValue}
+    {required}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  />
+{/key}

package/src/blocks/form/select/select.svelte

@@ -29,16 +29,17 @@
   export let options: FormSelectProps["options"] = undefined;
 </script>
 
-<select
-  {...filterAttrs(attributes, "on:", false)}
-  {value}
-  key={isEditing() && defaultValue ? defaultValue : "default-key"}
-  {defaultValue}
-  {name}
-  {required}
-  use:setAttrs={filterAttrs(attributes, "on:", true)}
->
-  {#each options as option, index (`${option.name}-${index}`)}
-    <option value={option.value}>{option.name || option.value}</option>
-  {/each}
-</select>
+{#key isEditing() && defaultValue ? defaultValue : "default-key"}
+  <select
+    {...filterAttrs(attributes, "on:", false)}
+    {value}
+    {defaultValue}
+    {name}
+    {required}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  >
+    {#each options as option, index (`${option.name}-${index}`)}
+      <option value={option.value}>{option.name || option.value}</option>
+    {/each}
+  </select>
+{/key}

package/src/blocks/image/image.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { onMount } from "svelte";
+
   import { getSrcSet } from "./image.helpers";
   import type { ImageProps } from "./image.types";
 
@@ -73,6 +75,8 @@
     const out = aspectRatio ? aspectRatioStyles : undefined;
     return out;
   };
+
+  onMount(() => {});
 </script>
 
 <picture>

package/src/blocks/img/img.svelte

@@ -45,14 +45,15 @@
   }
 </script>
 
-<img
-  style={stringifyStyles({
-    objectFit: backgroundSize || "cover",
-    objectPosition: backgroundPosition || "center",
-  })}
-  key={(isEditing() && imgSrc) || "default-key"}
-  alt={altText}
-  src={imgSrc || image}
-  {...filterAttrs(attributes, "on:", false)}
-  use:setAttrs={filterAttrs(attributes, "on:", true)}
-/>
+{#key (isEditing() && imgSrc) || "default-key"}
+  <img
+    style={stringifyStyles({
+      objectFit: backgroundSize || "cover",
+      objectPosition: backgroundPosition || "center",
+    })}
+    alt={altText}
+    src={imgSrc || image}
+    {...filterAttrs(attributes, "on:", false)}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  />
+{/key}

package/src/blocks/text/component-info.ts

@@ -1,10 +1,10 @@
 import { TARGET } from '../../constants/target';
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: TARGET === 'reactNative' ? true : false,
+  shouldReceiveBuilderProps: TARGET === 'reactNative' ? {
+    builderBlock: true,
     builderContext: true
-  },
+  } : {},
   name: 'Text',
   static: true,
   isRSC: true,

package/src/components/block/block.helpers.ts

@@ -123,4 +123,8 @@ export const provideBuilderContext = (block: RegisteredComponent | null | undefi
     builderContext: context
   };
   return {};
+};
+export const generateKey = (index: number) => {
+  //This does not handle the case in Qwik
+  return index.toString();
 }

package/src/components/block/block.svelte

@@ -22,6 +22,7 @@
   import DynamicDiv from "../dynamic-div.svelte";
   import { bindAnimations } from "./animator";
   import {
+    generateKey,
     getComponent,
     getInheritedStyles,
     getRepeatItemData,
@@ -173,7 +174,7 @@
         {/each}
       </BlockWrapper>
     {:else}
-      {#each repeatItem() as data, index (index)}
+      {#each repeatItem() as data, index (generateKey(index))}
         <RepeatedBlock
           repeatContext={data.context}
           block={data.block}
@@ -195,7 +196,7 @@
       isInteractive={componentRefProps().isInteractive}
     />
   {:else}
-    {#each repeatItem() as data, index (index)}
+    {#each repeatItem() as data, index (generateKey(index))}
       <RepeatedBlock
         repeatContext={data.context}
         block={data.block}

package/src/components/block/components/interactive-element.svelte

@@ -21,8 +21,8 @@
   export let includeBlockProps: InteractiveElementProps["includeBlockProps"];
   export let block: InteractiveElementProps["block"];
   export let context: InteractiveElementProps["context"];
-  export let Wrapper: InteractiveElementProps["Wrapper"];
   export let wrapperProps: InteractiveElementProps["wrapperProps"];
+  export let Wrapper: InteractiveElementProps["Wrapper"];
 
   $: attributes = () => {
     return includeBlockProps
@@ -41,6 +41,9 @@
         }
       : {};
   };
+  $: targetWrapperProps = () => {
+    return wrapperProps;
+  };
 </script>
 
 {#if Wrapper.load}
@@ -51,7 +54,9 @@
     attributes={attributes()}><slot /></Awaiter
   >
 {:else}
-  <svelte:component this={Wrapper} {...wrapperProps} attributes={attributes()}
-    ><slot /></svelte:component
+  <svelte:component
+    this={Wrapper}
+    {...targetWrapperProps()}
+    attributes={attributes()}><slot /></svelte:component
   >
 {/if}

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

@@ -20,6 +20,12 @@
 
   let store = writable(repeatContext);
 
+  function onUpdateFn_0(..._args: any[]) {
+    $store = repeatContext;
+  }
+
+  $: onUpdateFn_0(...[repeatContext]);
+
   setContext(BuilderContext.key, store);
 </script>
 

package/src/components/blocks/blocks-wrapper.svelte

@@ -103,7 +103,7 @@
   this={BlocksWrapper}
   style={stringifyStyles(styleProp)}
   bind:this={blocksWrapperRef}
-  class={className() + " svelte-element"}
+  class={className() + " svelteelement"}
   builder-path={dataPath()}
   builder-parent-id={parent}
   {...{}}
@@ -120,7 +120,7 @@
 >
 
 <style>
-  .svelte-element {
+  .svelteelement {
     display: flex;
     flex-direction: column;
     align-items: stretch;

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "4.0.6"
+export const SDK_VERSION = "4.0.7"