@async/framework 0.11.19 → 0.11.23

package/jsx/types.d.ts

@@ -0,0 +1,108 @@
+// Generated by scripts/build-framework-bundle.js. Do not edit by hand.
+// Shared JSX type declarations for @async/framework JSX profiles.
+
+export type AsyncJsxProfile = "runtime" | "buildtime";
+export type AsyncJSXElementType = string | ((props: Record<string, unknown>) => unknown);
+export type AsyncJSXElement = { readonly kind?: "async-jsx-node"; readonly type?: AsyncJSXElementType; readonly props?: Record<string, unknown>; readonly key?: string | number | null } | unknown;
+export type AsyncJSXChild = AsyncJSXElement | string | number | boolean | null | undefined;
+export type AsyncJSXChildren = AsyncJSXChild | readonly AsyncJSXChild[];
+export type AsyncEventHandler<E = Event, T extends EventTarget = EventTarget> = string | ((event: E & { currentTarget: T }) => unknown);
+export interface WritableSignal<T> {
+  readonly kind: "signal";
+  value: T;
+}
+export interface ComputedSignal<T> {
+  readonly kind: "computed";
+  readonly value: T;
+}
+export interface AsyncSignal<T> {
+  readonly kind: "asyncSignal";
+  readonly value: T | undefined;
+  readonly pending: boolean;
+  readonly error: unknown;
+  readonly version: number;
+}
+export interface JsxSignalIntent<T = unknown> {
+  readonly kind: "async-jsx-signal";
+  readonly source: T;
+}
+export type Signal<T> = WritableSignal<T> | ComputedSignal<T> | AsyncSignal<T>;
+export type SignalValue<T = unknown> = T | Signal<T> | JsxSignalIntent<T>;
+export type PrimitiveAttributeValue = string | number | boolean | null | undefined;
+export type DataAttributes = { [K in `data-${string}`]?: PrimitiveAttributeValue };
+export type AriaAttributes = { [K in `aria-${string}`]?: PrimitiveAttributeValue };
+export type CommonAttributes = DataAttributes & AriaAttributes & {
+  id?: string;
+  class?: string;
+  className?: string;
+  style?: string | Partial<CSSStyleDeclaration>;
+  title?: string;
+  role?: string;
+  tabIndex?: number;
+  hidden?: boolean;
+  children?: AsyncJSXChildren;
+  key?: string | number;
+};
+export type RuntimeProtocolEventProps = { [K in `on:${string}`]?: AsyncEventHandler | readonly unknown[] };
+export type RuntimeSignalBindingProps = { [K in `signal:${string}`]?: SignalValue };
+export type RuntimeClassToggleProps = { [K in `class:${string}`]?: boolean | SignalValue<boolean> };
+export type BuildtimeEventName = "Click" | "Input" | "Change" | "Submit" | "PointerEnter" | "PointerLeave" | "PointerDown" | "PointerUp" | "KeyDown" | "KeyUp" | "Focus" | "Blur";
+export type BuildtimeEventProps<T extends EventTarget = EventTarget> = { [K in `on${BuildtimeEventName}`]?: AsyncEventHandler<Event, T> };
+export type HTMLAttributeProps<T extends EventTarget> = CommonAttributes & {
+  value?: SignalValue<string | number | readonly string[]>;
+  checked?: SignalValue<boolean>;
+  disabled?: SignalValue<boolean>;
+  name?: string;
+  type?: string;
+  href?: string;
+  src?: string;
+  alt?: string;
+  width?: string | number;
+  height?: string | number;
+  for?: string;
+  htmlFor?: string;
+  placeholder?: string;
+  target?: string;
+  rel?: string;
+  ref?: T | ((element: T) => void);
+};
+export type SVGAttributeProps<T extends EventTarget> = CommonAttributes & {
+  viewBox?: string;
+  xmlns?: string;
+  fill?: string;
+  stroke?: string;
+  d?: string;
+  cx?: string | number;
+  cy?: string | number;
+  r?: string | number;
+  x?: string | number;
+  y?: string | number;
+  ref?: T | ((element: T) => void);
+};
+export type AsyncHTMLProps<Profile extends AsyncJsxProfile, T extends EventTarget = HTMLElement> = HTMLAttributeProps<T> & (Profile extends "runtime" ? RuntimeProtocolEventProps & RuntimeSignalBindingProps & RuntimeClassToggleProps : BuildtimeEventProps<T>);
+export type AsyncSVGProps<Profile extends AsyncJsxProfile, T extends EventTarget = SVGElement> = SVGAttributeProps<T> & (Profile extends "runtime" ? RuntimeProtocolEventProps & RuntimeSignalBindingProps & RuntimeClassToggleProps : BuildtimeEventProps<T>);
+export type AsyncHTMLElements<Profile extends AsyncJsxProfile> = { [Tag in keyof HTMLElementTagNameMap]: AsyncHTMLProps<Profile, HTMLElementTagNameMap[Tag]> } & { [Tag in `${string}-${string}`]: AsyncHTMLProps<Profile, HTMLElement> };
+export type AsyncSVGElements<Profile extends AsyncJsxProfile> = { [Tag in keyof SVGElementTagNameMap]: AsyncSVGProps<Profile, SVGElementTagNameMap[Tag]> };
+export type RuntimeIntrinsicElements = AsyncHTMLElements<"runtime"> & AsyncSVGElements<"runtime">;
+export type BuildtimeIntrinsicElements = AsyncHTMLElements<"buildtime"> & AsyncSVGElements<"buildtime">;
+export type PropsOf<Tag extends keyof RuntimeIntrinsicElements | keyof BuildtimeIntrinsicElements, Profile extends AsyncJsxProfile = "buildtime"> = Profile extends "runtime" ? RuntimeIntrinsicElements[Extract<Tag, keyof RuntimeIntrinsicElements>] : BuildtimeIntrinsicElements[Extract<Tag, keyof BuildtimeIntrinsicElements>];
+export namespace AsyncJSX {
+  type Element = AsyncJSXElement;
+  interface ElementChildrenAttribute {
+    children: AsyncJSXChildren;
+  }
+}
+export namespace RuntimeJSX {
+  type Element = AsyncJSXElement;
+  interface ElementChildrenAttribute {
+    children: AsyncJSXChildren;
+  }
+  type IntrinsicElements = RuntimeIntrinsicElements;
+}
+export namespace BuildtimeJSX {
+  type Element = AsyncJSXElement;
+  interface ElementChildrenAttribute {
+    children: AsyncJSXChildren;
+  }
+  type IntrinsicElements = BuildtimeIntrinsicElements;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@async/framework",
-  "version": "0.11.19",
+  "version": "0.11.23",
   "description": "No-build Loader app runtime with browser and server entrypoints, signals, command events, route partials, cache split, SSR activation, and streaming boundaries.",
   "type": "module",
   "sideEffects": false,
@@ -65,6 +65,36 @@
       "import": "./jsx.js",
       "default": "./jsx.js"
     },
