@builder.io/sdk-svelte 2.0.16 → 2.0.21

package/lib/node/components/content/content.svelte

@@ -3,7 +3,9 @@ import { writable } from "svelte/store";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components";
 import { TARGET } from "../../constants/target";
 import ComponentsContext from "../../context/components.context";
+import { evaluate } from "../../functions/evaluate/evaluate";
 import { serializeIncludingFunctions } from "../../functions/register-component";
+import { logger } from "../../helpers/logger";
 import Blocks from "../blocks/blocks.svelte";
 import { getUpdateVariantVisibilityScript } from "../content-variants/helpers";
 import "../dynamic-div.svelte";
@@ -12,14 +14,14 @@ import EnableEditor from "./components/enable-editor.svelte";
 import ContentStyles from "./components/styles.svelte";
 import { getContentInitialValue, getRootStateInitialValue, } from "./content.helpers";
 import "./wrap-component-ref";
+export let apiKey;
+export let context = undefined;
 export let content = undefined;
 export let customComponents = undefined;
 export let model = undefined;
 export let data = undefined;
 export let locale = undefined;
-export let context = undefined;
 export let canTrack = undefined;
-export let apiKey;
 export let apiVersion = undefined;
 export let blocksWrapper = undefined;
 export let blocksWrapperProps = undefined;
@@ -91,6 +93,27 @@ let builderContextSignal = writable({
     BlocksWrapperProps: blocksWrapperProps || {},
     nonce: nonce || "",
 });
