@async/framework 0.6.0 → 0.8.0

package/{framework.umd.js → browser.umd.js}

@@ -105,7 +105,8 @@
                   router: context.router,
                   loader: context.loader,
                   cache: context.cache,
-                  abort: activeAbort
+                  abort: activeAbort,
+                  scheduler: context.scheduler
                 });
               }
               return server;
@@ -119,6 +120,9 @@
             get cache() {
               return registry._context?.().cache;
             },
+            get scheduler() {
+              return registry._context?.().scheduler;
+            },
             get version() {
               return runVersion;
             },
@@ -195,11 +199,20 @@
         _bindRegistry(nextRegistry, nextId) {
           registry = nextRegistry;
           registeredId = nextId;
-          queueMicrotask(() => {
+          const start = () => {
             if (registry === nextRegistry && status === "idle") {
               state.refresh();
             }
-          });
+          };
+          const scheduler = registry._context?.().scheduler;
+          if (scheduler) {
+            scheduler.enqueue("async", start, {
+              scope: registeredId,
+              key: `asyncSignal:${registeredId}:initial`
+            });
+          } else {
+            queueMicrotask(start);
+          }
         },
 
         _dispose() {
@@ -235,11 +248,26 @@
         for (const dependency of dependencies) {
           const dependencyId = String(dependency).split(".")[0];
           if (dependencyId && dependencyId !== registeredId) {
-            dependencyCleanups.add(registry.subscribe(dependency, () => state.refresh()));
+            dependencyCleanups.add(registry.subscribe(dependency, () => scheduleRefresh()));
           }
         }
       }
 
+      function scheduleRefresh() {
+        if (activeAbort && !activeAbort.aborted) {
+          activeAbort.cancel(new Error(`Async signal "${registeredId}" dependency changed.`));
+        }
+        const scheduler = registry?._context?.().scheduler;
+        if (!scheduler) {
+          state.refresh();
+          return;
+        }
+        scheduler.enqueue("async", () => state.refresh(), {
+          scope: registeredId,
+          key: `asyncSignal:${registeredId}:refresh`
+        });
+      }
+
       function notify() {
         for (const subscriber of [...subscribers]) {
           subscriber(state);
@@ -547,6 +575,7 @@
       const registryStore = registry ?? createRegistryStore();
       const definitions = registryStore._map(type);
       const entries = registryStore._map(`${type}.entries`);
+      const pending = new Map();
 
       const registryApi = attachRegistryInspection({
         register(id, definition = defineCache()) {
@@ -608,19 +637,37 @@
           if (cached !== undefined) {
             return cached;
           }
-          const value = await fn();
-          registryApi.set(key, value, options);
-          return value;
+          if (pending.has(key)) {
+            return pending.get(key);
+          }
+          let promise;
+          promise = Promise.resolve()
+            .then(fn)
+            .then((value) => {
+              if (pending.get(key) === promise) {
+                registryApi.set(key, value, options);
+              }
+              return value;
+            })
+            .finally(() => {
+              if (pending.get(key) === promise) {
+                pending.delete(key);
+              }
+            });
+          pending.set(key, promise);
+          return promise;
         },
 
         delete(key) {
           assertKey(key);
+          pending.delete(key);
           return entries.delete(key);
         },
 
         clear(prefix) {
           if (prefix === undefined) {
             entries.clear();
+            pending.clear();
             return registryApi;
           }
           for (const key of [...entries.keys()]) {
@@ -628,6 +675,11 @@
               entries.delete(key);
             }
           }
+          for (const key of [...pending.keys()]) {
+            if (key.startsWith(prefix)) {
+              pending.delete(key);
+            }
+          }
           return registryApi;
         },
 
@@ -852,7 +904,8 @@
               server: registry._context?.().server,
               router: registry._context?.().router,
               loader: registry._context?.().loader,
-              cache: registry._context?.().cache
+              cache: registry._context?.().cache,
+              scheduler: registry._context?.().scheduler
             }));
           });
         }
@@ -880,6 +933,8 @@
       const registryCleanups = new Map();
       const runtimeContext = {};
       const boundEntries = new Set();
