@async/framework 0.10.1 → 0.11.0

package/browser.umd.js

@@ -329,10 +329,20 @@
           const resolved = resolveDescriptorUrl(type, id, descriptor, registryAssets);
           let modulePromise = moduleCache.get(resolved.moduleUrl);
           if (!modulePromise) {
-            modulePromise = Promise.resolve(importModule(resolved.moduleUrl));
+            modulePromise = Promise.resolve().then(() => importModule(resolved.moduleUrl));
             moduleCache.set(resolved.moduleUrl, modulePromise);
           }
-          const module = await modulePromise;
+          let module;
+          try {
+            module = await modulePromise;
+          } catch (cause) {
+            if (moduleCache.get(resolved.moduleUrl) === modulePromise) {
+              moduleCache.delete(resolved.moduleUrl);
+            }
+            throw new Error(`Lazy ${type} "${id}" failed to import ${resolved.moduleUrl}: ${errorMessage(cause)}`, {
+              cause
+            });
+          }
           const value = resolveExport(module, resolved.exportNames, type, id);
           exportCache.set(cacheKey, value);
           return value;
@@ -492,6 +502,10 @@
       return /^[A-Za-z][A-Za-z\d+.-]*:/.test(value);
     }
 
+    function errorMessage(error) {
+      return error instanceof Error ? error.message : String(error);
+    }
+
     function stableStringify(value) {
       if (!value || typeof value !== "object" || Array.isArray(value)) {
         return JSON.stringify(value);
@@ -820,15 +834,7 @@
 
         get(key) {
           assertKey(key);
-          const entry = entries.get(key);
-          if (!entry) {
-            return undefined;
-          }
-          if (entry.expiresAt !== undefined && entry.expiresAt <= now()) {
-            entries.delete(key);
-            return undefined;
-          }
-          return entry.value;
+          return readEntry(key).value;
         },
 
         set(key, value, options = {}) {
@@ -846,9 +852,9 @@
           if (typeof fn !== "function") {
             throw new TypeError("cache.getOrSet(key, fn) requires a function.");
           }
-          const cached = registryApi.get(key);
-          if (cached !== undefined) {
-            return cached;
+          const cached = readEntry(key);
+          if (cached.found) {
+            return cached.value;
           }
           if (pending.has(key)) {
             return pending.get(key);
@@ -899,8 +905,8 @@
         snapshot() {
           const snapshot = {};
           for (const [key] of entries) {
-            const value = registryApi.get(key);
-            if (value !== undefined) {
+            const { found, value } = readEntry(key);
+            if (found && value !== undefined) {
               snapshot[key] = value;
             }
           }
@@ -940,6 +946,18 @@
         const prefix = key.split(":")[0];
         return definitions.get(prefix);
       }
+
+      function readEntry(key) {
+        const entry = entries.get(key);
+        if (!entry) {
+          return { found: false, value: undefined };
+        }
+        if (entry.expiresAt !== undefined && entry.expiresAt <= now()) {
+          entries.delete(key);
+          return { found: false, value: undefined };
+        }
+        return { found: true, value: entry.value };
+      }
     }
 
     function normalizeDefinition(definition) {
@@ -2158,7 +2176,7 @@
 
     function createServerProxy({
       endpoint = "/__async/server",
-      fetch: fetchImpl = globalThis.fetch?.bind(globalThis),
+      transport,
       signals,
       loader,
       router,
@@ -2166,8 +2184,8 @@
       scheduler,
       headers = {}
     } = {}) {
-      if (typeof fetchImpl !== "function") {
-        throw new TypeError("createServerProxy(...) requires fetch to be available.");
+      if (typeof transport !== "function") {
+        throw new TypeError("createServerProxy(...) requires a transport function.");
       }
 
       const defaults = { signals, loader, router, cache, scheduler };
@@ -2182,7 +2200,7 @@
         };
         assertJsonTransportable(body);
 
-        const response = await fetchImpl(joinEndpoint(endpoint, id), {
+        const response = await transport(joinEndpoint(endpoint, id), {
           method: "POST",
           headers: {
             "content-type": "application/json",
@@ -2459,14 +2477,17 @@
       return output;
     }
 
-    function assertJsonTransportable(value, seen = new Set()) {
+    function assertJsonTransportable(value, stack = new Set()) {
+      if (typeof value === "bigint") {
+        throw new Error("Server proxy JSON transport does not support BigInt values.");
+      }
       if (value == null || typeof value !== "object") {
         return;
       }
-      if (seen.has(value)) {
-        return;
+      if (stack.has(value)) {
+        throw new Error("Server proxy JSON transport does not support circular values.");
       }
-      seen.add(value);
+      stack.add(value);
 
       const tag = Object.prototype.toString.call(value);
       if (tag === "[object File]" || tag === "[object Blob]" || tag === "[object FormData]") {
@@ -2474,13 +2495,15 @@
       }
       if (Array.isArray(value)) {
         for (const item of value) {
-          assertJsonTransportable(item, seen);
+          assertJsonTransportable(item, stack);
         }
+        stack.delete(value);
         return;
       }
       for (const item of Object.values(value)) {
-        assertJsonTransportable(item, seen);
+        assertJsonTransportable(item, stack);
       }
+      stack.delete(value);
     }
 
     function joinEndpoint(endpoint, id) {
@@ -3125,6 +3148,7 @@
             return;
           }
           destroyed = true;
+          markDestroyedScopes(rootNode);
           for (const cleanup of [...cleanups]) {
             runCleanup(cleanup);
           }
@@ -3575,6 +3599,12 @@
         });
       }
 
+      function markDestroyedScopes(scope) {
+        for (const element of elementsIn(scope)) {
+          schedulerInstance.markScopeDestroyed(element);
+        }
+      }
+
       return api;
     }
 
@@ -3954,6 +3984,8 @@
 
     const route = defineRoute;
 
+    const routerModes = new Set(["csr", "spa", "ssr", "mpa"]);
+
     function createRouteRegistry(initialMap = {}, options = {}) {
       const registryStore = options.registry ?? createRegistryStore();
       const type = options.type ?? "route";
@@ -4000,7 +4032,7 @@
             }
             const params = {};
             candidate.keys.forEach((key, index) => {
-              params[key] = decodeURIComponent(match[index + 1] ?? "");
+              params[key] = safeDecodeURIComponent(match[index + 1] ?? "");
             });
             return {
               pattern: candidate.pattern,
@@ -4049,7 +4081,7 @@
     }
 
     function createRouter({
-      mode = "ssr-spa",
+      mode = "ssr",
       root,
       boundary = "route",
       routes = createRouteRegistry(),
@@ -4059,11 +4091,10 @@
       server,
       cache,
       partials,
-      fetch: fetchImpl = globalThis.fetch?.bind(globalThis),
-      routeEndpoint = "/__async/route",
       attributes,
       scheduler
     } = {}) {
+      assertRouterMode(mode);
       const documentRef = root?.ownerDocument ?? root ?? globalThis.document;
       const rootNode = root ?? documentRef;
       const signalRegistry = signals ?? loader?.signals ?? createSignalRegistry();
@@ -4115,11 +4146,11 @@
           }
           bindNavigation();
           if (mode === "csr") {
-            void api.navigate(currentUrl(), {
+            handleNavigation(api.navigate(currentUrl(), {
               replace: true,
               initial: true,
               source: "client"
-            }).catch(() => {});
+            }));
             return api;
           }
           updateStateFromLocation();
@@ -4132,16 +4163,13 @@
 
         prefetch(url) {
           assertActive();
-          if (mode === "ssr-spa" && typeof fetchImpl === "function") {
-            return fetchRoute(url, { prefetch: true });
+          if (mode === "mpa" || mode === "ssr") {
+            return Promise.resolve(null);
           }
           const matched = api.match(url);
           if (matched?.route?.partial && partials?.resolve?.(matched.route.partial)) {
             return partials.render(matched.route.partial, matched.params, contextFor(matched));
           }
-          if (typeof fetchImpl === "function") {
-            return fetchRoute(url, { prefetch: true });
-          }
           return Promise.resolve(null);
         },
 
@@ -4153,9 +4181,6 @@
           }
 
           const target = resolveUrl(url);
-          if (mode === "ssr-spa") {
-            return fetchRoutePartial(target, options);
-          }
           return renderLocalRoutePartial(target, options);
         },
 
@@ -4184,7 +4209,7 @@
             return;
           }
           event.preventDefault();
-          api.navigate(anchor.href);
+          handleNavigation(api.navigate(anchor.href));
         };
         const submit = (event) => {
           const form = closest(event.target, "form");
@@ -4192,9 +4217,9 @@
             return;
           }
           event.preventDefault();
-          api.navigate(formActionUrl(form));
+          handleNavigation(api.navigate(formActionUrl(form)));
         };
-        const popstate = () => api.navigate(currentUrl(), { history: false });
+        const popstate = () => handleNavigation(api.navigate(currentUrl(), { history: false }));
 
         rootNode.addEventListener?.("click", click);
         rootNode.addEventListener?.("submit", submit);
@@ -4243,31 +4268,6 @@
         }
       }
 
-      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, { 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, navigation) {
         if (!isActiveNavigation(navigation)) {
           return;
@@ -4298,29 +4298,6 @@
         documentRef.defaultView?.history?.pushState?.({}, "", target.href);
       }
 
-      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}.`);
-        }
-        if (prefetch) {
-          return response;
-        }
-        const type = response.headers.get("content-type") ?? "";
-        if (type.includes("application/json")) {
-          return response.json();
-        }
-        return { boundary, html: await response.text() };
-      }
-
       function contextFor(matched, navigation) {
         return {
           params: matched.params,
@@ -4387,6 +4364,19 @@
         }
       }
 
+      function handleNavigation(promise) {
+        void promise.catch((error) => {
+          if (destroyed) {
+            return;
+          }
+          setRouterState({
+            pending: false,
+            error
+          });
+          dispatchAsyncError(rootNode, error);
+        });
+      }
+
       function currentUrl() {
         return resolveUrl(documentRef.defaultView?.location?.href ?? "http://localhost/");
       }
@@ -4403,6 +4393,33 @@
           throw new Error("Router has been destroyed.");
         }
       }
+
+      function shouldIgnoreLink(event, anchor) {
+        if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+          return true;
+        }
+        if (anchor.target || anchor.hasAttribute("download")) {
+          return true;
+        }
+        const target = resolveUrl(anchor.href);
+        const current = currentUrl();
+        if (target.origin !== current.origin) {
+          return true;
+        }
+        return isHashOnlyNavigation(target, current, anchor);
+      }
+
+      function shouldIgnoreForm(form) {
+        const method = String(form.method || "get").toLowerCase();
+        return method !== "get" || resolveUrl(form.action).origin !== currentUrl().origin;
+      }
+
+      function formActionUrl(form) {
+        const url = resolveUrl(form.action || form.ownerDocument.defaultView.location.href);
+        const formData = new form.ownerDocument.defaultView.FormData(form);
+        url.search = new URLSearchParams(formData).toString();
+        return url.href;
+      }
     }
 
     function normalizeRoute(pattern, definition) {
@@ -4440,28 +4457,6 @@
       return { regex: new RegExp(`^${source}$`), keys };
     }
 
-    function shouldIgnoreLink(event, anchor) {
-      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
-        return true;
-      }
-      if (anchor.target || anchor.hasAttribute("download")) {
-        return true;
-      }
-      return toUrl(anchor.href).origin !== toUrl(anchor.ownerDocument.defaultView.location.href).origin;
-    }
-
-    function shouldIgnoreForm(form) {
-      const method = String(form.method || "get").toLowerCase();
-      return method !== "get" || toUrl(form.action).origin !== toUrl(form.ownerDocument.defaultView.location.href).origin;
-    }
-
-    function formActionUrl(form) {
-      const url = toUrl(form.action || form.ownerDocument.defaultView.location.href);
-      const formData = new form.ownerDocument.defaultView.FormData(form);
-      url.search = new URLSearchParams(formData).toString();
-      return url.href;
-    }
-
     function closest(target, selector) {
       return target?.closest?.(selector);
     }
@@ -4477,6 +4472,40 @@
       return Object.fromEntries(url.searchParams.entries());
     }
 
+    function safeDecodeURIComponent(value) {
+      try {
+        return decodeURIComponent(value);
+      } catch {
+        return value;
+      }
+    }
+
+    function isHashOnlyNavigation(target, current, anchor) {
+      if (target.origin !== current.origin || target.pathname !== current.pathname || target.search !== current.search) {
+        return false;
+      }
+      return target.hash !== current.hash || anchor.getAttribute?.("href")?.startsWith("#") === true;
+    }
+
+    function assertRouterMode(mode) {
+      if (!routerModes.has(mode)) {
+        throw new TypeError(`Unknown router mode "${mode}".`);
+      }
+    }
+
+    function dispatchAsyncError(element, error) {
+      const EventCtor = element.ownerDocument?.defaultView?.CustomEvent ?? globalThis.CustomEvent;
+      if (typeof EventCtor !== "function") {
+        return;
+      }
+      element.dispatchEvent?.(
+        new EventCtor("async:error", {
+          bubbles: true,
+          detail: { error }
+        })
+      );
+    }
+
     function escapeRegExp(value) {
       return String(value).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
     }
@@ -4862,7 +4891,7 @@
           return;
         }
         router = router ?? createRouter({
-          mode: options.mode ?? "ssr-spa",
+          mode: options.mode ?? "ssr",
           root,
           boundary: options.boundary ?? "route",
           routes,
@@ -4873,8 +4902,6 @@
           cache: browserCache,
           partials,
           scheduler,
-          fetch: options.fetch,
-          routeEndpoint: options.routeEndpoint,
           attributes
         });
         runtime.router = router;