@async/framework 0.11.22 → 0.11.23

package/framework.ts

@@ -2045,10 +2045,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,
@@ -2057,7 +2058,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();
@@ -2256,10 +2263,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,
@@ -2268,6 +2276,7 @@ const __componentModule = (() => {
       server,
       router,
       cache,
+      components,
       scheduler,
 
       signal(name, initial) {
@@ -2347,6 +2356,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) {
@@ -2466,7 +2507,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 = (() => {
@@ -3523,7 +3564,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();
@@ -3539,6 +3580,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;
@@ -3551,6 +3593,7 @@ const __loaderModule = (() => {
       server,
       router,
       cache,
+      components,
       scheduler: schedulerInstance,
       attributes: attributeConfig,
 
@@ -3567,6 +3610,7 @@ const __loaderModule = (() => {
         bindClassAttributes(rootOrFragment);
         bindEventAttributes(rootOrFragment);
         bindBoundaries(rootOrFragment);
+        bindComponentAttributes(rootOrFragment);
         runPseudoEvents(rootOrFragment);
         return api;
       },
@@ -3592,6 +3636,7 @@ const __loaderModule = (() => {
           server: api.server,
           router: api.router,
           cache: api.cache,
+          components: api.components,
           scheduler: schedulerInstance,
           attributes: attributeConfig
         });
@@ -3886,6 +3931,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) {
@@ -5265,9 +5336,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);
@@ -5284,7 +5358,7 @@ const __appModule = (() => {
 
       start(options = {}) {
         const runtime = createRuntime(app, options).start();
-        app.runtime = runtime;
+        setCurrentRuntime(runtime);
         return runtime;
       },
 
@@ -5293,12 +5367,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);
@@ -5306,7 +5380,11 @@ const __appModule = (() => {
       },
 
       inspectRoots() {
-        return app.runtime?.inspectRoots() ?? { count: 0, roots: [] };
+        return currentRuntime?.inspectRoots() ?? { count: 0, roots: [] };
+      },
+
+      inspectRuntime() {
+        return inspectRuntimeState(currentRuntime, loaderFacade);
       },
 
       _attach(runtime) {
@@ -5316,14 +5394,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 = {}) {
@@ -5386,6 +5486,7 @@ const __appModule = (() => {
           return runtime;
         }
         started = true;
+        app._setRuntime?.(runtime);
 
         if (target !== "server") {
           configureServerContext({ cache: browserCache });
@@ -5395,6 +5496,7 @@ const __appModule = (() => {
             registerRootLoader(loader.root, loader);
             loader.start();
             startRouterFor(loader.root);
+            app.loader._setCurrent(runtime.loader);
           } else if (startupRoot != null) {
             runtime.attachRoot(startupRoot);
           }
@@ -5431,6 +5533,7 @@ const __appModule = (() => {
               handlers,
               server,
               cache: browserCache,
+              components,
               scheduler,
               attributes
             });
@@ -5439,6 +5542,7 @@ const __appModule = (() => {
         configureServerContext({ cache: browserCache });
         signals._setContext?.({ server, loader: runtime.loader, cache: browserCache, scheduler });
         startRouterFor(root);
+        app.loader._setCurrent(runtime.loader);
         return runtime;
       },
 
@@ -5448,6 +5552,7 @@ const __appModule = (() => {
           return runtime;
         }
         if (root == null) {
+          const detachedLoaders = [...new Set(rootLoaders.values())];
           for (const rootLoader of new Set(rootLoaders.values())) {
             rootLoader.destroy?.();
           }
@@ -5458,6 +5563,7 @@ const __appModule = (() => {
           loader = undefined;
           runtime.loader = undefined;
           runtime.router = undefined;
+          app.loader._clearCurrent(detachedLoaders);
           return runtime;
         }
         const rootLoader = rootLoaders.get(root);
@@ -5476,6 +5582,9 @@ const __appModule = (() => {
           runtime.router = undefined;
           if (next) {
             startRouterFor(next.root);
+            app.loader._setCurrent(next);
+          } else {
+            app.loader._clearCurrent(rootLoader);
           }
         }
         return runtime;
@@ -5563,6 +5672,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();
@@ -5574,6 +5685,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 });
@@ -5650,6 +5777,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");
@@ -5800,10 +6028,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 = {}) {
@@ -6750,7 +7001,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.");
@@ -7347,7 +7598,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;

package/jsx/buildtime/jsx-dev-runtime.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/build-framework-bundle.js. Do not edit by hand.
+// Automatic JSX runtime declarations for the buildtime JSX profile.
+
+export { Fragment, jsx, jsxDEV, jsxs } from "../jsx-runtime.js";
+import type { AsyncJSXChildren, AsyncJSXElement, BuildtimeIntrinsicElements } from "../types.js";
+export namespace JSX {
+  type Element = AsyncJSXElement;
+  interface ElementChildrenAttribute {
+    children: AsyncJSXChildren;
+  }
+  type IntrinsicElements = BuildtimeIntrinsicElements;
+}

package/jsx/buildtime/jsx-dev-runtime.js

@@ -0,0 +1,2 @@
+export { Fragment, jsx, jsxDEV, jsxs } from "../jsx-runtime.js";
+

package/jsx/buildtime/jsx-runtime.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/build-framework-bundle.js. Do not edit by hand.
+// Automatic JSX runtime declarations for the buildtime JSX profile.
+
+export { Fragment, jsx, jsxDEV, jsxs } from "../jsx-runtime.js";
+import type { AsyncJSXChildren, AsyncJSXElement, BuildtimeIntrinsicElements } from "../types.js";
+export namespace JSX {
+  type Element = AsyncJSXElement;
+  interface ElementChildrenAttribute {
+    children: AsyncJSXChildren;
+  }
+  type IntrinsicElements = BuildtimeIntrinsicElements;
+}

package/jsx/buildtime/jsx-runtime.js

@@ -0,0 +1,2 @@
+export { Fragment, jsx, jsxDEV, jsxs } from "../jsx-runtime.js";
+

package/jsx/buildtime.d.ts

@@ -0,0 +1,5 @@
+// Generated by scripts/build-framework-bundle.js. Do not edit by hand.
+// Buildtime/build-required JSX profile declarations.
+
+export { ASYNC_JSX_COMPONENT, ASYNC_JSX_REVEAL, ASYNC_JSX_SIGNAL, ASYNC_JSX_SUSPENSE, Reveal, Suspense, component, signal } from "../jsx.js";
+export type { AsyncEventHandler, AsyncHTMLElements, AsyncJSX, AsyncJSXChild, AsyncJSXChildren, AsyncJSXElement, AsyncJsxProfile, AsyncSVGElements, AsyncSignal, BuildtimeIntrinsicElements, BuildtimeJSX, ComputedSignal, PropsOf, RuntimeIntrinsicElements, RuntimeJSX, Signal, SignalValue, WritableSignal } from "./types.js";

package/jsx/buildtime.js

@@ -0,0 +1,11 @@
+export {
+  ASYNC_JSX_COMPONENT,
+  ASYNC_JSX_REVEAL,
+  ASYNC_JSX_SIGNAL,
+  ASYNC_JSX_SUSPENSE,
+  Reveal,
+  Suspense,
+  component,
+  signal
+} from "../jsx.js";
+

package/jsx/jsx-runtime.js

@@ -0,0 +1,29 @@
+export const Fragment = Symbol.for("async.framework.jsx.fragment");
+
+export function jsx(type, props, key) {
+  return createJsxNode(type, props, key);
+}
+
+export function jsxs(type, props, key) {
+  return createJsxNode(type, props, key);
+}
+
+export function jsxDEV(type, props, key, isStaticChildren, source, self) {
+  return createJsxNode(type, props, key, {
+    dev: true,
+    isStaticChildren,
+    source,
+    self
+  });
+}
+
+function createJsxNode(type, props, key, dev) {
+  return Object.freeze({
+    kind: "async-jsx-node",
+    type,
+    props: props ?? {},
+    key: key ?? null,
+    dev: dev ? Object.freeze(dev) : undefined
+  });
+}
+

package/jsx/runtime/jsx-dev-runtime.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/build-framework-bundle.js. Do not edit by hand.
+// Automatic JSX runtime declarations for the runtime JSX profile.
+
+export { Fragment, jsx, jsxDEV, jsxs } from "../jsx-runtime.js";
+import type { AsyncJSXChildren, AsyncJSXElement, RuntimeIntrinsicElements } from "../types.js";
+export namespace JSX {
+  type Element = AsyncJSXElement;
+  interface ElementChildrenAttribute {
+    children: AsyncJSXChildren;
+  }
+  type IntrinsicElements = RuntimeIntrinsicElements;
+}

package/jsx/runtime/jsx-dev-runtime.js

@@ -0,0 +1,2 @@
+export { Fragment, jsx, jsxDEV, jsxs } from "../jsx-runtime.js";
+

package/jsx/runtime/jsx-runtime.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/build-framework-bundle.js. Do not edit by hand.
+// Automatic JSX runtime declarations for the runtime JSX profile.
+
+export { Fragment, jsx, jsxDEV, jsxs } from "../jsx-runtime.js";
+import type { AsyncJSXChildren, AsyncJSXElement, RuntimeIntrinsicElements } from "../types.js";
+export namespace JSX {
+  type Element = AsyncJSXElement;
+  interface ElementChildrenAttribute {
+    children: AsyncJSXChildren;
+  }
+  type IntrinsicElements = RuntimeIntrinsicElements;
+}

package/jsx/runtime/jsx-runtime.js

@@ -0,0 +1,2 @@
+export { Fragment, jsx, jsxDEV, jsxs } from "../jsx-runtime.js";
+

package/jsx/runtime.d.ts

@@ -0,0 +1,5 @@
+// Generated by scripts/build-framework-bundle.js. Do not edit by hand.
+// Runtime/no-build JSX profile declarations.
+
+export { ASYNC_JSX_COMPONENT, ASYNC_JSX_REVEAL, ASYNC_JSX_SIGNAL, ASYNC_JSX_SUSPENSE, Reveal, Suspense, component, signal } from "../jsx.js";
+export type { AsyncEventHandler, AsyncHTMLElements, AsyncJSX, AsyncJSXChild, AsyncJSXChildren, AsyncJSXElement, AsyncJsxProfile, AsyncSVGElements, AsyncSignal, BuildtimeIntrinsicElements, BuildtimeJSX, ComputedSignal, PropsOf, RuntimeIntrinsicElements, RuntimeJSX, Signal, SignalValue, WritableSignal } from "./types.js";

package/jsx/runtime.js

@@ -0,0 +1,11 @@
+export {
+  ASYNC_JSX_COMPONENT,
+  ASYNC_JSX_REVEAL,
+  ASYNC_JSX_SIGNAL,
+  ASYNC_JSX_SUSPENSE,
+  Reveal,
+  Suspense,
+  component,
+  signal
+} from "../jsx.js";
+