+if (!apiKey) {
+    logger.error("No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+}
+// run any dynamic JS code attached to content
+const jsCode = $builderContextSignal.content?.data?.jsCode;
+if (jsCode) {
+    evaluate({
+        code: jsCode,
+        context: context || {},
+        localState: undefined,
+        rootState: $builderContextSignal.rootState,
+        rootSetState: (newState) => {
+            $builderContextSignal.rootSetState?.(newState);
+        },
+        isExpression: false,
+        /**
+         * We don't want to cache the result of the JS code, since it's arbitrary side effect code.
+         */
+        enableCache: false,
+    });
+}
 setContext(ComponentsContext.key, {
     registeredComponents: registeredComponents,
 });

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

@@ -2,14 +2,14 @@ import { SvelteComponent } from "svelte";
 import type { ContentProps } from "./content.types";
 declare const __propDef: {
     props: {
+        apiKey: ContentProps["apiKey"];
+        context?: ContentProps["context"];
         content?: ContentProps["content"];
         customComponents?: ContentProps["customComponents"];
         model?: ContentProps["model"];
         data?: ContentProps["data"];
         locale?: ContentProps["locale"];
-        context?: ContentProps["context"];
         canTrack?: ContentProps["canTrack"];
-        apiKey: ContentProps["apiKey"];
         apiVersion?: ContentProps["apiVersion"];
         blocksWrapper?: ContentProps["blocksWrapper"];
         blocksWrapperProps?: ContentProps["blocksWrapperProps"];

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.21";

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

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

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

@@ -0,0 +1,17 @@
+import type { SvelteComponent } from 'svelte';
+export type ComponentReference = {
+    /**
+     * Either:
+     * - A dynamic import function pointing to the component.
+     * Example: `() => import('../components/my-component.svelte')`
+     * - A string representing the path to the component.
+     * Example: `'../components/my-component.svelte'`
+     */
+    load: string | (() => 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/browser-runtime/browser.d.ts

@@ -1,8 +1,2 @@
-import type { BuilderRenderState } from '../../../context/types';
 import type { ExecutorArgs } from '../helpers';
 export declare const runInBrowser: ({ code, builder, context, event, localState, rootSetState, rootState }: ExecutorArgs) => any;
-export declare function flattenState({ rootState, localState, rootSetState }: {
-    rootState: Record<string | symbol, any>;
-    localState: Record<string | symbol, any> | undefined;
-    rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
-}): BuilderRenderState;

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

@@ -1,4 +1,4 @@
-import { getFunctionArguments } from '../helpers';
+import { flattenState, getFunctionArguments } from '../helpers';
 export const runInBrowser = ({ code, builder, context, event, localState, rootSetState, rootState }) => {
     const functionArgs = getFunctionArguments({
         builder,
@@ -12,32 +12,3 @@ export const runInBrowser = ({ code, builder, context, event, localState, rootSe
     });
     return new Function(...functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
 };
-export function flattenState({ rootState, localState, rootSetState }) {
-    return new Proxy(rootState, {
-        get: (target, prop) => {
-            if (localState && prop in localState) {
-                return localState[prop];
-            }
-            const val = target[prop];
-            if (typeof val === 'object' && val !== null) {
-                return flattenState({
-                    rootState: val,
-                    localState: undefined,
-                    rootSetState: rootSetState ? subState => {
-                        target[prop] = subState;
-                        rootSetState(target);
-                    } : undefined
-                });
-            }
-            return val;
-        },
-        set: (target, prop, value) => {
-            if (localState && prop in localState) {
-                throw new Error('Writing to local state is not allowed as it is read-only.');
-            }
-            target[prop] = value;
-            rootSetState?.(target);
-            return true;
-        }
-    });
-}

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

@@ -1,32 +1,72 @@
 import { logger } from '../../../helpers/logger';
-import { set } from '../../set';
-import { getFunctionArguments } from '../helpers';
+import { flattenState, getFunctionArguments } from '../helpers';
 import Interpreter from './acorn-interpreter';
+/**
+ * https://stackoverflow.com/a/46503625
+ */
+function patchInterpreter() {
+    const originalGetProperty = Interpreter.prototype.getProperty;
+    const originalSetProperty = Interpreter.prototype.setProperty;
+    function newGetProperty(obj, name) {
+        if (obj == null || !obj._connected) {
+            return originalGetProperty.call(this, obj, name);
+        }
+        const value = obj._connected[name];
+        if (Array.isArray(value)) {
+            return this.nativeToPseudo(value);
+        }
+        if (typeof value === 'object') {
+            // if the value is an object itself, create another connected object
+            return this.createConnectedObject(value);
+        }
+        return value;
+    }
+    function newSetProperty(obj, name, value, opt_descriptor) {
+        if (obj == null || !obj._connected) {
+            return originalSetProperty.call(this, obj, name, value, opt_descriptor);
+        }
+        obj._connected[name] = this.pseudoToNative(value);
+    }
+    const getKeys = [];
+    const setKeys = [];
+    for (const key of Object.keys(Interpreter.prototype)) {
+        if (Interpreter.prototype[key] === originalGetProperty) {
+            getKeys.push(key);
+        }
+        if (Interpreter.prototype[key] === originalSetProperty) {
+            setKeys.push(key);
+        }
+    }
+    for (const key of getKeys) {
+        Interpreter.prototype[key] = newGetProperty;
+    }
+    for (const key of setKeys) {
+        Interpreter.prototype[key] = newSetProperty;
+    }
+    Interpreter.prototype.createConnectedObject = function (obj) {
+        const connectedObject = this.createObject(this.OBJECT);
+        connectedObject._connected = obj;
+        return connectedObject;
+    };
+}
+patchInterpreter();
 const processCode = (code) => {
-    return code.split('\n').map(line => {
-        const trimmed = line.trim();
-        // this async wrapper doesn't work in JS-interpreter, so we drop it.
-        if (line.includes('__awaiter'))
-            return undefined;
-        // we find all state setter expressions and append a call to setRootState afterwards
-        const isStateSetter = trimmed.startsWith('state.');
-        if (!isStateSetter)
-            return line;
-        const [lhs, rhs] = trimmed.split('=');
-        const setStr = lhs.replace('state.', '').trim();
-        const setExpr = `setRootState('${setStr}', ${rhs.trim()})`;
-        return `
-  ${line}
-  ${setExpr}
-  `;
-    }).filter(Boolean).join('\n');
+    return code
+        // strip async/await polyfill: remove anything before 'function main()'
+        .replace(/^.*?function main\(\)/, `
+var __awaiter = function (e, t, n, r) {return r()},
+__generator = function (e, t) { return t() };
+function main()`)
+        // replace ?. with .
+        .replace(/\?\./g, '.');
 };
 const getJSONValName = (val) => val + 'JSON';
 export const runInEdge = ({ builder, context, event, rootState, localState, rootSetState, code }) => {
-    const state = {
-        ...rootState,
-        ...localState
-    };
+    const state = flattenState({
+        rootState,
+        localState,
+        rootSetState
+    });
     const properties = getFunctionArguments({
         builder,
         context,
@@ -38,6 +78,9 @@ export const runInEdge = ({ builder, context, event, rootState, localState, root
      */
     const prependedCode = properties.map(([key]) => {
         const jsonValName = getJSONValName(key);
+        if (key === 'state') {
+            return ``;
+        }
         return `var ${key} = ${jsonValName} === undefined ? undefined : JSON.parse(${jsonValName});`;
     }).join('\n');
     const cleanedCode = processCode(code);
@@ -53,23 +96,19 @@ function theFunction() {
 }
 theFunction();
 `;
-    const setRootState = (prop, value) => {
-        const newState = set(state, prop, value);
-        rootSetState?.(newState);
-    };
     const initFunc = function (interpreter, globalObject) {
         /**
          * serialize all function args to JSON strings
          */
         properties.forEach(([key, val]) => {
-            const jsonVal = JSON.stringify(val);
-            interpreter.setProperty(globalObject, getJSONValName(key), jsonVal);
+            if (key === 'state') {
+                interpreter.setProperty(globalObject, key, interpreter.createConnectedObject(val), interpreter.READONLY_DESCRIPTOR);
+            }
+            else {
+                const jsonVal = JSON.stringify(val);
+                interpreter.setProperty(globalObject, getJSONValName(key), jsonVal);
+            }
         });
-        /**
-         * Add a JavaScript function "setRootState" to the interpreter's global object, that will be called whenever a
-         * state property is set. This function will update the state object.
-         */
-        interpreter.setProperty(globalObject, 'setRootState', interpreter.createNativeFunction(setRootState));
     };
     const myInterpreter = new Interpreter(transformed, initFunc);
     myInterpreter.run();

package/lib/node/functions/evaluate/helpers.d.ts

@@ -23,3 +23,8 @@ export declare const getFunctionArguments: ({ builder, context, event, state }:
 }) => [string, Event | BuilderRenderState | import("../../context/types").BuilderRenderContext | BuilderGlobals | undefined][];
 export declare const getBuilderGlobals: () => BuilderGlobals;
 export declare const parseCode: (code: string, { isExpression }: Pick<EvaluatorArgs, 'isExpression'>) => string;
+export declare function flattenState({ rootState, localState, rootSetState }: {
+    rootState: Record<string | symbol, any>;
+    localState: Record<string | symbol, any> | undefined;
+    rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
+}): BuilderRenderState;

package/lib/node/functions/evaluate/helpers.js

@@ -26,3 +26,32 @@ export const parseCode = (code, { isExpression = true }) => {
     const useCode = useReturn ? `return (${code});` : code;
     return useCode;
 };
+export function flattenState({ rootState, localState, rootSetState }) {
+    return new Proxy(rootState, {
+        get: (target, prop) => {
+            if (localState && prop in localState) {
+                return localState[prop];
+            }
+            const val = target[prop];
+            if (typeof val === 'object' && val !== null) {
+                return flattenState({
+                    rootState: val,
+                    localState: undefined,
+                    rootSetState: rootSetState ? subState => {
+                        target[prop] = subState;
+                        rootSetState(target);
+                    } : undefined
+                });
+            }
+            return val;
+        },
+        set: (target, prop, value) => {
+            if (localState && prop in localState) {
+                throw new Error('Writing to local state is not allowed as it is read-only.');
+            }
+            target[prop] = value;
+            rootSetState?.(target);
+            return true;
+        }
+    });
+}

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.21",
   "type": "module",
   "files": [
     "lib",

package/src/components/awaiter.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { SvelteComponent } from 'svelte';
+
+  export let load: () => Promise<{ default: typeof SvelteComponent<any> }>;
+  export let fallback: any;
+  export let props: any;
+  export let attributes: any;
+
+  const componentImport = typeof load === 'string' ? import(load) : load();
+</script>
+
+{#await componentImport}
+  {#if fallback}
+    <svelte:component this={fallback} />
+  {/if}
+{:then { default: Component }}
+  <svelte:component this={Component} {...props} {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/components/content/components/enable-editor.svelte

@@ -23,7 +23,6 @@
   import { evaluate } from "../../../functions/evaluate/index";
   import { fastClone } from "../../../functions/fast-clone";
   import { fetchOneEntry } from "../../../functions/get-content/index";
-  import { fetch } from "../../../functions/get-fetch";
   import { isBrowser } from "../../../functions/is-browser";
   import { isEditing } from "../../../functions/is-editing";
   import { isPreviewing } from "../../../functions/is-previewing";
@@ -31,7 +30,6 @@
   import { _track } from "../../../functions/track/index";
   import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction";
   import { getDefaultCanTrack } from "../../../helpers/canTrack";
-  import { logger } from "../../../helpers/logger";
   import { postPreviewContent } from "../../../helpers/preview-lru-cache/set";
   import { createEditorListener } from "../../../helpers/subscribe-to-editor";
   import {
@@ -121,23 +119,6 @@
       },
     })(event);
   }
-  function evaluateJsCode() {
-    // run any dynamic JS code attached to content
-    const jsCode = $builderContextSignal.content?.data?.jsCode;
-    if (jsCode) {
-      evaluate({
-        code: jsCode,
-        context: context || {},
-        localState: undefined,
-        rootState: $builderContextSignal.rootState,
-        rootSetState: $builderContextSignal.rootSetState,
-        /**
-         * We don't want to cache the result of the JS code, since it's arbitrary side effect code.
-         */
-        enableCache: false,
-      });
-    }
-  }
   function onClick(event: any) {
     if ($builderContextSignal.content) {
       const variationId = $builderContextSignal.content?.testVariationId;
@@ -294,6 +275,8 @@
   let httpReqsData = {};
   let httpReqsPending = {};
   let clicked = false;
+  runHttpRequests();
+  emitStateUpdate();
 
   onMount(() => {
     if (isBrowser()) {
@@ -328,16 +311,6 @@
       }
     }
   });
-  onMount(() => {
-    if (!apiKey) {
-      logger.error(
-        "No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop."
-      );
-    }
-    evaluateJsCode();
-    runHttpRequests();
-    emitStateUpdate();
-  });
 
   function onUpdateFn_0(..._args: any[]) {
     if (content) {
@@ -348,37 +321,21 @@
   $: onUpdateFn_0(...[content]);
 
   function onUpdateFn_1(..._args: any[]) {
-    evaluateJsCode();
-  }
-  $: onUpdateFn_1_builderContextSignal_content__data__jsCode =
-    $builderContextSignal.content?.data?.jsCode;
-  $: onUpdateFn_1(...[onUpdateFn_1_builderContextSignal_content__data__jsCode]);
-
-  function onUpdateFn_2(..._args: any[]) {
-    runHttpRequests();
-  }
-  $: onUpdateFn_2_builderContextSignal_content__data__httpRequests =
-    $builderContextSignal.content?.data?.httpRequests;
-  $: onUpdateFn_2(
-    ...[onUpdateFn_2_builderContextSignal_content__data__httpRequests]
-  );
-
-  function onUpdateFn_3(..._args: any[]) {
     emitStateUpdate();
   }
-  $: onUpdateFn_3_builderContextSignal_rootState =
+  $: onUpdateFn_1_builderContextSignal_rootState =
     $builderContextSignal.rootState;
-  $: onUpdateFn_3(...[onUpdateFn_3_builderContextSignal_rootState]);
+  $: onUpdateFn_1(...[onUpdateFn_1_builderContextSignal_rootState]);
 
-  function onUpdateFn_4(..._args: any[]) {
+  function onUpdateFn_2(..._args: any[]) {
     if (data) {
       mergeNewRootState(data);
     }
   }
 
-  $: onUpdateFn_4(...[data]);
+  $: onUpdateFn_2(...[data]);
 
-  function onUpdateFn_5(..._args: any[]) {
+  function onUpdateFn_3(..._args: any[]) {
     if (locale) {
       mergeNewRootState({
         locale: locale,
@@ -386,7 +343,7 @@
     }
   }
 
-  $: onUpdateFn_5(...[locale]);
+  $: onUpdateFn_3(...[locale]);
 
   setContext(builderContext.key, builderContextSignal);
 
@@ -411,10 +368,10 @@
     }}
     builder-content-id={$builderContextSignal.content?.id}
     builder-model={model}
+    className={getWrapperClassName(content?.testVariationId || content?.id)}
     {...{}}
     {...showContentProps()}
     {...contentWrapperProps}
-    class={getWrapperClassName(content?.testVariationId || content?.id)}
     on:initeditingbldr={(event) => {
       elementRef_onIniteditingbldr(event);
     }}

package/src/components/content/content.svelte

@@ -10,7 +10,9 @@
     BuilderRenderState,
     RegisteredComponents,
   } from "../../context/types";
+  import { evaluate } from "../../functions/evaluate/evaluate";
   import { serializeIncludingFunctions } from "../../functions/register-component";
+  import { logger } from "../../helpers/logger";
   import type { ComponentInfo } from "../../types/components";
   import type { Dictionary } from "../../types/typescript";
   import Blocks from "../blocks/blocks.svelte";
@@ -26,14 +28,14 @@
   import type { ContentProps } from "./content.types";
   import { wrapComponentRef } from "./wrap-component-ref";
 
+  export let apiKey: ContentProps["apiKey"];
+  export let context: ContentProps["context"] = undefined;
   export let content: ContentProps["content"] = undefined;
   export let customComponents: ContentProps["customComponents"] = undefined;
   export let model: ContentProps["model"] = undefined;
   export let data: ContentProps["data"] = undefined;
   export let locale: ContentProps["locale"] = undefined;
-  export let context: ContentProps["context"] = undefined;
   export let canTrack: ContentProps["canTrack"] = undefined;
-  export let apiKey: ContentProps["apiKey"];
   export let apiVersion: ContentProps["apiVersion"] = undefined;
   export let blocksWrapper: ContentProps["blocksWrapper"] = undefined;
   export let blocksWrapperProps: ContentProps["blocksWrapperProps"] = undefined;
@@ -110,6 +112,30 @@
     BlocksWrapperProps: blocksWrapperProps || {},
     nonce: nonce || "",
   });
+  if (!apiKey) {
+    logger.error(
+      "No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop."
+    );
+  }
+
+  // run any dynamic JS code attached to content
+  const jsCode = $builderContextSignal.content?.data?.jsCode;
+  if (jsCode) {
+    evaluate({
+      code: jsCode,
+      context: context || {},
+      localState: undefined,
+      rootState: $builderContextSignal.rootState,
+      rootSetState: (newState) => {
+        $builderContextSignal.rootSetState?.(newState);
+      },
+      isExpression: false,
+      /**
+       * We don't want to cache the result of the JS code, since it's arbitrary side effect code.
+       */
+      enableCache: false,
+    });
+  }
 
   setContext(ComponentsContext.key, {
     registeredComponents: registeredComponents,

package/src/constants/sdk-version.ts

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

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

@@ -0,0 +1,18 @@
+import type { SvelteComponent } from 'svelte';
+
+export type ComponentReference =
+  | {
+      /**
+       * Either:
+       * - A dynamic import function pointing to the component.
+       * Example: `() => import('../components/my-component.svelte')`
+       * - A string representing the path to the component.
+       * Example: `'../components/my-component.svelte'`
+       */
+      load: string | (() => 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>;