@vesk/runtime 0.2.22 → 0.2.24

package/dist/router.js

@@ -2,39 +2,66 @@ import { get, set, scope, set_active_block } from '@vesk/runtime/src/ripple-runt
 import { root } from '@vesk/runtime/src/ripple-blocks';
 import { createHydrateWalker, hydrateViewport, hydrateIdle, hydrateOnInteraction } from '@vesk/runtime/src/hydrate';
 import { matchRoute, flattenLayoutChain, buildTreeFromMap } from '@vesk/runtime/src/router-match';
-import { setIsHydrating, _state, _scrollPositions, _isPopStateNavigation, setIsPopStateNavigation, setCurrentRouter, showLoadingInContainer, handleScroll, applyHead, findLoadingComponent, findErrorComponent, findNotFoundComponent, findOfflineComponent, findNetworkComponent, getCurrentRouter, Outlet, Link, NavLink, useNavigate, useParams, usePathname, useSearchParams, useRouter, Redirect, redirect, permanentRedirect, NotFoundError, notFound, } from '@vesk/runtime/src/router-components';
+import { setIsHydrating, _state, _scrollPositions, _isPopStateNavigation, setIsPopStateNavigation, setCurrentRouter, captureInitialScroll, showLoadingInContainer, handleScroll, applyHead, findLoadingComponent, findErrorComponent, findNotFoundComponent, findOfflineComponent, findNetworkComponent, getCurrentRouter, Outlet, Link, NavLink, useNavigate, useParams, usePathname, useSearchParams, useRouter, Redirect, redirect, permanentRedirect, NotFoundError, notFound, } from '@vesk/runtime/src/router-components';
 import { getNetworkState, watchNetwork } from '@vesk/runtime/src/network';
 import { loadingStart, loadingFinish, getLoadingState } from '@vesk/runtime/src/loading-indicator';
 export { Outlet, Link, NavLink, useNavigate, useParams, usePathname, useSearchParams, useRouter, Redirect, redirect, permanentRedirect, NotFoundError, notFound, ensureChunk, };
 export { matchRoute } from '@vesk/runtime/src/router-match';
 const loadedChunks = new Set();
 const failedChunks = new Map();
