@builder.io/sdk-svelte 2.0.15 → 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.15";
+export declare const SDK_VERSION = "2.0.18";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.15";
+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/choose-eval.js

@@ -21,4 +21,6 @@ import { shouldForceBrowserRuntimeInNode } from './should-force-browser-runtime-
  * Even though we have separate runtimes for browser/node/edge, sometimes frameworks will
  * end up sending the server runtime code to the browser (most notably in dev mode).
  */
-export const chooseBrowserOrServerEval = (args) => isBrowser() || shouldForceBrowserRuntimeInNode() ? runInBrowser(args) : evaluator(args);
+export const chooseBrowserOrServerEval = (args) => isBrowser() || shouldForceBrowserRuntimeInNode({
+    shouldLogWarning: true
+}) ? runInBrowser(args) : evaluator(args);

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

@@ -1,3 +1,4 @@
+import { shouldForceBrowserRuntimeInNode } from '../should-force-browser-runtime-in-node';
 /**
  * This file:
  * - imports `isolated-vm`, which can only be made from a file that never runs
@@ -23,6 +24,14 @@ import { setIvm } from './node-runtime';
  * - Qwik's `entry.ssr.tsx` file
  */
 export const initializeNodeRuntime = (args) => {
+    /**
+     * skip initialization if we are on an arm64 machine and running node 20
+     */
+    if (shouldForceBrowserRuntimeInNode({
+        shouldLogWarning: true
+    })) {
+        return;
+    }
     const { ivmIsolateOptions } = args || {};
     setIvm(ivm, ivmIsolateOptions);
 };

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/browser/functions/evaluate/should-force-browser-runtime-in-node.d.ts

@@ -1 +1,3 @@
-export declare const shouldForceBrowserRuntimeInNode: () => boolean;
+export declare const shouldForceBrowserRuntimeInNode: ({ shouldLogWarning }: {
+    shouldLogWarning: boolean;
+}) => boolean;

package/lib/browser/functions/evaluate/should-force-browser-runtime-in-node.js

@@ -1,16 +1,18 @@
 import { logger } from '../../helpers/logger';
 import { isNodeRuntime } from '../is-node-runtime';