+    "./jsx/runtime": {
+      "types": "./jsx/runtime.d.ts",
+      "import": "./jsx/runtime.js",
+      "default": "./jsx/runtime.js"
+    },
+    "./jsx/runtime/jsx-runtime": {
+      "types": "./jsx/runtime/jsx-runtime.d.ts",
+      "import": "./jsx/runtime/jsx-runtime.js",
+      "default": "./jsx/runtime/jsx-runtime.js"
+    },
+    "./jsx/runtime/jsx-dev-runtime": {
+      "types": "./jsx/runtime/jsx-dev-runtime.d.ts",
+      "import": "./jsx/runtime/jsx-dev-runtime.js",
+      "default": "./jsx/runtime/jsx-dev-runtime.js"
+    },
+    "./jsx/buildtime": {
+      "types": "./jsx/buildtime.d.ts",
+      "import": "./jsx/buildtime.js",
+      "default": "./jsx/buildtime.js"
+    },
+    "./jsx/buildtime/jsx-runtime": {
+      "types": "./jsx/buildtime/jsx-runtime.d.ts",
+      "import": "./jsx/buildtime/jsx-runtime.js",
+      "default": "./jsx/buildtime/jsx-runtime.js"
+    },
+    "./jsx/buildtime/jsx-dev-runtime": {
+      "types": "./jsx/buildtime/jsx-dev-runtime.d.ts",
+      "import": "./jsx/buildtime/jsx-dev-runtime.js",
+      "default": "./jsx/buildtime/jsx-dev-runtime.js"
+    },
     "./vite": {
       "types": "./vite.d.ts",
       "import": "./vite.js",
@@ -102,11 +132,25 @@
     "package.json",
     "server.js",
     "jsx.d.ts",
+    "jsx/runtime.d.ts",
+    "jsx/runtime/jsx-runtime.d.ts",
+    "jsx/runtime/jsx-dev-runtime.d.ts",
+    "jsx/buildtime.d.ts",
+    "jsx/buildtime/jsx-runtime.d.ts",
+    "jsx/buildtime/jsx-dev-runtime.d.ts",
+    "jsx/types.d.ts",
     "vite.d.ts",
     "runtime.d.ts",
     "runtime/signals.d.ts",
     "runtime/events.d.ts",
     "jsx.js",
+    "jsx/runtime.js",
+    "jsx/runtime/jsx-runtime.js",
+    "jsx/runtime/jsx-dev-runtime.js",
+    "jsx/buildtime.js",
+    "jsx/buildtime/jsx-runtime.js",
+    "jsx/buildtime/jsx-dev-runtime.js",
+    "jsx/jsx-runtime.js",
     "vite.js",
     "build-profile.js",
     "build-optimizer.js",

package/server.js

@@ -2044,10 +2044,11 @@ const __componentModule = (() => {
   const { createLazyRegistry, isLazyDescriptor } = __lazyRegistryModule;
   const componentKind = Symbol.for("@async/framework.component");
   let componentCounter = 0;
+  let defineComponentWarned = false;
 
-  function defineComponent(fn) {
+  function component(fn) {
     if (typeof fn !== "function") {
-      throw new TypeError("defineComponent(fn) requires a function.");
+      throw new TypeError("component(fn) requires a function.");
     }
     Object.defineProperty(fn, componentKind, {
       configurable: true,
@@ -2056,7 +2057,13 @@ const __componentModule = (() => {
     return fn;
   }
 
-  const component = defineComponent;
+  function defineComponent(fn) {
+    if (!defineComponentWarned) {
+      defineComponentWarned = true;
+      console.warn?.("defineComponent(...) is deprecated. Use component(...) instead.");
+    }
+    return component(fn);
+  }
 
   function createComponentRegistry(initialMap = {}, options = {}) {
     const registryStore = options.registry ?? createRegistryStore();
@@ -2255,10 +2262,11 @@ const __componentModule = (() => {
   }
 
   function createComponentContext({ runtime, scope, cleanups, attachHooks, visibleHooks, intersectionHooks, destroyHooks, renderScopedTemplate }) {
-    const { signals, handlers, loader, server, router, cache, scheduler } = runtime;
+    const { signals, handlers, loader, server, router, cache, components, scheduler } = runtime;
     const generatedHandlers = new WeakMap();
     let generatedHandlerCounter = 0;
     let generatedSignalCounter = 0;
+    let generatedSlotCounter = 0;
     const context = {
       scope,
       signals,
@@ -2267,6 +2275,7 @@ const __componentModule = (() => {
       server,
       router,
       cache,
+      components,
       scheduler,
 
       signal(name, initial) {
@@ -2346,6 +2355,38 @@ const __componentModule = (() => {
         return rawHtml(child.html);
       },
 
+      slot(Child, propsOrFn = {}) {
+        let target;
+        let latestProps = {};
+        const renderSlot = () => {
+          if (!target) {
+            return;
+          }
+          loader.mount(target, Child, latestProps);
+        };
+        const attach = registerScopedHandler(`slot.${++generatedSlotCounter}.attach`, function ({ element }) {
+          target = element;
+          renderSlot();
+          return () => {
+            target = undefined;
+          };
+        });
+        const cleanup = signals.effect(() => {
+          latestProps = typeof propsOrFn === "function" ? propsOrFn.call(context) : propsOrFn;
+          renderSlot();
+        }, {
+          scheduler,
+          phase: "effect",
+          scope,
+          key: `slot:${generatedSlotCounter}`
+        });
+        cleanups.push(cleanup);
+        return {
+          attach,
+          render: renderSlot
+        };
+      },
+
       suspense(signalRef, views) {
         const id = signalRef?.id;
         if (!id) {
@@ -2465,7 +2506,7 @@ const __componentModule = (() => {
   function componentName(Component) {
     return Component.displayName || Component.name || "anonymous";
   }
-  return { defineComponent, createComponentRegistry, isComponent, renderComponent, component };
+  return { component, defineComponent, createComponentRegistry, isComponent, renderComponent };
 })();
 
 const __serverModule = (() => {
@@ -3522,7 +3563,7 @@ const __loaderModule = (() => {
   const { matchAttribute, normalizeAttributeConfig, readAttribute } = __attributesModule;
   const inlineBindingPrefix = "__async:inline:";
 
-  function Loader({ root, signals, handlers, server, router, cache, attributes, scheduler } = {}) {
+  function Loader({ root, signals, handlers, server, router, cache, components, attributes, scheduler } = {}) {
     const documentRef = root?.ownerDocument ?? root ?? globalThis.document;
     const rootNode = root ?? documentRef;
     const signalRegistry = signals ?? createSignalRegistry();
@@ -3538,6 +3579,7 @@ const __loaderModule = (() => {
     const intersectionBindings = new WeakMap();
     const boundaryState = new WeakMap();
     const renderingBoundaries = new WeakSet();
+    const componentBindings = new WeakSet();
     const inlineBindings = new Map();
     const scopedCleanups = new WeakMap();
     let inlineBindingCounter = 0;
@@ -3550,6 +3592,7 @@ const __loaderModule = (() => {
       server,
       router,
       cache,
+      components,
       scheduler: schedulerInstance,
       attributes: attributeConfig,
 
@@ -3566,6 +3609,7 @@ const __loaderModule = (() => {
         bindClassAttributes(rootOrFragment);
         bindEventAttributes(rootOrFragment);
         bindBoundaries(rootOrFragment);
+        bindComponentAttributes(rootOrFragment);
         runPseudoEvents(rootOrFragment);
         return api;
       },
@@ -3591,6 +3635,7 @@ const __loaderModule = (() => {
           server: api.server,
           router: api.router,
           cache: api.cache,
+          components: api.components,
           scheduler: schedulerInstance,
           attributes: attributeConfig
         });
@@ -3885,6 +3930,32 @@ const __loaderModule = (() => {
       }
     }
 
+    function bindComponentAttributes(scope) {
+      for (const element of elementsIn(scope)) {
+        const id = readAttribute(element, attributeConfig, "async", "component");
+        if (id == null) {
+          continue;
+        }
+        if (componentBindings.has(element)) {
+          continue;
+        }
+        if (!components?.resolve) {
+          throw new Error(`Component "${id}" cannot be mounted because no component registry is available.`);
+        }
+        const Component = components.resolve(id);
+        if (!Component) {
+          throw new Error(`Component "${id}" was not found.`);
+        }
+        componentBindings.add(element);
+        try {
+          api.mount(element, Component);
+        } catch (error) {
+          componentBindings.delete(element);
+          throw error;
+        }
+      }
+    }
+
     function renderBoundary(boundary) {
       const state = boundaryState.get(boundary);
       if (!state) {
@@ -5264,9 +5335,12 @@ const __appModule = (() => {
     const registry = createRegistryStore(undefined, { target: "browser" });
     const runtimes = new Set();
     const createRuntime = options.createRuntime ?? createApp;
+    const loaderFacade = createLoaderFacade();
+    let currentRuntime;
 
     const app = {
       registry,
+      loader: loaderFacade,
 
       use(typeOrModule, entries) {
         const normalized = normalizeUse(typeOrModule, entries);
@@ -5283,7 +5357,7 @@ const __appModule = (() => {
 
       start(options = {}) {
         const runtime = createRuntime(app, options).start();
-        app.runtime = runtime;
+        setCurrentRuntime(runtime);
         return runtime;
       },
 
@@ -5292,12 +5366,12 @@ const __appModule = (() => {
       },
 
       detachRoot(root) {
-        return app.runtime?.detachRoot(root) ?? app;
+        return currentRuntime?.detachRoot(root) ?? app;
       },
 
       applySnapshot(snapshot, snapshotOptions = {}) {
-        if (app.runtime) {
-          app.runtime.applySnapshot(snapshot, snapshotOptions);
+        if (currentRuntime) {
+          currentRuntime.applySnapshot(snapshot, snapshotOptions);
           return app;
         }
         appendSnapshotDeclarations(registry, snapshot, snapshotOptions);
@@ -5305,7 +5379,11 @@ const __appModule = (() => {
       },
 
       inspectRoots() {
-        return app.runtime?.inspectRoots() ?? { count: 0, roots: [] };
+        return currentRuntime?.inspectRoots() ?? { count: 0, roots: [] };
+      },
+
+      inspectRuntime() {
+        return inspectRuntimeState(currentRuntime, loaderFacade);
       },
 
       _attach(runtime) {
@@ -5315,14 +5393,36 @@ const __appModule = (() => {
 
       _detach(runtime) {
         runtimes.delete(runtime);
+        if (currentRuntime === runtime) {
+          currentRuntime = latestRuntime(runtimes);
+        }
       }
     };
 
+    Object.defineProperties(app, {
+      _runtime: {
+        get() {
+          return currentRuntime;
+        }
+      },
+      _setRuntime: {
+        value(runtime) {
+          setCurrentRuntime(runtime);
+        }
+      }
+    });
+
     if (initial) {
       app.use(initial);
     }
 
     return app;
+
+    function setCurrentRuntime(runtime) {
+      if (runtime) {
+        currentRuntime = runtime;
+      }
+    }
   }
 
   function createApp(appOrDefinition = Async, options = {}) {
@@ -5385,6 +5485,7 @@ const __appModule = (() => {
           return runtime;
         }
         started = true;
+        app._setRuntime?.(runtime);
 
         if (target !== "server") {
           configureServerContext({ cache: browserCache });
@@ -5394,6 +5495,7 @@ const __appModule = (() => {
             registerRootLoader(loader.root, loader);
             loader.start();
             startRouterFor(loader.root);
+            app.loader._setCurrent(runtime.loader);
           } else if (startupRoot != null) {
             runtime.attachRoot(startupRoot);
           }
@@ -5430,6 +5532,7 @@ const __appModule = (() => {
               handlers,
               server,
               cache: browserCache,
+              components,
               scheduler,
               attributes
             });
@@ -5438,6 +5541,7 @@ const __appModule = (() => {
         configureServerContext({ cache: browserCache });
         signals._setContext?.({ server, loader: runtime.loader, cache: browserCache, scheduler });
         startRouterFor(root);
+        app.loader._setCurrent(runtime.loader);
         return runtime;
       },
 
@@ -5447,6 +5551,7 @@ const __appModule = (() => {
           return runtime;
         }
         if (root == null) {
+          const detachedLoaders = [...new Set(rootLoaders.values())];
           for (const rootLoader of new Set(rootLoaders.values())) {
             rootLoader.destroy?.();
           }
@@ -5457,6 +5562,7 @@ const __appModule = (() => {
           loader = undefined;
           runtime.loader = undefined;
           runtime.router = undefined;
+          app.loader._clearCurrent(detachedLoaders);
           return runtime;
         }
         const rootLoader = rootLoaders.get(root);
@@ -5475,6 +5581,9 @@ const __appModule = (() => {
           runtime.router = undefined;
           if (next) {
             startRouterFor(next.root);
+            app.loader._setCurrent(next);
+          } else {
+            app.loader._clearCurrent(rootLoader);
           }
         }
         return runtime;
@@ -5562,6 +5671,8 @@ const __appModule = (() => {
         if (loader && !destroyedLoaders.has(loader)) {
           loader?.destroy?.();
         }
+        app.loader._clearCurrent([...destroyedLoaders, loader]);
+        app.loader._rejectPending(new Error("Async loader queue was cleared because the runtime was destroyed."));
         signals.destroy?.();
         if (ownsScheduler) {
           scheduler.destroy();
@@ -5573,6 +5684,22 @@ const __appModule = (() => {
       }
     };
 
+    Object.defineProperties(runtime, {
+      _inspect: {
+        value() {
+          return {
+            active: !destroyed,
+            started,
+            destroyed,
+            target,
+            roots: runtime.inspectRoots(),
+            loader: app.loader.inspect(),
+            router: Boolean(runtime.router)
+          };
+        }
+      }
+    });
+
     server.cache = serverCache;
     runtime.server.cache = serverCache;
     runtime.applySnapshot(initialSnapshot, { strict: options.strictSnapshots ?? true });
@@ -5649,6 +5776,107 @@ const __appModule = (() => {
 
   const Async = defineApp();
 
+  function createLoaderFacade() {
+    let current;
+    const pending = [];
+    const readyWaiters = [];
+
+    const facade = {
+      get current() {
+        return current;
+      },
+
+      ready() {
+        if (current) {
+          return Promise.resolve(current);
+        }
+        return new Promise((resolve, reject) => {
+          readyWaiters.push({ resolve, reject });
+        });
+      },
+
+      scan(rootOrFragment) {
+        return enqueue("scan", [rootOrFragment]);
+      },
+
+      swap(boundaryId, fragmentOrTemplate) {
+        return enqueue("swap", [boundaryId, fragmentOrTemplate]);
+      },
+
+      mount(target, Component, props) {
+        return enqueue("mount", [target, Component, props]);
+      },
+
+      inspect() {
+        return {
+          ready: Boolean(current),
+          pending: pending.length,
+          root: current?.root
+        };
+      }
+    };
+
+    Object.defineProperties(facade, {
+      _setCurrent: {
+        value(loader) {
+          if (!loader) {
+            return;
+          }
+          current = loader;
+          while (readyWaiters.length > 0) {
+            readyWaiters.shift().resolve(loader);
+          }
+          flushPending(loader);
+        }
+      },
+      _clearCurrent: {
+        value(loaderOrLoaders) {
+          if (loaderOrLoaders === undefined) {
+            current = undefined;
+            return;
+          }
+          const loaders = Array.isArray(loaderOrLoaders) ? loaderOrLoaders : [loaderOrLoaders];
+          if (loaders.includes(current)) {
+            current = undefined;
+          }
+        }
+      },
+      _rejectPending: {
+        value(error) {
+          while (pending.length > 0) {
+            pending.shift().reject(error);
+          }
+          while (readyWaiters.length > 0) {
+            readyWaiters.shift().reject(error);
+          }
+        }
+      }
+    });
+
+    return facade;
+
+    function enqueue(method, args) {
+      if (current) {
+        return invoke(current, method, args);
+      }
+      return new Promise((resolve, reject) => {
+        pending.push({ method, args, resolve, reject });
+      });
+    }
+
+    function flushPending(loader) {
+      while (pending.length > 0) {
+        const operation = pending.shift();
+        invoke(loader, operation.method, operation.args)
+          .then(operation.resolve, operation.reject);
+      }
+    }
+
+    async function invoke(loader, method, args) {
+      return loader[method](...args);
+    }
+  }
+
   function readSnapshot(root = globalThis.document, { attributes } = {}) {
     const attributeConfig = normalizeAttributeConfig(attributes);
     const snapshotAttr = attributeName(attributeConfig, "async", "snapshot");
@@ -5799,10 +6027,33 @@ const __appModule = (() => {
   }
 
   function ensureRuntime(app) {
-    if (!app.runtime) {
+    if (!app._runtime) {
       app.start();
     }
-    return app.runtime;
+    return app._runtime;
+  }
+
+  function latestRuntime(runtimes) {
+    let latest;
+    for (const runtime of runtimes) {
+      latest = runtime;
+    }
+    return latest;
+  }
+
+  function inspectRuntimeState(runtime, loaderFacade) {
+    if (runtime?._inspect) {
+      return runtime._inspect();
+    }
+    return {
+      active: Boolean(runtime),
+      started: Boolean(runtime),
+      destroyed: false,
+      target: runtime?.target,
+      roots: runtime?.inspectRoots?.() ?? { count: 0, roots: [] },
+      loader: loaderFacade.inspect(),
+      router: Boolean(runtime?.router)
+    };
   }
 
   function applySnapshotToRuntime(runtime, snapshot = {}, options = {}) {
@@ -6749,7 +7000,7 @@ const __boundaryReceiverModule = (() => {
     if (options.receiver && typeof options.receiver.apply === "function") {
       return options.receiver;
     }
-    const runtime = options.runtime ?? globalThis.Async?.runtime;
+    const runtime = options.runtime ?? globalThis.Async?._runtime;
     const loader = options.loader ?? runtime?.loader;
     if (!loader) {
       throw new TypeError("AsyncStream requires receiver, loader, or runtime.loader.");
@@ -7346,7 +7597,7 @@ const __elementsModule = (() => {
         if (this.__asyncAttached) {
           return;
         }
-        const runtime = app.runtime ?? app.start?.();
+        const runtime = app._runtime ?? app.start?.();
         runtime?.attachRoot?.(this);
         this.__asyncRuntime = runtime;
         this.__asyncAttached = true;