+const inFlightChunks = new Map();
 function chunkLoadError(chunkUrl) {
     return failedChunks.get(chunkUrl);
 }
 function ensureChunk(chunkUrl) {
     if (!chunkUrl || loadedChunks.has(chunkUrl))
         return Promise.resolve();
-    loadedChunks.add(chunkUrl);
+    const inFlight = inFlightChunks.get(chunkUrl);
+    if (inFlight)
+        return inFlight;
     if (typeof document === 'undefined' || typeof document.createElement !== 'function') {
         return Promise.resolve();
     }
-    return new Promise((resolve, reject) => {
+    const promise = new Promise((resolve, reject) => {
         const s = document.createElement('script');
         s.src = chunkUrl;
+        let settled = false;
+        const fail = (err) => {
+            if (settled)
+                return;
+            settled = true;
+            clearTimeout(timer);
+            inFlightChunks.delete(chunkUrl);
+            failedChunks.set(chunkUrl, err);
+            reject(err);
+        };
         s.onload = () => {
+            if (settled)
+                return;
+            settled = true;
+            clearTimeout(timer);
+            loadedChunks.add(chunkUrl);
+            inFlightChunks.delete(chunkUrl);
             failedChunks.delete(chunkUrl);
             resolve();
         };
         s.onerror = () => {
-            loadedChunks.delete(chunkUrl);
-            const err = new Error(`Failed to load chunk: ${chunkUrl}`);
-            failedChunks.set(chunkUrl, err);
-            reject(err);
+            fail(new Error(`Failed to load chunk: ${chunkUrl}`));
         };
+        const timer = setTimeout(() => {
+            fail(new Error(`Timed out loading chunk: ${chunkUrl}`));
+        }, CHUNK_LOAD_TIMEOUT_MS);
         document.head.appendChild(s);
     });
+    inFlightChunks.set(chunkUrl, promise);
+    return promise;
 }
+// A chunk script that never fires load/error (dev server slow to respond,
+// throttled connection) must not strand the navigation forever — the URL is
+// already updated before chunks load, so a silent stall would leave the new
+// URL showing the old page. After this timeout the load rejects and the
+// navigation renders its error fallback instead.
+const CHUNK_LOAD_TIMEOUT_MS = 10000;
 /** Loads pending chunks without letting a single failed chunk abort the flow. */
 function loadChunksQuietly(urls) {
     navDebug('loadChunks start', urls);
@@ -52,15 +79,134 @@ function navDebug(...parts) {
 }
 function hasPendingChunks(nodes) {
     const urls = [];
-    function walk(n) {
-        if (n._chunk && !loadedChunks.has(n._chunk))
-            urls.push(n._chunk);
-        if (n.children)
-            n.children.forEach(walk);
+    const seen = new Set();
+    // Only the chunks backing this navigation's match chain (layouts + page
+    // node) are needed. Recursing into a node's children would pull in every
+    // sibling route's chunk — e.g. one nav from the root layout would inject
+    // all 27 page bundles — stalling the navigation while unrelated chunks
+    // load and marking routes that never loaded as "pending".
+    for (const n of nodes) {
+        if (n._chunk && !seen.has(n._chunk)) {
+            seen.add(n._chunk);
+            if (!loadedChunks.has(n._chunk)) {
+                urls.push(n._chunk);
+            }
+        }
     }
-    nodes.forEach(walk);
     return urls;
 }
+/**
+ * Delegated route-chunk preloading for code-split routes.
+ *
+ * Uses bubbling events (`pointerover`/`focusin`) instead of `mouseenter` —
+ * `mouseenter` does NOT bubble, so a listener on `document` only fires once
+ * when the pointer enters the page and never for a specific link. That made
+ * the historic hover-prefetch dead code: the first click on a route always
+ * paid the chunk download (the paint gate) and only later visits were warm.
+ *
+ * Warming loads route chunks early so the chunk roundtrip never blocks first
+ * paint. Route DATA is deliberately left untouched here — it is fetched at
+ * navigation time exactly as before (once per visit), so SSR/initial-load and
+ * data-freshness semantics are unchanged.
+ *
+ * Also warms links already in the DOM: as a link scrolls near the viewport
+ * (IntersectionObserver, 300px margin) its chunk is preloaded for the
+ * first click. Falls back to warming the first 16 links at idle when
+ * IntersectionObserver is unavailable.
+ */
+function installLinkPrefetch(warmChunks) {
+    if (typeof document === 'undefined' || typeof document.addEventListener !== 'function')
+        return;
+    const recent = new Map();
+    const over = (e) => {
+        const target = e.target;
+        if (!target || target.nodeType !== 1)
+            return;
+        const link = target.closest ? target.closest('a[href]') : null;
+        if (!link)
+            return;
+        const href = link.getAttribute('href');
+        if (!href)
+            return;
+        const now = Date.now();
+        if (now - (recent.get(href) || 0) < 500)
+            return;
+        recent.set(href, now);
+        warmChunks(href);
+    };
+    document.addEventListener('pointerover', over, { passive: true });
+    document.addEventListener('focusin', over, { passive: true });
+    const schedule = (cb) => {
+        const ric = typeof window !== 'undefined' && typeof window.requestIdleCallback === 'function'
+            ? window.requestIdleCallback.bind(window)
+            : (fn) => setTimeout(fn, 250);
+        ric(() => { try {
+            cb();
+        }
+        catch { /* best-effort warmup */ } }, { timeout: 2000 });
+    };
+    schedule(() => {
+        if (typeof document.querySelectorAll !== 'function')
+            return;
+        const anchors = Array.from(document.querySelectorAll('a[href]'));
+        if (anchors.length === 0)
+            return;
+        const seen = new Set();
+        let budget = 16;
+        const warm = (a) => {
+            const href = a.getAttribute('href');
+            if (!href || seen.has(href) || budget-- <= 0)
+                return;
+            seen.add(href);
+            warmChunks(href);
+        };
+        if (typeof IntersectionObserver === 'function') {
+            const io = new IntersectionObserver((entries) => {
+                for (const entry of entries) {
+                    if (!entry.isIntersecting)
+                        continue;
+                    warm(entry.target);
+                    io.unobserve(entry.target);
+                }
+                if (budget <= 0)
+                    io.disconnect();
+            }, { rootMargin: '300px' });
+            for (const a of anchors)
+                io.observe(a);
+        }
+        else {
+            for (const a of anchors)
+                warm(a);
+        }
+    });
+}
+/**
+ * Warms the chunks backing a route link without touching route data — the
+ * data fetch stays at navigation time (once per visit), preserving SSR
+ * initial-load and freshness semantics.
+ */
+function warmRouteChunks(routeTree, href) {
+    if (!href)
+        return;
+    let url;
+    try {
+        url = new URL(href, typeof window !== 'undefined' ? window.location.origin : 'http://localhost');
+    }
+    catch {
+        return;
+    }
+    const pathname = url.pathname;
+    if (typeof window !== 'undefined' && pathname === window.location.pathname && !url.search && !url.hash)
+        return;
+    const match = matchRoute(routeTree, pathname);
+    if (!match)
+        return;
+    const urls = hasPendingChunks(match.matchChain);
+    if (urls.length === 0)
+        return;
+    for (const u of urls)
+        ensureChunk(u);
+}
 /**
  * Classifies a data-fetch failure as a connectivity problem rather than a
  * server problem: fetch rejects with TypeError on network failure, and
@@ -1114,6 +1260,7 @@ export function createRouter(routes, options = {}) {
         start() {
             setCurrentRouter(this);
             if (typeof window !== 'undefined' && 'scrollRestoration' in window.history) {
+                captureInitialScroll();
                 window.history.scrollRestoration = 'manual';
             }
             if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
@@ -1197,11 +1344,7 @@ export function createRouter(routes, options = {}) {
                 this.navigate(href);
             });
             if (prefetch) {
-                document.addEventListener('mouseenter', (e) => {
-                    const link = e.target?.nodeType === 1 ? e.target.closest('a[href]') : null;
-                    if (link)
-                        this.prefetch(link.getAttribute('href'));
-                }, { passive: true });
+                installLinkPrefetch((href) => warmRouteChunks(this.routeTree, href));
             }
             const path = routeFromLocation(hashMode);
             if (container.children.length > 0 && !hashMode) {
@@ -1265,7 +1408,7 @@ export function createRouter(routes, options = {}) {
                     }
                     this._currentMatch = match;
                     clearOfflineFlag(this, container);
-                    handleScroll(url.pathname, opts.replace);
+                    handleScroll(url.pathname, opts.replace, opts.scrollBehavior);
                 };
                 const swapView = (fn) => {
                     const d = document;
@@ -1498,6 +1641,7 @@ export function createFileRouter(routeTree, options = {}) {
         start() {
             setCurrentRouter(this);
             if (typeof window !== 'undefined' && 'scrollRestoration' in window.history) {
+                captureInitialScroll();
                 window.history.scrollRestoration = 'manual';
             }
             if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
@@ -1573,11 +1717,7 @@ export function createFileRouter(routeTree, options = {}) {
                 router.navigate(href);
             });
             if (options.prefetch !== false) {
-                document.addEventListener('mouseenter', (e) => {
-                    const link = e.target?.nodeType === 1 ? e.target.closest('a[href]') : null;
-                    if (link)
-                        router.prefetch(link.getAttribute('href'));
-                }, { passive: true });
+                installLinkPrefetch((href) => warmRouteChunks(router.routeTree, href));
             }
             const path = routeFromLocation(hashMode).split('?')[0];
             if (container.children.length > 0 && !hashMode) {
@@ -1674,7 +1814,7 @@ export function createFileRouter(routeTree, options = {}) {
                     }
                     router._currentMatch = match;
                     clearOfflineFlag(router, container);
-                    handleScroll(url.pathname, opts.replace);
+                    handleScroll(url.pathname, opts.replace, opts.scrollBehavior);
                 };
                 const doRender = () => {
                     navDebug('doRender', url.pathname, 'token=' + navToken);
@@ -1788,6 +1928,7 @@ export function createFileRouter(routeTree, options = {}) {
                             router.navigate(e.url, { replace: true });
                             return;
                         }
+                        handleNavFailure(e);
                     }
                 }
                 if (middlewareFns.length > 0 || loadingFn) {
@@ -1919,6 +2060,7 @@ export function buildRouteTree(definitions) {
             notFound: def.notFound || null,
             offline: def.offline ?? null,
             network: def.network ?? null,
+            standalone: def.standalone ? true : undefined,
             children: (def.children || []).map(c => {
                 const cParts = (c.path || '').split('/').filter(Boolean);
                 return {
@@ -1931,6 +2073,7 @@ export function buildRouteTree(definitions) {
                     loading: null,
                     error: null,
                     notFound: null,
+                    standalone: c.standalone ? true : undefined,
                     segmentCount: cParts.length || 1,
                     children: [],
                 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vesk/runtime",
-  "version": "0.2.22",
+  "version": "0.2.24",
   "type": "module",
   "description": "Vesk runtime — reactivity, blocks, DOM operations, hydration",
   "main": "./dist/index-client.js",
@@ -25,8 +25,33 @@
     "./src/*": "./dist/*.js",
     "./package.json": "./package.json"
   },
+  "typesVersions": {
+    "*": {
+      "router": [
+        "dist/index-router.d.ts"
+      ],
+      "client": [
+        "dist/index-client.d.ts"
+      ],
+      "server": [
+        "dist/index-server.d.ts"
+      ],
+      "src/*": [
+        "dist/*"
+      ],
+      "router/*": [
+        "dist/*"
+      ],
+      "client/*": [
+        "dist/*"
+      ],
+      "server/*": [
+        "dist/*"
+      ]
+    }
+  },
   "dependencies": {
-    "@vesk/compiler": "^0.2.22"
+    "@vesk/compiler": "^0.2.24"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",