@async/framework 0.6.0 → 0.7.0

package/framework.min.js

@@ -469,6 +469,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);
@@ -523,17 +524,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()]) {
@@ -541,6 +560,11 @@ if (key.startsWith(prefix)) {
 entries.delete(key);
 }
 }
+for (const key of [...pending.keys()]) {
+if (key.startsWith(prefix)) {
+pending.delete(key);
+}
+}
 return registryApi;
 },
 snapshot() {
@@ -1532,6 +1556,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";
@@ -1622,6 +1648,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: {
@@ -1636,7 +1663,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,
@@ -1665,6 +1692,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);
@@ -1682,6 +1712,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) {
@@ -1690,6 +1725,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) {
@@ -1849,6 +1890,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)}`;
 }
@@ -2839,6 +2902,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) {
@@ -2902,6 +2966,7 @@ return;
 const nextRoute = normalizeRoute(pattern, definition);
 entries.set(pattern, nextRoute.definition);
 routes.push(nextRoute);
+sortRoutes(routes);
 }
 }
 function createRouter({
@@ -2937,6 +3002,8 @@ attributes: attributeConfig
 const ownsLoader = !loader;
 const cleanups = new Set();
 let destroyed = false;
+let navigationVersion = 0;
+let activeNavigation;
 const api = {
 mode,
 root: rootNode,
@@ -2973,7 +3040,7 @@ updateStateFromLocation();
 return api;
 },
 match(url) {
-return routes.match(url);
+return routes.match(resolveUrl(url));
 },
 prefetch(url) {
 assertActive();
@@ -2995,7 +3062,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);
 }
@@ -3006,6 +3073,7 @@ if (destroyed) {
 return;
 }
 destroyed = true;
+activeNavigation?.controller.abort(new Error("Router has been destroyed."));
 for (const cleanup of cleanups) {
 cleanup();
 }
@@ -3041,45 +3109,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);
 }
@@ -3092,14 +3190,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}.`);
@@ -3113,7 +3212,7 @@ return response.json();
 }
 return { boundary, html: await response.text() };
 }
-function contextFor(matched) {
+function contextFor(matched, navigation) {
 return {
 params: matched.params,
 route: matched.route,
@@ -3123,8 +3222,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();
@@ -3156,7 +3271,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) {
@@ -3171,6 +3292,7 @@ return {
 pattern,
 regex,
 keys,
+score: routeScore(pattern),
 definition: normalized
 };
 }
@@ -3228,6 +3350,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 \"*\".");
@@ -3299,7 +3441,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,
@@ -3447,6 +3589,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);
@@ -3586,7 +3757,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) {
@@ -3620,6 +3791,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;
@@ -3645,4 +3817,4 @@ const { createSignal: createSignal } = __signalsModule;
 const { createSignalRegistry: createSignalRegistry } = __signalsModule;
 const { effect: effect } = __signalsModule;
 const { signal: signal } = __signalsModule;
-export { 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 };
+export { 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 };