+      let subscriptionCounter = 0;
+      let effectCounter = 0;
 
       const registry = attachRegistryInspection({
         register(id, signalLike) {
@@ -955,17 +1010,21 @@
           return createRef(registry, id);
         },
 
-        subscribe(path, fn) {
+        subscribe(path, fn, options = {}) {
           if (typeof fn !== "function") {
             throw new TypeError("subscribe(path, fn) requires a function.");
           }
           const parsed = parsePath(path, entries);
           const entry = requireEntry(entries, parsed.id);
+          const subscriptionId = ++subscriptionCounter;
           return entry.subscribe(() => {
-            fn(registry.get(parsed.path), {
+            scheduleCallback(() => fn(registry.get(parsed.path), {
               id: parsed.id,
               path: parsed.path,
               signal: entry
+            }), {
+              ...options,
+              key: options.key ?? `signal:${parsed.path}:${subscriptionId}`
             });
           });
         },
@@ -983,10 +1042,12 @@
           return registry.ref(id);
         },
 
-        effect(fn) {
+        effect(fn, options = {}) {
           let cleanup;
           let dependencyCleanups = [];
           let stopped = false;
+          const scheduler = options.scheduler;
+          const effectId = ++effectCounter;
 
           const run = () => {
             if (stopped) {
@@ -1005,10 +1066,22 @@
               server: runtimeContext.server,
               router: runtimeContext.router,
               loader: runtimeContext.loader,
-              cache: runtimeContext.cache
+              cache: runtimeContext.cache,
+              scheduler: runtimeContext.scheduler
             }));
             cleanup = outcome.value;
-            dependencyCleanups = outcome.dependencies.map((dependency) => registry.subscribe(dependency, run));
+            dependencyCleanups = outcome.dependencies.map((dependency) => registry.subscribe(dependency, scheduleRun));
+          };
+
+          const scheduleRun = () => {
+            if (!scheduler) {
+              run();
+              return;
+            }
+            scheduler.enqueue(options.phase ?? "effect", run, {
+              scope: options.scope,
+              key: options.key ?? `effect:${effectId}`
+            });
           };
 
           run();
@@ -1085,6 +1158,17 @@
           registryCleanups.set(id, cleanup);
         }
       }
+
+      function scheduleCallback(fn, options = {}) {
+        const scheduler = options.scheduler;
+        if (!scheduler || options.phase === "sync") {
+          return fn();
+        }
+        return scheduler.enqueue(options.phase ?? "effect", fn, {
+          scope: options.scope,
+          key: options.key
+        });
+      }
     }
 
     function normalizeSignal(signalLike) {
@@ -1551,10 +1635,15 @@
         html,
         attach(target) {
           for (const hook of attachHooks) {
-            const cleanup = hook(target);
-            if (typeof cleanup === "function") {
-              cleanups.push(cleanup);
-            }
+            runtime.scheduler?.enqueue("lifecycle", () => {
+              const cleanup = hook(target);
+              if (typeof cleanup === "function") {
+                cleanups.push(cleanup);
+              }
+            }, {
+              scope,
+              key: `attach:${attachHooks.indexOf(hook)}`
+            }) ?? runAttachHook(hook, target);
           }
         },
         mount(target) {
@@ -1562,7 +1651,17 @@
         },
         visible(target, observeVisible) {
           for (const hook of visibleHooks) {
-            const cleanup = observeVisible(target, hook);
+            const cleanup = observeVisible(target, () => {
+              runtime.scheduler?.enqueue("lifecycle", () => {
+                const hookCleanup = hook(target);
+                if (typeof hookCleanup === "function") {
+                  cleanups.push(hookCleanup);
+                }
+              }, {
+                scope,
+                key: `visible:${visibleHooks.indexOf(hook)}`
+              }) ?? runVisibleHook(hook, target);
+            });
             if (typeof cleanup === "function") {
               cleanups.push(cleanup);
             }
@@ -1572,6 +1671,7 @@
           while (destroyHooks.length > 0) {
             destroyHooks.pop()?.();
           }
+          runtime.scheduler?.markScopeDestroyed(scope);
           while (cleanups.length > 0) {
             cleanups.pop()?.();
           }
@@ -1580,10 +1680,24 @@
           }
         }
       };
+
+      function runAttachHook(hook, target) {
+        const cleanup = hook(target);
+        if (typeof cleanup === "function") {
+          cleanups.push(cleanup);
+        }
+      }
+
+      function runVisibleHook(hook, target) {
+        const cleanup = hook(target);
+        if (typeof cleanup === "function") {
+          cleanups.push(cleanup);
+        }
+      }
     }
 
     function createComponentContext({ runtime, scope, cleanups, attachHooks, visibleHooks, destroyHooks, renderScopedTemplate }) {
-      const { signals, handlers, loader, server, router, cache } = runtime;
+      const { signals, handlers, loader, server, router, cache, scheduler } = runtime;
       const generatedHandlers = new WeakMap();
       let generatedHandlerCounter = 0;
       let generatedSignalCounter = 0;
@@ -1595,6 +1709,7 @@
         server,
         router,
         cache,
+        scheduler,
 
         signal(name, initial) {
           if (arguments.length === 1) {
@@ -1639,7 +1754,11 @@
         },
 
         effect(fn) {
-          const cleanup = signals.effect(() => fn.call(context));
+          const cleanup = signals.effect(() => fn.call(context), {
+            scheduler,
+            phase: "effect",
+            scope
+          });
           cleanups.push(cleanup);
           return cleanup;
         },
@@ -1761,90 +1880,9 @@
   })();
 
   const __serverModule = (() => {
-    const { attachRegistryInspection, createRegistryStore } = __registryStoreModule;
     const serverEnvelopeKeys = new Set(["value", "signals", "boundary", "html", "redirect", "error"]);
-
-    function createServerRegistry(initialMap = {}, options = {}) {
-      const registryStore = options.registry ?? createRegistryStore();
-      const type = options.type ?? "server";
-      const entries = registryStore._map(type);
-      const defaults = {};
-
-      const registry = attachRegistryInspection({
-        register(id, fn) {
-          assertServerId(id);
-          if (typeof fn !== "function") {
-            throw new TypeError(`Server function "${id}" must be a function.`);
-          }
-          if (entries.has(id)) {
-            throw new Error(`Server function "${id}" is already registered.`);
-          }
-          entries.set(id, fn);
-          return id;
-        },
-
-        registerMany(map) {
-          for (const [id, fn] of Object.entries(map ?? {})) {
-            registry.register(id, fn);
-          }
-          return registry;
-        },
-
-        unregister(id) {
-          assertServerId(id);
-          return entries.delete(id);
-        },
-
-        resolve(id) {
-          assertServerId(id);
-          return entries.get(id);
-        },
-
-        async run(id, args = [], context = {}) {
-          assertServerId(id);
-          const fn = registry.resolve(id);
-          if (!fn) {
-            throw new Error(`Server function "${id}" is not registered.`);
-          }
-
-          let runContext;
-          const server = createServerNamespace((childId, childArgs, childContext = {}) => {
-            return registry.run(childId, childArgs, { ...runContext, ...childContext });
-          }, {}, () => runContext);
-
-          const mergedContext = {
-            ...defaults,
-            ...context,
-            cache: defaults.cache ?? context.cache
-          };
-
-          runContext = {
-            ...mergedContext,
-            id,
-            args,
-            input: mergedContext.input,
-            signals: createSignalReader(mergedContext.signals),
-            abort: mergedContext.abort,
-            cache: mergedContext.cache,
-            server
-          };
-
-          return fn.call(runContext, ...args);
-        },
-
-        _setContext(context = {}) {
-          Object.assign(defaults, context);
-          return registry;
-        },
-
-        _adoptMany() {
-          return registry;
-        }
-      }, registryStore, type);
-
-      registry.registerMany(initialMap);
-      return createServerNamespace((id, args, context) => registry.run(id, args, context), registry, () => defaults);
-    }
+    const appliedServerResult = Symbol.for("@async/framework.appliedServerResult");
+    const appliedServerValues = new WeakSet();
 
     function createServerProxy({
       endpoint = "/__async/server",
@@ -1853,13 +1891,14 @@
       loader,
       router,
       cache,
+      scheduler,
       headers = {}
     } = {}) {
       if (typeof fetchImpl !== "function") {
         throw new TypeError("createServerProxy(...) requires fetch to be available.");
       }
 
-      const defaults = { signals, loader, router, cache };
+      const defaults = { signals, loader, router, cache, scheduler };
 
       async function run(id, args = [], context = {}) {
         assertServerId(id);
@@ -1869,6 +1908,7 @@
           input: context.input ?? defaultInput(runContext),
           signals: context.signalValues ?? snapshotSignalPaths(context.signalPaths, runContext.signals)
         };
+        assertJsonTransportable(body);
 
         const response = await fetchImpl(joinEndpoint(endpoint, id), {
           method: "POST",
@@ -1886,7 +1926,7 @@
 
         const result = await readServerResponse(response);
         await applyServerResult(result, runContext);
-        return unwrapServerResult(result);
+        return markAppliedServerValue(unwrapServerResult(result));
       }
 
       return createServerNamespace(run, {
@@ -1921,6 +1961,9 @@
       if (!isServerEnvelope(result)) {
         return result;
       }
+      if (result[appliedServerResult] || appliedServerValues.has(result)) {
+        return result;
+      }
 
       if (result.signals && context.signals) {
         for (const [path, value] of Object.entries(result.signals)) {
@@ -1944,6 +1987,12 @@
         throw toError(result.error);
       }
 
+      Object.defineProperty(result, appliedServerResult, {
+        configurable: true,
+        enumerable: false,
+        value: true
+      });
+
       return result;
     }
 
@@ -1954,6 +2003,13 @@
       return result;
     }
 
+    function markAppliedServerValue(value) {
+      if (value && typeof value === "object") {
+        appliedServerValues.add(value);
+      }
+      return value;
+    }
+
     function defaultInput(context = {}) {
       const form = findForm(context);
       if (form) {
@@ -2131,6 +2187,30 @@
       return output;
     }
 
+    function assertJsonTransportable(value, seen = new Set()) {
+      if (value == null || typeof value !== "object") {
+        return;
+      }
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
+
+      const tag = Object.prototype.toString.call(value);
+      if (tag === "[object File]" || tag === "[object Blob]" || tag === "[object FormData]") {
+        throw new Error("Server proxy JSON transport does not support File, Blob, or FormData values yet.");
+      }
+      if (Array.isArray(value)) {
+        for (const item of value) {
+          assertJsonTransportable(item, seen);
+        }
+        return;
+      }
+      for (const item of Object.values(value)) {
+        assertJsonTransportable(item, seen);
+      }
+    }
+
     function joinEndpoint(endpoint, id) {
       return `${String(endpoint).replace(/\/$/, "")}/${encodeURIComponent(id)}`;
     }
@@ -2157,7 +2237,7 @@
         throw new TypeError("Server function id must be a non-empty string.");
       }
     }
-    return { createServerRegistry, createServerProxy, resolveServerCommandArguments, applyServerResult, unwrapServerResult, defaultInput };
+    return { createServerProxy, resolveServerCommandArguments, applyServerResult, unwrapServerResult, defaultInput, createServerNamespace, createSignalReader, assertServerId };
   })();
 
   const __handlersModule = (() => {
@@ -2360,18 +2440,321 @@
     return { createHandlerRegistry, parseHandlerRef, isHandlerToken };
   })();
 
+  const __schedulerModule = (() => {
+    const defaultPhases = ["binding", "lifecycle", "effect", "async", "post"];
+
+    function createScheduler(options = {}) {
+      const phases = [...(options.phases ?? defaultPhases)];
+      const queues = new Map(phases.map((phase) => [phase, []]));
+      const keyedJobs = new Map();
+      const destroyedScopes = new Set();
+      const objectScopeIds = new WeakMap();
+      const onError = typeof options.onError === "function" ? options.onError : undefined;
+      const maxDepth = options.maxDepth ?? 100;
+      const strategy = options.strategy ?? "microtask";
+      let destroyed = false;
+      let flushing = false;
+      let scheduled = false;
+      let batchDepth = 0;
+      let jobCounter = 0;
+      let scopeCounter = 0;
+
+      const api = {
+        strategy,
+        phases,
+
+        batch(fn) {
+          if (typeof fn !== "function") {
+            throw new TypeError("scheduler.batch(fn) requires a function.");
+          }
+          assertActive();
+          batchDepth += 1;
+          let asyncBatch = false;
+          try {
+            const value = fn();
+            if (value && typeof value.then === "function") {
+              asyncBatch = true;
+              return value.finally(() => {
+                batchDepth -= 1;
+                requestFlush();
+              });
+            }
+            return value;
+          } finally {
+            if (!asyncBatch && batchDepth > 0) {
+              batchDepth -= 1;
+              requestFlush();
+            }
+          }
+        },
+
+        enqueue(phase, fn, options = {}) {
+          assertActive();
+          assertPhase(phase);
+          if (typeof fn !== "function") {
+            throw new TypeError("scheduler.enqueue(phase, fn) requires a function.");
+          }
+          const scope = options.scope;
+          if (scope !== undefined && destroyedScopes.has(scope)) {
+            return noop;
+          }
+
+          const dedupeKey = options.key === undefined ? undefined : `${phase}:${scopeKey(scope)}:${String(options.key)}`;
+          if (dedupeKey && keyedJobs.has(dedupeKey)) {
+            return keyedJobs.get(dedupeKey).cancel;
+          }
+
+          const job = {
+            id: ++jobCounter,
+            phase,
+            fn,
+            scope,
+            boundary: options.boundary,
+            key: dedupeKey,
+            canceled: false,
+            cancel() {
+              job.canceled = true;
+              if (job.key) {
+                keyedJobs.delete(job.key);
+              }
+            }
+          };
+          queues.get(phase).push(job);
+          if (job.key) {
+            keyedJobs.set(job.key, job);
+          }
+          requestFlush();
+          return job.cancel;
+        },
+
+        afterFlush(fn, options = {}) {
+          return api.enqueue("post", fn, options);
+        },
+
+        async flush() {
+          assertActive();
+          if (flushing) {
+            return;
+          }
+          scheduled = false;
+          flushing = true;
+          let depth = 0;
+          try {
+            while (hasJobs()) {
+              depth += 1;
+              if (depth > maxDepth) {
+                throw new Error(`Scheduler exceeded maxDepth ${maxDepth}.`);
+              }
+              for (const phase of phases) {
+                await flushPhase(phase);
+              }
+            }
+          } finally {
+            flushing = false;
+            if (hasJobs()) {
+              requestFlush();
+            }
+          }
+        },
+
+        async flushScope(scope) {
+          assertActive();
+          if (flushing) {
+            return;
+          }
+          scheduled = false;
+          flushing = true;
+          let depth = 0;
+          try {
+            while (hasJobsForScope(scope)) {
+              depth += 1;
+              if (depth > maxDepth) {
+                throw new Error(`Scheduler exceeded maxDepth ${maxDepth}.`);
+              }
+              for (const phase of phases) {
+                await flushPhase(phase, scope);
+              }
+            }
+          } finally {
+            flushing = false;
+            if (hasJobs()) {
+              requestFlush();
+            }
+          }
+        },
+
+        cancelScope(scope) {
+          if (scope === undefined) {
+            return api;
+          }
+          for (const queue of queues.values()) {
+            for (const job of queue) {
+              if (job.scope === scope) {
+                job.cancel();
+              }
+            }
+          }
+          return api;
+        },
+
+        markScopeDestroyed(scope) {
+          if (scope !== undefined) {
+            destroyedScopes.add(scope);
+            api.cancelScope(scope);
+          }
+          return api;
+        },
+
+        inspect() {
+          const counts = {};
+          for (const [phase, queue] of queues) {
+            counts[phase] = queue.filter((job) => !job.canceled).length;
+          }
+          return {
+            strategy,
+            phases: [...phases],
+            pending: counts,
+            scopesDestroyed: destroyedScopes.size,
+            flushing,
+            scheduled
+          };
+        },
+
+        destroy() {
+          destroyed = true;
+          for (const queue of queues.values()) {
+            for (const job of queue) {
+              job.cancel();
+            }
+            queue.length = 0;
+          }
+          keyedJobs.clear();
+          destroyedScopes.clear();
+        }
+      };
+
+      return api;
+
+      function requestFlush() {
+        if (strategy === "manual" || destroyed || flushing || batchDepth > 0 || scheduled) {
+          return;
+        }
+        scheduled = true;
+        scheduleMicrotask(() => {
+          if (!destroyed) {
+            void api.flush();
+          }
+        });
+      }
+
+      async function flushPhase(phase, scope) {
+        const queue = queues.get(phase);
+        const remaining = [];
+        const runnable = [];
+
+        for (const job of queue.splice(0)) {
+          if (job.canceled) {
+            continue;
+          }
+          if (scope !== undefined && job.scope !== scope) {
+            remaining.push(job);
+            continue;
+          }
+          runnable.push(job);
+        }
+
+        queue.push(...remaining);
+
+        for (const job of runnable) {
+          if (job.key) {
+            keyedJobs.delete(job.key);
+          }
+          if (job.canceled || (job.scope !== undefined && destroyedScopes.has(job.scope))) {
+            continue;
+          }
+          try {
+            await job.fn();
+          } catch (error) {
+            if (onError) {
+              onError(error, job);
+            } else {
+              throw error;
+            }
+          }
+        }
+      }
+
+      function hasJobs() {
+        for (const queue of queues.values()) {
+          if (queue.some((job) => !job.canceled)) {
+            return true;
+          }
+        }
+        return false;
+      }
+
+      function hasJobsForScope(scope) {
+        for (const queue of queues.values()) {
+          if (queue.some((job) => !job.canceled && job.scope === scope)) {
+            return true;
+          }
+        }
+        return false;
+      }
+
+      function assertActive() {
+        if (destroyed) {
+          throw new Error("Scheduler has been destroyed.");
+        }
+      }
+
+      function assertPhase(phase) {
+        if (!queues.has(phase)) {
+          throw new Error(`Unknown scheduler phase "${phase}".`);
+        }
+      }
+
+      function scopeKey(scope) {
+        if (scope === undefined) {
+          return "global";
+        }
+        if ((typeof scope === "object" && scope !== null) || typeof scope === "function") {
+          if (!objectScopeIds.has(scope)) {
+            objectScopeIds.set(scope, `scope:${++scopeCounter}`);
+          }
+          return objectScopeIds.get(scope);
+        }
+        return String(scope);
+      }
+    }
+
+    function scheduleMicrotask(fn) {
+      if (typeof queueMicrotask === "function") {
+        queueMicrotask(fn);
+        return;
+      }
+      Promise.resolve().then(fn);
+    }
+
+    function noop() {}
+    return { createScheduler };
+  })();
+
   const __loaderModule = (() => {
     const { renderComponent } = __componentModule;
     const { createHandlerRegistry } = __handlersModule;
+    const { createScheduler } = __schedulerModule;
     const { createSignalRegistry, isSignalRef } = __signalsModule;
     const { matchAttribute, normalizeAttributeConfig, readAttribute } = __attributesModule;
     const inlineBindingPrefix = "__async:inline:";
 
-    function Loader({ root, signals, handlers, server, router, cache, attributes } = {}) {
+    function Loader({ root, signals, handlers, server, router, cache, attributes, scheduler } = {}) {
       const documentRef = root?.ownerDocument ?? root ?? globalThis.document;
       const rootNode = root ?? documentRef;
       const signalRegistry = signals ?? createSignalRegistry();
       const handlerRegistry = handlers ?? createHandlerRegistry();
+      const schedulerInstance = scheduler ?? createScheduler();
+      const ownsScheduler = !scheduler;
       const attributeConfig = normalizeAttributeConfig(attributes);
       const cleanups = new Set();
       const eventBindings = new WeakMap();
@@ -2392,6 +2775,7 @@
         server,
         router,
         cache,
+        scheduler: schedulerInstance,
         attributes: attributeConfig,
 
         start() {
@@ -2431,6 +2815,7 @@
             server: api.server,
             router: api.router,
             cache: api.cache,
+            scheduler: schedulerInstance,
             attributes: attributeConfig
           });
           cleanupChildren(target);
@@ -2451,6 +2836,9 @@
             runCleanup(cleanup);
           }
           cleanups.clear();
+          if (ownsScheduler) {
+            schedulerInstance.destroy();
+          }
         },
 
         _observeVisible(target, fn) {
@@ -2468,13 +2856,14 @@
         }
       };
 
-      signalRegistry._setContext?.({ server: api.server, router: api.router, loader: api, cache: api.cache });
+      signalRegistry._setContext?.({ server: api.server, router: api.router, loader: api, cache: api.cache, scheduler: schedulerInstance });
       api.server?._setContext?.({
         signals: signalRegistry,
         handlers: handlerRegistry,
         loader: api,
         router: api.router,
-        cache: api.cache
+        cache: api.cache,
+        scheduler: schedulerInstance
       });
 
       function bindEventAttributes(scope) {
@@ -2506,18 +2895,19 @@
 
         const listener = async (event) => {
           try {
-            await handlerRegistry.run(ref, {
+            await schedulerInstance.batch(() => handlerRegistry.run(ref, {
               signals: signalRegistry,
               handlers: handlerRegistry,
               loader: api,
               server: api.server,
               router: api.router,
               cache: api.cache,
+              scheduler: schedulerInstance,
               event,
               element,
               el: element,
               root: rootNode
-            });
+            }));
           } catch (error) {
             dispatchAsyncError(element, error);
           }
@@ -2633,7 +3023,12 @@
 
         const read = () => readBinding(path, options);
         apply(read());
-        addCleanup(subscribeBinding(path, () => apply(read())), element);
+        addCleanup(subscribeBinding(path, () => {
+          schedulerInstance.enqueue("binding", () => apply(read()), {
+            scope: element,
+            key
+          });
+        }), element);
       }
 
       function bindValueWriter(element, path) {
@@ -2694,7 +3089,12 @@
             const state = {
               id,
               templates,
-              cleanup: signalRegistry.subscribe(`${id}.$status`, () => renderBoundary(boundary))
+              cleanup: signalRegistry.subscribe(`${id}.$status`, () => {
+                schedulerInstance.enqueue("binding", () => renderBoundary(boundary), {
+                  scope: boundary,
+                  key: `boundary:${id}`
+                });
+              })
             };
             boundaryState.set(boundary, state);
             addCleanup(state.cleanup, boundary);
@@ -2734,7 +3134,7 @@
           }
           mountedElements.add(element);
           for (const ref of refs) {
-            runPseudo(element, ref);
+            scheduleLifecycle(element, () => runPseudo(element, ref), `attach:${ref}`);
           }
         }
 
@@ -2747,7 +3147,7 @@
             continue;
           }
           visibleElements.add(element);
-          addCleanup(observeVisible(element, () => runPseudo(element, ref)), element);
+          addCleanup(observeVisible(element, () => scheduleLifecycle(element, () => runPseudo(element, ref), `visible:${ref}`)), element);
         }
       }
 
