@async/framework 0.6.0 → 0.7.0

package/framework.umd.min.js

@@ -481,6 +481,7 @@ function createCacheRegistry(initialMap = {}, { now = () => Date.now(), registry
 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()) {
 assertId(id);
@@ -535,17 +536,35 @@ const cached = registryApi.get(key);
 if (cached !== undefined) {
 return cached;
 }
-const value = await fn();
+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()]) {
@@ -553,6 +572,11 @@ if (key.startsWith(prefix)) {
 entries.delete(key);
 }
 }
+for (const key of [...pending.keys()]) {
+if (key.startsWith(prefix)) {
+pending.delete(key);
+}
+}
 return registryApi;
 },
 snapshot() {
@@ -1544,6 +1568,8 @@ return { defineComponent, createComponentRegistry, isComponent, renderComponent,
 const __serverModule = (() => {
 const { attachRegistryInspection, createRegistryStore } = __registryStoreModule;
 const serverEnvelopeKeys = new Set(["value", "signals", "boundary", "html", "redirect", "error"]);
+const appliedServerResult = Symbol.for("@async/framework.appliedServerResult");
+const appliedServerValues = new WeakSet();
 function createServerRegistry(initialMap = {}, options = {}) {
 const registryStore = options.registry ?? createRegistryStore();
 const type = options.type ?? "server";
@@ -1634,6 +1660,7 @@ args,
 input: context.input ?? defaultInput(runContext),
 signals: context.signalValues ?? snapshotSignalPaths(context.signalPaths, runContext.signals)
 };
+assertJsonTransportable(body);
 const response = await fetchImpl(joinEndpoint(endpoint, id), {
 method: "POST",
 headers: {
@@ -1648,7 +1675,7 @@ throw new Error(`Server function "${id}" failed with ${response.status}.`);
 }
 const result = await readServerResponse(response);
 await applyServerResult(result, runContext);
-return unwrapServerResult(result);
+return markAppliedServerValue(unwrapServerResult(result));
 }
 return createServerNamespace(run, {
 run,
@@ -1677,6 +1704,9 @@ async function applyServerResult(result, context = {}) {
 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)) {
 context.signals.set?.(path, value);
@@ -1694,6 +1724,11 @@ await context.router?.navigate?.(result.redirect);
 if (result.error) {
 throw toError(result.error);
 }
+Object.defineProperty(result, appliedServerResult, {
+configurable: true,
+enumerable: false,
+value: true
+});
 return result;
 }
 function unwrapServerResult(result) {
@@ -1702,6 +1737,12 @@ return result.value;
 }
 return result;
 }
+function markAppliedServerValue(value) {
+if (value && typeof value === "object") {
+appliedServerValues.add(value);
+}
+return value;
+}
 function defaultInput(context = {}) {
 const form = findForm(context);
 if (form) {
@@ -1861,6 +1902,28 @@ output[key] = value;
 }
 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)}`;
 }
@@ -2851,6 +2914,7 @@ throw new Error(`Route "${pattern}" is already registered.`);
 const nextRoute = normalizeRoute(pattern, definition);
 entries.set(pattern, nextRoute.definition);
 routes.push(nextRoute);
+sortRoutes(routes);
 return nextRoute;
 },
 registerMany(map) {
@@ -2914,6 +2978,7 @@ return;
 const nextRoute = normalizeRoute(pattern, definition);
 entries.set(pattern, nextRoute.definition);
 routes.push(nextRoute);
+sortRoutes(routes);
 }
 }
 function createRouter({
@@ -2949,6 +3014,8 @@ attributes: attributeConfig
 const ownsLoader = !loader;
 const cleanups = new Set();
 let destroyed = false;
+let navigationVersion = 0;
+let activeNavigation;
 const api = {
 mode,
 root: rootNode,
@@ -2985,7 +3052,7 @@ updateStateFromLocation();
 return api;
 },
 match(url) {
-return routes.match(url);
+return routes.match(resolveUrl(url));
 },
 prefetch(url) {
 assertActive();
@@ -3007,7 +3074,7 @@ if (mode === "mpa" || mode === "ssr") {
 documentRef.defaultView?.location?.assign?.(url);
 return null;
 }
-const target = toUrl(url);
+const target = resolveUrl(url);
 if (mode === "ssr-spa") {
 return fetchRoutePartial(target, options);
 }
@@ -3018,6 +3085,7 @@ if (destroyed) {
 return;
 }
 destroyed = true;
+activeNavigation?.controller.abort(new Error("Router has been destroyed."));
 for (const cleanup of cleanups) {
 cleanup();
 }
@@ -3053,45 +3121,75 @@ cleanups.add(() => documentRef.defaultView?.removeEventListener?.("popstate", po
 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.`);
+if (isActiveNavigation(navigation)) {
 setRouterState({ pending: false, error });
+}
+return null;
+}
+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;
 }
-const result = await partials.render(matched.route.partial, matched.params, contextFor(matched));
-await applyNavigationResult(result, target, options);
 setRouterState({ pending: false, error: null });
 return result;
 } catch (error) {
+if (!isActiveNavigation(navigation)) {
+return null;
+}
 setRouterState({ pending: false, error });
 throw error;
 }
 }
 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,