-export const shouldForceBrowserRuntimeInNode = () => {
+export const shouldForceBrowserRuntimeInNode = ({ shouldLogWarning }) => {
     if (!isNodeRuntime())
         return false;
     const isArm64 = process.arch === 'arm64';
     const isNode20 = process.version.startsWith('v20');
     const hasNoNodeSnapshotNodeOption = process.env.NODE_OPTIONS?.includes('--no-node-snapshot');
     if (isArm64 && isNode20 && !hasNoNodeSnapshotNodeOption) {
-        logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
+        if (shouldLogWarning) {
+            logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
     If you would like to use the \`isolated-vm\` package on this machine, please provide the \`NODE_OPTIONS=--no-node-snapshot\` config to your Node process.
     See https://github.com/BuilderIO/builder/blob/main/packages/sdks/README.md#node-v20--m1-macs-apple-silicon-support for more information.
     `);
+        }
         return true;
     }
     return false;

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.15";
+export declare const SDK_VERSION = "2.0.18";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.15";
+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/choose-eval.js

@@ -21,4 +21,6 @@ import { shouldForceBrowserRuntimeInNode } from './should-force-browser-runtime-
  * Even though we have separate runtimes for browser/node/edge, sometimes frameworks will
  * end up sending the server runtime code to the browser (most notably in dev mode).
  */
-export const chooseBrowserOrServerEval = (args) => isBrowser() || shouldForceBrowserRuntimeInNode() ? runInBrowser(args) : evaluator(args);
+export const chooseBrowserOrServerEval = (args) => isBrowser() || shouldForceBrowserRuntimeInNode({
+    shouldLogWarning: true
+}) ? runInBrowser(args) : evaluator(args);

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

@@ -1,3 +1,4 @@
+import { shouldForceBrowserRuntimeInNode } from '../should-force-browser-runtime-in-node';
 /**
  * This file:
  * - imports `isolated-vm`, which can only be made from a file that never runs
@@ -23,6 +24,14 @@ import { setIvm } from './node-runtime';
  * - Qwik's `entry.ssr.tsx` file
  */
 export const initializeNodeRuntime = (args) => {
+    /**
+     * skip initialization if we are on an arm64 machine and running node 20
+     */
+    if (shouldForceBrowserRuntimeInNode({
+        shouldLogWarning: true
+    })) {
+        return;
+    }
     const { ivmIsolateOptions } = args || {};
     setIvm(ivm, ivmIsolateOptions);
 };

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/edge/functions/evaluate/should-force-browser-runtime-in-node.d.ts

@@ -1 +1,3 @@
-export declare const shouldForceBrowserRuntimeInNode: () => boolean;
+export declare const shouldForceBrowserRuntimeInNode: ({ shouldLogWarning }: {
+    shouldLogWarning: boolean;
+}) => boolean;

package/lib/edge/functions/evaluate/should-force-browser-runtime-in-node.js

@@ -1,16 +1,18 @@
 import { logger } from '../../helpers/logger';
 import { isNodeRuntime } from '../is-node-runtime';
-export const shouldForceBrowserRuntimeInNode = () => {
+export const shouldForceBrowserRuntimeInNode = ({ shouldLogWarning }) => {
     if (!isNodeRuntime())
         return false;
     const isArm64 = process.arch === 'arm64';
     const isNode20 = process.version.startsWith('v20');
     const hasNoNodeSnapshotNodeOption = process.env.NODE_OPTIONS?.includes('--no-node-snapshot');
     if (isArm64 && isNode20 && !hasNoNodeSnapshotNodeOption) {
-        logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
+        if (shouldLogWarning) {
+            logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
     If you would like to use the \`isolated-vm\` package on this machine, please provide the \`NODE_OPTIONS=--no-node-snapshot\` config to your Node process.
     See https://github.com/BuilderIO/builder/blob/main/packages/sdks/README.md#node-v20--m1-macs-apple-silicon-support for more information.
     `);
+        }
         return true;
     }
     return false;

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.15";
+export declare const SDK_VERSION = "2.0.18";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.15";
+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/choose-eval.js

@@ -21,4 +21,6 @@ import { shouldForceBrowserRuntimeInNode } from './should-force-browser-runtime-
  * Even though we have separate runtimes for browser/node/edge, sometimes frameworks will
  * end up sending the server runtime code to the browser (most notably in dev mode).
  */
-export const chooseBrowserOrServerEval = (args) => isBrowser() || shouldForceBrowserRuntimeInNode() ? runInBrowser(args) : evaluator(args);
+export const chooseBrowserOrServerEval = (args) => isBrowser() || shouldForceBrowserRuntimeInNode({
+    shouldLogWarning: true
+}) ? runInBrowser(args) : evaluator(args);

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

@@ -1,3 +1,4 @@
+import { shouldForceBrowserRuntimeInNode } from '../should-force-browser-runtime-in-node';
 /**
  * This file:
  * - imports `isolated-vm`, which can only be made from a file that never runs
@@ -23,6 +24,14 @@ import { setIvm } from './node-runtime';
  * - Qwik's `entry.ssr.tsx` file
  */
 export const initializeNodeRuntime = (args) => {
+    /**
+     * skip initialization if we are on an arm64 machine and running node 20
+     */
+    if (shouldForceBrowserRuntimeInNode({
+        shouldLogWarning: true
+    })) {
+        return;
+    }
     const { ivmIsolateOptions } = args || {};
     setIvm(ivm, ivmIsolateOptions);
 };

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/lib/node/functions/evaluate/should-force-browser-runtime-in-node.d.ts

@@ -1 +1,3 @@
-export declare const shouldForceBrowserRuntimeInNode: () => boolean;
+export declare const shouldForceBrowserRuntimeInNode: ({ shouldLogWarning }: {
+    shouldLogWarning: boolean;
+}) => boolean;

package/lib/node/functions/evaluate/should-force-browser-runtime-in-node.js

@@ -1,16 +1,18 @@
 import { logger } from '../../helpers/logger';
 import { isNodeRuntime } from '../is-node-runtime';
-export const shouldForceBrowserRuntimeInNode = () => {
+export const shouldForceBrowserRuntimeInNode = ({ shouldLogWarning }) => {
     if (!isNodeRuntime())
         return false;
     const isArm64 = process.arch === 'arm64';
     const isNode20 = process.version.startsWith('v20');
     const hasNoNodeSnapshotNodeOption = process.env.NODE_OPTIONS?.includes('--no-node-snapshot');
     if (isArm64 && isNode20 && !hasNoNodeSnapshotNodeOption) {
-        logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
+        if (shouldLogWarning) {
+            logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
     If you would like to use the \`isolated-vm\` package on this machine, please provide the \`NODE_OPTIONS=--no-node-snapshot\` config to your Node process.
     See https://github.com/BuilderIO/builder/blob/main/packages/sdks/README.md#node-v20--m1-macs-apple-silicon-support for more information.
     `);
+        }
         return true;
     }
     return false;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "2.0.15",
+  "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.15"
+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/choose-eval.ts

@@ -24,4 +24,6 @@ import { shouldForceBrowserRuntimeInNode } from './should-force-browser-runtime-
  * Even though we have separate runtimes for browser/node/edge, sometimes frameworks will
  * end up sending the server runtime code to the browser (most notably in dev mode).
  */
-export const chooseBrowserOrServerEval = (args: ExecutorArgs) => isBrowser() || shouldForceBrowserRuntimeInNode() ? runInBrowser(args) : evaluator(args)
+export const chooseBrowserOrServerEval = (args: ExecutorArgs) => isBrowser() || shouldForceBrowserRuntimeInNode({
+  shouldLogWarning: true
+}) ? runInBrowser(args) : evaluator(args)

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

@@ -1,3 +1,4 @@
+import { shouldForceBrowserRuntimeInNode } from '../should-force-browser-runtime-in-node';
 /**
  * This file:
  * - imports `isolated-vm`, which can only be made from a file that never runs
@@ -27,6 +28,14 @@ import type { IsolateOptions } from 'isolated-vm';
 export const initializeNodeRuntime = (args?: {
   ivmIsolateOptions?: IsolateOptions;
 }) => {
+  /**
+   * skip initialization if we are on an arm64 machine and running node 20
+   */
+  if (shouldForceBrowserRuntimeInNode({
+    shouldLogWarning: true
+  })) {
+    return;
+  }
   const {
     ivmIsolateOptions
   } = args || {};

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;

package/src/functions/evaluate/should-force-browser-runtime-in-node.ts

@@ -1,15 +1,21 @@
 import { logger } from '../../helpers/logger';
 import { isNodeRuntime } from '../is-node-runtime';
-export const shouldForceBrowserRuntimeInNode = () => {
+export const shouldForceBrowserRuntimeInNode = ({
+  shouldLogWarning
+}: {
+  shouldLogWarning: boolean;
+}) => {
   if (!isNodeRuntime()) return false;
   const isArm64 = process.arch === 'arm64';
   const isNode20 = process.version.startsWith('v20');
   const hasNoNodeSnapshotNodeOption = process.env.NODE_OPTIONS?.includes('--no-node-snapshot');
   if (isArm64 && isNode20 && !hasNoNodeSnapshotNodeOption) {
-    logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
+    if (shouldLogWarning) {
+      logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
     If you would like to use the \`isolated-vm\` package on this machine, please provide the \`NODE_OPTIONS=--no-node-snapshot\` config to your Node process.
     See https://github.com/BuilderIO/builder/blob/main/packages/sdks/README.md#node-v20--m1-macs-apple-silicon-support for more information.
     `);
+    }
     return true;
   }
   return false;