@@ -2771,6 +3171,7 @@
             server: api.server,
             router: api.router,
             cache: api.cache,
+            scheduler: schedulerInstance,
             element,
             el: element,
             root: rootNode
@@ -2789,10 +3190,13 @@
         const ownerWindow = target.ownerDocument?.defaultView ?? globalThis;
         const Observer = ownerWindow.IntersectionObserver ?? globalThis.IntersectionObserver;
         if (!Observer) {
-          queueMicrotask(() => {
+          schedulerInstance.enqueue("lifecycle", () => {
             if (!destroyed) {
               fn(target);
             }
+          }, {
+            scope: target,
+            key: "visible:fallback"
           });
           return () => {};
         }
@@ -2847,6 +3251,7 @@
         }
         for (const element of elementsIn(node)) {
           runScopedCleanups(element);
+          schedulerInstance.markScopeDestroyed(element);
         }
       }
 
@@ -2870,6 +3275,13 @@
         }
       }
 
+      function scheduleLifecycle(element, fn, key) {
+        schedulerInstance.enqueue("lifecycle", fn, {
+          scope: element,
+          key
+        });
+      }
+
       return api;
     }
 
@@ -3200,6 +3612,7 @@
   const __routerModule = (() => {
     const { Loader } = __loaderModule;
     const { createHandlerRegistry } = __handlersModule;
+    const { createScheduler } = __schedulerModule;
     const { createSignalRegistry } = __signalsModule;
     const { applyServerResult } = __serverModule;
     const { createRegistryStore } = __registryStoreModule;
@@ -3230,6 +3643,7 @@
           const nextRoute = normalizeRoute(pattern, definition);
           entries.set(pattern, nextRoute.definition);
           routes.push(nextRoute);
+          sortRoutes(routes);
           return nextRoute;
         },
 
@@ -3302,6 +3716,7 @@
         const nextRoute = normalizeRoute(pattern, definition);
         entries.set(pattern, nextRoute.definition);
         routes.push(nextRoute);
+        sortRoutes(routes);
       }
     }
 