+abort: navigation?.abort
 });
+if (!isActiveNavigation(navigation)) {
+return;
+}
 if (result?.html != null && !result.boundary && !result.redirect) {
 loaderInstance.swap(boundary, result.html);
 }
@@ -3104,14 +3202,15 @@ return;
 }
 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}.`);
@@ -3125,7 +3224,7 @@ return response.json();
 }
 return { boundary, html: await response.text() };
 }
-function contextFor(matched) {
+function contextFor(matched, navigation) {
 return {
 params: matched.params,
 route: matched.route,
@@ -3135,8 +3234,24 @@ handlers: handlerRegistry,
 loader: loaderInstance,
 server,
 cache,
-abort: undefined
+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() {
 const url = currentUrl();
@@ -3168,7 +3283,13 @@ signalRegistry.set(`router.${key}`, value);
 }
 }
 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() {
 if (destroyed) {
@@ -3183,6 +3304,7 @@ return {
 pattern,
 regex,
 keys,
+score: routeScore(pattern),
 definition: normalized
 };
 }
@@ -3240,6 +3362,26 @@ return Object.fromEntries(url.searchParams.entries());
 function escapeRegExp(value) {
 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 \"*\".");
@@ -3311,7 +3453,7 @@ let router = options.router;
 let detach = () => {};
 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 = {
 app,
@@ -3459,6 +3601,35 @@ throw new Error("Async app runtime has been destroyed.");
 }
 }
 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);
@@ -3598,7 +3769,7 @@ return String(value)
 function escapeScriptJson(value) {
 return JSON.stringify(value).replaceAll("<", "\\u003c");
 }
-return { defineApp, createApp, Async };
+return { defineApp, createApp, readSnapshot, Async };
 })();
 const __delayModule = (() => {
 function delay(ms, signal) {
@@ -3632,6 +3803,7 @@ const { asyncSignal: asyncSignal } = __asyncSignalModule;
 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;
@@ -3657,7 +3829,7 @@ 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, createServerProxy, createServerRegistry, computed, createSignal, createSignalRegistry, effect, signal };
 assertNoUmdNamespaceConflicts(api, Async);
 Object.assign(Async, api);
 Async.Async = Async;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@async/framework",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "No-build Loader app runtime with signals, command events, server calls, route partials, cache split, SSR activation, and streaming boundaries.",
   "type": "module",
   "packageManager": "pnpm@11.1.0",

package/src/app.js

@@ -73,7 +73,7 @@ export function createApp(appOrDefinition = Async, options = {}) {
   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 = {
@@ -241,6 +241,38 @@ export function createApp(appOrDefinition = Async, options = {}) {
 
 export const Async = defineApp();
 
+export 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);

package/src/cache.js

@@ -15,6 +15,7 @@ export function createCacheRegistry(initialMap = {}, { now = () => Date.now(), r
   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()) {
@@ -76,19 +77,37 @@ export function createCacheRegistry(initialMap = {}, { now = () => Date.now(), r
       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()]) {
@@ -96,6 +115,11 @@ export function createCacheRegistry(initialMap = {}, { now = () => Date.now(), r
           entries.delete(key);
         }
       }
+      for (const key of [...pending.keys()]) {
+        if (key.startsWith(prefix)) {
+          pending.delete(key);
+        }
+      }
       return registryApi;
     },
 

package/src/index.js

@@ -1,5 +1,5 @@
 export { asyncSignal } from "./async-signal.js";
-export { Async, createApp, defineApp } from "./app.js";
+export { Async, createApp, defineApp, readSnapshot } from "./app.js";
 export { attributeName, defineAttributeConfig } from "./attributes.js";
 export { createCacheRegistry, defineCache } from "./cache.js";
 export { component, createComponentRegistry, defineComponent } from "./component.js";