@builder.io/sdk-svelte 2.0.16 → 2.0.18

package/lib/browser/components/awaiter.svelte

@@ -0,0 +1,19 @@
+<script>export let load;
+export let fallback;
+export let props;
+export let attributes;
+</script>
+
+{#await load()}
+  {#if fallback}
+    <svelte:component this={fallback} />
+  {/if}
+  {:then { default: Component }}
+  <svelte:component
+    this={Component}
+    {...props}
+    attributes={attributes}
+  >
+    <slot />
+  </svelte:component>
+{/await}

package/lib/browser/components/awaiter.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        load: () => Promise<any>;
+        fallback: any;
+        props: any;
+        attributes: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AwaiterProps = typeof __propDef.props;
+export type AwaiterEvents = typeof __propDef.events;
+export type AwaiterSlots = typeof __propDef.slots;
+export default class Awaiter extends SvelteComponent<AwaiterProps, AwaiterEvents, AwaiterSlots> {
+}
+export {};

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

@@ -2,11 +2,12 @@
 
 <script>import { getBlockActions } from "../../../functions/get-block-actions";
 import { getBlockProperties } from "../../../functions/get-block-properties";
+import Awaiter from "../../awaiter.svelte";
 export let includeBlockProps;
 export let block;
 export let context;
-export let wrapperProps;
 export let Wrapper;
+export let wrapperProps;
 $: attributes = () => {
     return includeBlockProps
         ? {
@@ -26,6 +27,15 @@ $: attributes = () => {
 };
 </script>
 
-<svelte:component this={Wrapper} {...wrapperProps} attributes={attributes()}
-  ><slot /></svelte:component
->
+{#if Wrapper.load}
+  <Awaiter
+    load={Wrapper.load}
+    fallback={Wrapper.fallback}
+    props={wrapperProps}
+    attributes={attributes()}><slot /></Awaiter
+  >
+{:else}
+  <svelte:component this={Wrapper} {...wrapperProps} attributes={attributes()}
+    ><slot /></svelte:component
+  >
+{/if}

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.16";
+export declare const SDK_VERSION = "2.0.18";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.16";
+export const SDK_VERSION = "2.0.18";

package/lib/browser/context/component-reference-types.d.ts

@@ -0,0 +1,15 @@
+import type { SvelteComponent } from 'svelte';
+export type ComponentReference = {
+    /**
+     * A dynamic import function pointing to the component.
+     * Example: `() => import('../components/my-component.svelte')`
+     * @returns A Promise that resolves to the loaded component.
+     */
+    load: () => Promise<{
+        default: typeof SvelteComponent<any>;
+    }>;
+    /**
+     * An optional fallback component to render while the dynamic component is loading.
+     */
+    fallback?: typeof SvelteComponent<any>;
+} | typeof SvelteComponent<any>;

package/lib/browser/context/component-reference-types.js

@@ -0,0 +1 @@
+export {};

package/lib/browser/context/types.d.ts

@@ -3,9 +3,10 @@ import type { ApiVersion } from '../types/api-version';
 import type { BuilderContent } from '../types/builder-content';
 import type { ComponentInfo } from '../types/components';
 import type { Dictionary, Nullable } from '../types/typescript';
+import type { ComponentReference } from './component-reference-types';
 import type { ExtraContextTypes } from './extra-context-types';
 export type RegisteredComponent = ComponentInfo & {
-    component: any;
+    component: ComponentReference;
 };
 export type RegisteredComponents = Dictionary<RegisteredComponent>;
 export type BuilderRenderState = Record<string, unknown>;

package/lib/browser/functions/evaluate/node-runtime/node-runtime.js

@@ -67,7 +67,7 @@ export const setIvm = (ivm, options = {}) => {
     setIsolateContext(options);
 };
 // only mention the script for SDKs that have it.
-const SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === '@builder.io/sdk-react-nextjs' || SDK_NAME === '@builder.io/sdk-react' || SDK_NAME === '@builder.io/sdk-qwik';
+const SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === '@builder.io/sdk-react-nextjs' || SDK_NAME === '@builder.io/sdk-react' || SDK_NAME === '@builder.io/sdk-qwik' || SDK_NAME === '@builder.io/sdk-vue';
 const getIvm = () => {
     try {
         if (IVM_INSTANCE)

package/lib/edge/components/awaiter.svelte

@@ -0,0 +1,19 @@
+<script>export let load;
+export let fallback;
+export let props;
+export let attributes;
+</script>
+
+{#await load()}
+  {#if fallback}
+    <svelte:component this={fallback} />
+  {/if}
+  {:then { default: Component }}
+  <svelte:component
+    this={Component}
+    {...props}
+    attributes={attributes}
+  >
+    <slot />
+  </svelte:component>
+{/await}

package/lib/edge/components/awaiter.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        load: () => Promise<any>;
+        fallback: any;
+        props: any;
+        attributes: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AwaiterProps = typeof __propDef.props;
+export type AwaiterEvents = typeof __propDef.events;
+export type AwaiterSlots = typeof __propDef.slots;
+export default class Awaiter extends SvelteComponent<AwaiterProps, AwaiterEvents, AwaiterSlots> {
+}
+export {};

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

@@ -2,11 +2,12 @@
 
 <script>import { getBlockActions } from "../../../functions/get-block-actions";
 import { getBlockProperties } from "../../../functions/get-block-properties";
+import Awaiter from "../../awaiter.svelte";
 export let includeBlockProps;
 export let block;
 export let context;
-export let wrapperProps;
 export let Wrapper;
+export let wrapperProps;
 $: attributes = () => {
     return includeBlockProps
         ? {
@@ -26,6 +27,15 @@ $: attributes = () => {
 };
 </script>
 
-<svelte:component this={Wrapper} {...wrapperProps} attributes={attributes()}
-  ><slot /></svelte:component
->
+{#if Wrapper.load}
+  <Awaiter
+    load={Wrapper.load}
+    fallback={Wrapper.fallback}
+    props={wrapperProps}
+    attributes={attributes()}><slot /></Awaiter
+  >
+{:else}
+  <svelte:component this={Wrapper} {...wrapperProps} attributes={attributes()}
+    ><slot /></svelte:component
+  >
+{/if}

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.16";
+export declare const SDK_VERSION = "2.0.18";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.16";
+export const SDK_VERSION = "2.0.18";

package/lib/edge/context/component-reference-types.d.ts

@@ -0,0 +1,15 @@
+import type { SvelteComponent } from 'svelte';
+export type ComponentReference = {
+    /**
+     * A dynamic import function pointing to the component.
+     * Example: `() => import('../components/my-component.svelte')`
+     * @returns A Promise that resolves to the loaded component.
+     */
+    load: () => Promise<{
+        default: typeof SvelteComponent<any>;
+    }>;
+    /**
+     * An optional fallback component to render while the dynamic component is loading.
+     */
+    fallback?: typeof SvelteComponent<any>;
+} | typeof SvelteComponent<any>;

package/lib/edge/context/component-reference-types.js

@@ -0,0 +1 @@
+export {};

package/lib/edge/context/types.d.ts

@@ -3,9 +3,10 @@ import type { ApiVersion } from '../types/api-version';
 import type { BuilderContent } from '../types/builder-content';
 import type { ComponentInfo } from '../types/components';
 import type { Dictionary, Nullable } from '../types/typescript';
+import type { ComponentReference } from './component-reference-types';
 import type { ExtraContextTypes } from './extra-context-types';
 export type RegisteredComponent = ComponentInfo & {
-    component: any;
+    component: ComponentReference;
 };
 export type RegisteredComponents = Dictionary<RegisteredComponent>;
 export type BuilderRenderState = Record<string, unknown>;

package/lib/edge/functions/evaluate/node-runtime/node-runtime.js

@@ -67,7 +67,7 @@ export const setIvm = (ivm, options = {}) => {
     setIsolateContext(options);
 };
 // only mention the script for SDKs that have it.
-const SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === '@builder.io/sdk-react-nextjs' || SDK_NAME === '@builder.io/sdk-react' || SDK_NAME === '@builder.io/sdk-qwik';
+const SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === '@builder.io/sdk-react-nextjs' || SDK_NAME === '@builder.io/sdk-react' || SDK_NAME === '@builder.io/sdk-qwik' || SDK_NAME === '@builder.io/sdk-vue';
 const getIvm = () => {
     try {
         if (IVM_INSTANCE)

package/lib/node/components/awaiter.svelte

@@ -0,0 +1,19 @@
+<script>export let load;
+export let fallback;
+export let props;
+export let attributes;
+</script>
+
+{#await load()}
+  {#if fallback}
+    <svelte:component this={fallback} />
+  {/if}
+  {:then { default: Component }}
+  <svelte:component
+    this={Component}
+    {...props}
+    attributes={attributes}
+  >
+    <slot />
+  </svelte:component>
+{/await}

package/lib/node/components/awaiter.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        load: () => Promise<any>;
+        fallback: any;
+        props: any;
+        attributes: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AwaiterProps = typeof __propDef.props;
+export type AwaiterEvents = typeof __propDef.events;
+export type AwaiterSlots = typeof __propDef.slots;
+export default class Awaiter extends SvelteComponent<AwaiterProps, AwaiterEvents, AwaiterSlots> {
+}
+export {};

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

@@ -2,11 +2,12 @@
 
 <script>import { getBlockActions } from "../../../functions/get-block-actions";
 import { getBlockProperties } from "../../../functions/get-block-properties";
+import Awaiter from "../../awaiter.svelte";
 export let includeBlockProps;
 export let block;
 export let context;
-export let wrapperProps;
 export let Wrapper;
+export let wrapperProps;
 $: attributes = () => {
     return includeBlockProps
         ? {
@@ -26,6 +27,15 @@ $: attributes = () => {
 };
 </script>
 
-<svelte:component this={Wrapper} {...wrapperProps} attributes={attributes()}
-  ><slot /></svelte:component
->
+{#if Wrapper.load}
+  <Awaiter
+    load={Wrapper.load}
+    fallback={Wrapper.fallback}
+    props={wrapperProps}
+    attributes={attributes()}><slot /></Awaiter
+  >
+{:else}
+  <svelte:component this={Wrapper} {...wrapperProps} attributes={attributes()}
+    ><slot /></svelte:component
+  >
+{/if}

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.16";
+export declare const SDK_VERSION = "2.0.18";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.16";
+export const SDK_VERSION = "2.0.18";

package/lib/node/context/component-reference-types.d.ts

@@ -0,0 +1,15 @@
+import type { SvelteComponent } from 'svelte';
+export type ComponentReference = {
+    /**
+     * A dynamic import function pointing to the component.
+     * Example: `() => import('../components/my-component.svelte')`
+     * @returns A Promise that resolves to the loaded component.
+     */
+    load: () => Promise<{
+        default: typeof SvelteComponent<any>;
+    }>;
+    /**
+     * An optional fallback component to render while the dynamic component is loading.
+     */
+    fallback?: typeof SvelteComponent<any>;
+} | typeof SvelteComponent<any>;

package/lib/node/context/component-reference-types.js

@@ -0,0 +1 @@
+export {};

package/lib/node/context/types.d.ts

@@ -3,9 +3,10 @@ import type { ApiVersion } from '../types/api-version';
 import type { BuilderContent } from '../types/builder-content';
 import type { ComponentInfo } from '../types/components';
 import type { Dictionary, Nullable } from '../types/typescript';
+import type { ComponentReference } from './component-reference-types';
 import type { ExtraContextTypes } from './extra-context-types';
 export type RegisteredComponent = ComponentInfo & {
-    component: any;
+    component: ComponentReference;
 };
 export type RegisteredComponents = Dictionary<RegisteredComponent>;
 export type BuilderRenderState = Record<string, unknown>;

package/lib/node/functions/evaluate/node-runtime/node-runtime.js

@@ -67,7 +67,7 @@ export const setIvm = (ivm, options = {}) => {
     setIsolateContext(options);
 };
 // only mention the script for SDKs that have it.
-const SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === '@builder.io/sdk-react-nextjs' || SDK_NAME === '@builder.io/sdk-react' || SDK_NAME === '@builder.io/sdk-qwik';
+const SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === '@builder.io/sdk-react-nextjs' || SDK_NAME === '@builder.io/sdk-react' || SDK_NAME === '@builder.io/sdk-qwik' || SDK_NAME === '@builder.io/sdk-vue';
 const getIvm = () => {
     try {
         if (IVM_INSTANCE)

package/package.json

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

package/src/components/awaiter.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let load: () => Promise<any>;
+  export let fallback: any;
+  export let props: any;
+  export let attributes: any;
+</script>
+
+{#await load()}
+  {#if fallback}
+    <svelte:component this={fallback} />
+  {/if}
+  {:then { default: Component }}
+  <svelte:component
+    this={Component}
+    {...props}
+    attributes={attributes}
+  >
+    <slot />
+  </svelte:component>
+{/await}

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

@@ -15,13 +15,14 @@
   import { getBlockProperties } from "../../../functions/get-block-properties";
   import type { BuilderBlock } from "../../../types/builder-block";
   import type { Dictionary } from "../../../types/typescript";
+  import Awaiter from "../../awaiter.svelte";
   import type { Writable } from "svelte/store";
 
   export let includeBlockProps: InteractiveElementProps["includeBlockProps"];
   export let block: InteractiveElementProps["block"];
   export let context: InteractiveElementProps["context"];
-  export let wrapperProps: InteractiveElementProps["wrapperProps"];
   export let Wrapper: InteractiveElementProps["Wrapper"];
+  export let wrapperProps: InteractiveElementProps["wrapperProps"];
 
   $: attributes = () => {
     return includeBlockProps
@@ -42,6 +43,15 @@
   };
 </script>
 
-<svelte:component this={Wrapper} {...wrapperProps} attributes={attributes()}
-  ><slot /></svelte:component
->
+{#if Wrapper.load}
+  <Awaiter
+    load={Wrapper.load}
+    fallback={Wrapper.fallback}
+    props={wrapperProps}
+    attributes={attributes()}><slot /></Awaiter
+  >
+{:else}
+  <svelte:component this={Wrapper} {...wrapperProps} attributes={attributes()}
+    ><slot /></svelte:component
+  >
+{/if}

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.16"
+export const SDK_VERSION = "2.0.18"

package/src/context/component-reference-types.ts

@@ -0,0 +1,16 @@
+import type { SvelteComponent } from 'svelte';
+
+export type ComponentReference =
+  | {
+      /**
+       * A dynamic import function pointing to the component.
+       * Example: `() => import('../components/my-component.svelte')`
+       * @returns A Promise that resolves to the loaded component.
+       */
+      load: () => Promise<{ default: typeof SvelteComponent<any> }>;
+      /**
+       * An optional fallback component to render while the dynamic component is loading.
+       */
+      fallback?: typeof SvelteComponent<any>;
+    }
+  | typeof SvelteComponent<any>;

package/src/context/types.ts

@@ -3,9 +3,10 @@ import type { ApiVersion } from '../types/api-version';
 import type { BuilderContent } from '../types/builder-content';
 import type { ComponentInfo } from '../types/components';
 import type { Dictionary, Nullable } from '../types/typescript';
+import type { ComponentReference } from './component-reference-types';
 import type { ExtraContextTypes } from './extra-context-types';
 export type RegisteredComponent = ComponentInfo & {
-  component: any;
+  component: ComponentReference;
 };
 export type RegisteredComponents = Dictionary<RegisteredComponent>;
 export type BuilderRenderState = Record<string, unknown>;

package/src/functions/evaluate/node-runtime/node-runtime.ts

@@ -80,7 +80,7 @@ export const setIvm = (ivm: IsolatedVMImport, options: IsolateOptions = {}) => {
 };
 
 // only mention the script for SDKs that have it.
-const SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === '@builder.io/sdk-react-nextjs' || SDK_NAME === '@builder.io/sdk-react' || SDK_NAME === '@builder.io/sdk-qwik';
+const SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === '@builder.io/sdk-react-nextjs' || SDK_NAME === '@builder.io/sdk-react' || SDK_NAME === '@builder.io/sdk-qwik' || SDK_NAME === '@builder.io/sdk-vue';
 const getIvm = (): IsolatedVMImport => {
   try {
     if (IVM_INSTANCE) return IVM_INSTANCE;