@@ -3318,12 +3733,15 @@
       partials,
       fetch: fetchImpl = globalThis.fetch?.bind(globalThis),
       routeEndpoint = "/__async/route",
-      attributes
+      attributes,
+      scheduler
     } = {}) {
       const documentRef = root?.ownerDocument ?? root ?? globalThis.document;
       const rootNode = root ?? documentRef;
       const signalRegistry = signals ?? loader?.signals ?? createSignalRegistry();
       const handlerRegistry = handlers ?? loader?.handlers ?? createHandlerRegistry();
+      const schedulerInstance = scheduler ?? loader?.scheduler ?? createScheduler();
+      const ownsScheduler = !scheduler && !loader?.scheduler;
       const attributeConfig = normalizeAttributeConfig(attributes ?? loader?.attributes);
       const loaderInstance =
         loader ??
@@ -3333,11 +3751,14 @@
           handlers: handlerRegistry,
           server,
           cache,
+          scheduler: schedulerInstance,
           attributes: attributeConfig
         });
       const ownsLoader = !loader;
       const cleanups = new Set();
       let destroyed = false;
+      let navigationVersion = 0;
+      let activeNavigation;
 
       const api = {
         mode,
@@ -3350,12 +3771,13 @@
         server,
         cache,
         partials,
+        scheduler: schedulerInstance,
         attributes: attributeConfig,
 
         start() {
           assertActive();
           loaderInstance.router = api;
-          signalRegistry._setContext?.({ router: api, loader: loaderInstance, server, cache });
+          signalRegistry._setContext?.({ router: api, loader: loaderInstance, server, cache, scheduler: schedulerInstance });
           if (ownsLoader) {
             loaderInstance.start();
           }
@@ -3377,7 +3799,7 @@
         },
 
         match(url) {
-          return routes.match(url);
+          return routes.match(resolveUrl(url));
         },
 
         prefetch(url) {
@@ -3402,7 +3824,7 @@
             return null;
           }
 
-          const target = toUrl(url);
+          const target = resolveUrl(url);
           if (mode === "ssr-spa") {
             return fetchRoutePartial(target, options);
           }
@@ -3414,10 +3836,14 @@
             return;
           }
           destroyed = true;
+          activeNavigation?.controller.abort(new Error("Router has been destroyed."));
           for (const cleanup of cleanups) {
             cleanup();
           }
           cleanups.clear();
+          if (ownsScheduler) {
+            schedulerInstance.destroy();
+          }
         }
       };
 
@@ -3453,24 +3879,37 @@
       async function renderLocalRoutePartial(target, options = {}) {
         const matched = api.match(target);
         if (!matched) {
+          beginNavigation(target, null);
           setNoRouteError(target);
           return null;
         }
 
+        const navigation = beginNavigation(target, matched);
         setMatchedRouterState(target, matched, { pending: true, error: null });
 
         try {
           if (!matched.route?.partial || !partials?.resolve?.(matched.route.partial)) {
             const error = new Error(`Route "${target.pathname}" does not have a registered partial.`);
-            setRouterState({ pending: false, error });
+            if (isActiveNavigation(navigation)) {
+              setRouterState({ pending: false, error });
+            }
             return null;
           }
 
-          const result = await partials.render(matched.route.partial, matched.params, contextFor(matched));
-          await applyNavigationResult(result, target, options);
+          const result = await partials.render(matched.route.partial, matched.params, contextFor(matched, navigation));
+          if (!isActiveNavigation(navigation)) {
+            return null;
+          }
+          await applyNavigationResult(result, target, options, navigation);
+          if (!isActiveNavigation(navigation)) {
+            return null;
+          }
           setRouterState({ pending: false, error: null });
           return result;
         } catch (error) {
+          if (!isActiveNavigation(navigation)) {
+            return null;
+          }
           setRouterState({ pending: false, error });
           throw error;
         }
@@ -3478,28 +3917,48 @@
 
       async function fetchRoutePartial(target, options = {}) {
         const matched = api.match(target);
+        const navigation = beginNavigation(target, matched);
         setMatchedRouterState(target, matched, { pending: true, error: null });
 
         try {
-          const result = await fetchRoute(target.href);
-          await applyNavigationResult(result, target, options);
+          const result = await fetchRoute(target.href, { signal: navigation.abort });
+          if (!isActiveNavigation(navigation)) {
+            return null;
+          }
+          await applyNavigationResult(result, target, options, navigation);
+          if (!isActiveNavigation(navigation)) {
+            return null;
+          }
           setRouterState({ pending: false, error: null });
           return result;
         } catch (error) {
+          if (!isActiveNavigation(navigation)) {
+            return null;
+          }
           setRouterState({ pending: false, error });
           throw error;
         }
       }
 
-      async function applyNavigationResult(result, target, options) {
+      async function applyNavigationResult(result, target, options, navigation) {
+        if (!isActiveNavigation(navigation)) {
+          return;
+        }
         await applyServerResult(result, {
           signals: signalRegistry,
           loader: loaderInstance,
           router: api,
-          cache
+          cache,
+          scheduler: schedulerInstance,
+          abort: navigation?.abort
         });
+        await schedulerInstance.flush();
+        if (!isActiveNavigation(navigation)) {
+          return;
+        }
         if (result?.html != null && !result.boundary && !result.redirect) {
           loaderInstance.swap(boundary, result.html);
+          await schedulerInstance.flush();
         }
         if (result?.redirect || options.history === false) {
           return;
@@ -3511,14 +3970,15 @@
         documentRef.defaultView?.history?.pushState?.({}, "", target.href);
       }
 
-      async function fetchRoute(url, { prefetch = false } = {}) {
+      async function fetchRoute(url, { prefetch = false, signal } = {}) {
         if (typeof fetchImpl !== "function") {
           throw new Error("Router navigation requires a partial registry or fetch.");
         }
         const response = await fetchImpl(`${routeEndpoint}?to=${encodeURIComponent(String(url))}`, {
           headers: {
             accept: "application/json, text/html"
-          }
+          },
+          signal
         });
         if (!response.ok) {
           throw new Error(`Route "${url}" failed with ${response.status}.`);
@@ -3533,7 +3993,7 @@
         return { boundary, html: await response.text() };
       }
 
-      function contextFor(matched) {
+      function contextFor(matched, navigation) {
         return {
           params: matched.params,
           route: matched.route,
@@ -3543,8 +4003,27 @@
           loader: loaderInstance,
           server,
           cache,
-          abort: undefined
+          scheduler: schedulerInstance,
+          abort: navigation?.abort
+        };
+      }
+
+      function beginNavigation(target, matched) {
+        activeNavigation?.controller.abort(new Error(`Router navigation superseded by ${target.pathname}${target.search}.`));
+        const controller = new AbortController();
+        const navigation = {
+          id: ++navigationVersion,
+          controller,
+          abort: controller.signal,
+          target,
+          matched
         };
+        activeNavigation = navigation;
+        return navigation;
+      }
+
+      function isActiveNavigation(navigation) {
+        return !destroyed && navigation && activeNavigation?.id === navigation.id && !navigation.abort.aborted;
       }
 
       function updateStateFromLocation() {
@@ -3581,7 +4060,14 @@
       }
 
       function currentUrl() {
-        return toUrl(documentRef.defaultView?.location?.href ?? "http://localhost/");
+        return resolveUrl(documentRef.defaultView?.location?.href ?? "http://localhost/");
+      }
+
+      function resolveUrl(url) {
+        if (url instanceof URL) {
+          return url;
+        }
+        return new URL(String(url), documentRef.defaultView?.location?.href ?? "http://localhost/");
       }
 
       function assertActive() {
@@ -3598,6 +4084,7 @@
         pattern,
         regex,
         keys,
+        score: routeScore(pattern),
         definition: normalized
       };
     }
@@ -3666,6 +4153,28 @@
       return String(value).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
     }
 
+    function sortRoutes(routes) {
+      routes.sort((left, right) => right.score - left.score || right.pattern.length - left.pattern.length);
+    }
+
+    function routeScore(pattern) {
+      if (pattern === "*") {
+        return -1;
+      }
+      return pattern
+        .split("/")
+        .filter(Boolean)
+        .reduce((score, segment) => {
+          if (segment === "*") {
+            return score;
+          }
+          if (segment.startsWith(":")) {
+            return score + 2;
+          }
+          return score + 4;
+        }, pattern === "/" ? 3 : 0);
+    }
+
     function assertPattern(pattern) {
       if (typeof pattern !== "string" || (pattern !== "*" && !pattern.startsWith("/"))) {
         throw new TypeError("Route pattern must be a path string or \"*\".");
@@ -3681,15 +4190,17 @@
     const { Loader } = __loaderModule;
     const { createPartialRegistry } = __partialsModule;
     const { createRouteRegistry, createRouter } = __routerModule;
-    const { createServerRegistry } = __serverModule;
+    const { createScheduler } = __schedulerModule;
+    const { createServerNamespace } = __serverModule;
     const { createSignal, createSignalRegistry } = __signalsModule;
     const { createRegistryStore } = __registryStoreModule;
     const { attributeName, normalizeAttributeConfig } = __attributesModule;
     const registryTypes = new Set(["signal", "handler", "server", "partial", "route", "component"]);
 
-    function defineApp(initial) {
+    function defineApp(initial, options = {}) {
       const registry = createRegistryStore(undefined, { target: "browser" });
       const runtimes = new Set();
+      const createRuntime = options.createRuntime ?? createApp;
 
       const app = {
         registry,
@@ -3708,7 +4219,7 @@
         },
 
         start(options = {}) {
-          const runtime = createApp(app, options).start();
+          const runtime = createRuntime(app, options).start();
           app.runtime = runtime;
           return runtime;
         },
@@ -3733,13 +4244,18 @@
     function createApp(appOrDefinition = Async, options = {}) {
       const app = isAppHub(appOrDefinition) ? appOrDefinition : defineApp(appOrDefinition ?? {});
       const target = options.target ?? "browser";
+      const scheduler = options.scheduler ?? options.loader?.scheduler ?? createScheduler({
+        strategy: target === "server" ? "manual" : "microtask"
+      });
+      const ownsScheduler = !options.scheduler && !options.loader?.scheduler;
       const attributes = normalizeAttributeConfig(options.attributes);
       const registry = options.registry ?? app.registry.view({ target });
       const signals = options.signals ?? createSignalRegistry(undefined, { registry, type: "signal" });
       const handlers = options.handlers ?? createHandlerRegistry(undefined, { registry, type: "handler" });
       const serverCache = createCacheRegistry(undefined, { registry, type: "cache.server" });
       const browserCache = createCacheRegistry(undefined, { registry, type: "cache.browser" });
-      const server = options.server ?? createServerRegistry(undefined, { registry, type: "server" });
+      const serverFactory = options.serverFactory ?? createServerReferenceRegistry;
+      const server = options.server ?? serverFactory(undefined, { registry, type: "server" });
       const partials = options.partials ?? createPartialRegistry(undefined, { registry, type: "partial" });
       const routes = options.routes ?? createRouteRegistry(undefined, { registry, type: "route" });
       const components = options.components ?? createComponentRegistry(undefined, { registry, type: "component" });
@@ -3749,7 +4265,7 @@
       let started = false;
       let destroyed = false;
 
-      applySnapshot(signals, browserCache, options.snapshot);
+      applySnapshot(signals, browserCache, options.snapshot ?? (target === "browser" ? readSnapshot(options.root, { attributes }) : undefined));
       attachServerCache(server, serverCache);
 
       const runtime = {
@@ -3767,6 +4283,7 @@
         },
         loader,
         router,
+        scheduler,
         attributes,
 
         start() {
@@ -3783,12 +4300,13 @@
               handlers,
               server,
               cache: browserCache,
+              scheduler,
               attributes
             });
             runtime.loader = loader;
 
             configureServerContext({ cache: browserCache });
-            signals._setContext?.({ server, loader, cache: browserCache });
+            signals._setContext?.({ server, loader, cache: browserCache, scheduler });
 
             loader.start();
 
@@ -3804,6 +4322,7 @@
                 server,
                 cache: browserCache,
                 partials,
+                scheduler,
                 fetch: options.fetch,
                 routeEndpoint: options.routeEndpoint,
                 attributes
@@ -3815,7 +4334,7 @@
             }
           } else {
             configureServerContext({ cache: serverCache });
-            signals._setContext?.({ server, cache: serverCache });
+            signals._setContext?.({ server, cache: serverCache, scheduler });
           }
 
           return runtime;
@@ -3829,9 +4348,10 @@
         async render(url) {
           assertActive();
           configureServerContext({ cache: serverCache });
-          signals._setContext?.({ server, cache: serverCache });
+          signals._setContext?.({ server, cache: serverCache, scheduler });
           const matched = routes.match(url);
           if (!matched) {
+            await scheduler.flush();
             return {
               html: renderDocument("", { status: 404, signals, browserCache, boundary: options.boundary ?? "route", attributes }),
               status: 404,
@@ -3851,8 +4371,8 @@
                 cache: serverCache,
                 browserCache,
                 partials,
-                request: options.request,
-                locals: options.locals
+                scheduler,
+                ...currentRequestContext()
               })
             : { html: "" };
 
@@ -3865,6 +4385,8 @@
             browserCache.restore(result.cache.browser);
           }
 
+          await scheduler.flush();
+
           const status = result.status ?? 200;
           return {
             html: renderDocument(result.html, { status, signals, browserCache, boundary: result.boundary ?? options.boundary ?? "route", attributes }),
@@ -3883,6 +4405,9 @@
           router?.destroy?.();
           loader?.destroy?.();
           signals.destroy?.();
+          if (ownsScheduler) {
+            scheduler.destroy();
+          }
         },
 
         _applyUse(normalized) {
@@ -3903,11 +4428,23 @@
           loader,
           router,
           cache,
-          request: options.request,
-          locals: options.locals
+          scheduler,
+          requestContext: options.requestContext,
+          ...currentRequestContext()
         });
       }
 
+      function currentRequestContext() {
+        const context = readRequestContextLike(options.requestContext);
+        return {
+          requestContext: context,
+          request: context.request ?? options.request,
+          headers: context.headers ?? options.headers,
+          cookies: context.cookies ?? options.cookies,
+          locals: context.locals ?? options.locals
+        };
+      }
+
       function assertActive() {
         if (destroyed) {
           throw new Error("Async app runtime has been destroyed.");
@@ -3917,6 +4454,38 @@
 
     const Async = defineApp();
 
+    function readSnapshot(root = globalThis.document, { attributes } = {}) {
+      const attributeConfig = normalizeAttributeConfig(attributes);
+      const snapshotAttr = attributeName(attributeConfig, "async", "snapshot");
+      const documentRef = root?.ownerDocument ?? root ?? globalThis.document;
+      const rootNode = root ?? documentRef;
+      if (!rootNode?.querySelectorAll && !documentRef?.querySelectorAll) {
+        return {};
+      }
+
+      for (const searchRoot of new Set([rootNode, documentRef])) {
+        if (!searchRoot?.querySelectorAll) {
+          continue;
+        }
+        for (const script of searchRoot.querySelectorAll("script[type='application/json'], script")) {
+          if (!script.hasAttribute?.(snapshotAttr)) {
+            continue;
+          }
+          const source = script.textContent?.trim() ?? "";
+          if (!source) {
+            return {};
+          }
+          try {
+            return JSON.parse(source);
+          } catch (cause) {
+            throw new Error(`Could not parse Async snapshot: ${cause instanceof Error ? cause.message : String(cause)}`);
+          }
+        }
+      }
+
+      return {};
+    }
+
     function applyUseToRuntime(runtime, normalized) {
       applyRegistryUse(runtime.signals, runtime.registry, normalized.signal);
       applyRegistryUse(runtime.handlers, runtime.registry, normalized.handler);
@@ -4029,6 +4598,77 @@
       }
     }
 
+    function createServerReferenceRegistry(initialMap = {}, options = {}) {
+      const registry = options.registry ?? createRegistryStore();
+      const type = options.type ?? "server";
+      const defaults = {};
+
+      const reference = {
+        registry,
+
+        register(id, value) {
+          registry.register(type, id, value);
+          return id;
+        },
+
+        registerMany(map) {
+          for (const [id, value] of Object.entries(map ?? {})) {
+            reference.register(id, value);
+          }
+          return reference;
+        },
+
+        unregister(id) {
+          return registry.unregister(type, id);
+        },
+
+        resolve() {
+          return undefined;
+        },
+
+        async run(id) {
+          throw new Error(`Server command "${id}" cannot run without a server proxy or server registry.`);
+        },
+
+        keys() {
+          return registry.keys(type);
+        },
+
+        entries() {
+          return registry.entries(type);
+        },
+
+        inspect() {
+          return registry.entries(type);
+        },
+
+        _setContext(context = {}) {
+          Object.assign(defaults, context);
+          return reference;
+        },
+
+        _adoptMany() {
+          return reference;
+        }
+      };
+
+      reference.registerMany(initialMap);
+      return createServerNamespace((id, args, context) => reference.run(id, args, context), reference, () => defaults);
+    }
+
+    function readRequestContextLike(store) {
+      if (!store) {
+        return {};
+      }
+      if (typeof store.get === "function") {
+        return store.get() ?? {};
+      }
+      if (typeof store.getStore === "function") {
+        return store.getStore() ?? {};
+      }
+      return {};
+    }
+
     function normalizeEntries(type, entries = {}) {
       if (type !== "signal") {
         return { ...(entries ?? {}) };
@@ -4077,7 +4717,7 @@
     function escapeScriptJson(value) {
       return JSON.stringify(value).replaceAll("<", "\\u003c");
     }
-    return { defineApp, createApp, Async };
+    return { defineApp, createApp, readSnapshot, Async };
   })();
 
   const __delayModule = (() => {
@@ -4118,6 +4758,7 @@
   const { Async: Async } = __appModule;
   const { createApp: createApp } = __appModule;
   const { defineApp: defineApp } = __appModule;
+  const { readSnapshot: readSnapshot } = __appModule;
   const { attributeName: attributeName } = __attributesModule;
   const { defineAttributeConfig: defineAttributeConfig } = __attributesModule;
   const { createCacheRegistry: createCacheRegistry } = __cacheModule;
@@ -4136,14 +4777,17 @@
   const { createRouter: createRouter } = __routerModule;
   const { defineRoute: defineRoute } = __routerModule;
   const { route: route } = __routerModule;
+  const { createScheduler: createScheduler } = __schedulerModule;
+  const { applyServerResult: applyServerResult } = __serverModule;
   const { createServerProxy: createServerProxy } = __serverModule;
-  const { createServerRegistry: createServerRegistry } = __serverModule;
+  const { resolveServerCommandArguments: resolveServerCommandArguments } = __serverModule;
+  const { unwrapServerResult: unwrapServerResult } = __serverModule;
   const { computed: computed } = __signalsModule;
   const { createSignal: createSignal } = __signalsModule;
   const { createSignalRegistry: createSignalRegistry } = __signalsModule;
   const { effect: effect } = __signalsModule;
   const { signal: signal } = __signalsModule;
-  const api = { asyncSignal, Async, createApp, defineApp, attributeName, defineAttributeConfig, createCacheRegistry, defineCache, component, createComponentRegistry, defineComponent, delay, createHandlerRegistry, html, Loader, AsyncLoader, createPartialRegistry, createRegistryStore, createRouteRegistry, createRouter, defineRoute, route, createServerProxy, createServerRegistry, computed, createSignal, createSignalRegistry, effect, signal };
+  const api = { asyncSignal, Async, createApp, defineApp, readSnapshot, attributeName, defineAttributeConfig, createCacheRegistry, defineCache, component, createComponentRegistry, defineComponent, delay, createHandlerRegistry, html, Loader, AsyncLoader, createPartialRegistry, createRegistryStore, createRouteRegistry, createRouter, defineRoute, route, createScheduler, applyServerResult, createServerProxy, resolveServerCommandArguments, unwrapServerResult, computed, createSignal, createSignalRegistry, effect, signal };
   assertNoUmdNamespaceConflicts(api, Async);
   Object.assign(Async, api);
   Async.Async = Async;