veryfront 0.1.850 → 0.1.852

package/esm/deno.js

@@ -1,6 +1,6 @@
 export default {
     "name": "veryfront",
-    "version": "0.1.850",
+    "version": "0.1.852",
     "license": "Apache-2.0",
     "nodeModulesDir": "auto",
     "minimumDependencyAge": {

package/esm/src/html/hydration-script-builder/templates/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../../../../src/src/html/hydration-script-builder/templates/router.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,cA+0B3B,CAAC"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../../../../src/src/html/hydration-script-builder/templates/router.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,cAklC3B,CAAC"}

package/esm/src/html/hydration-script-builder/templates/router.js

@@ -36,7 +36,12 @@ export const getRouterScript = () => `
     const BACKGROUND_REFRESH_INTERVAL_MS = 30 * 1000;
     const PREFETCH_DELAY_MS = 100;
     const MAX_PREFETCH_PATHS = 100;
+    const IDLE_PREFETCH_DELAY_MS = 1200;
+    const IDLE_PREFETCH_MAX_LINKS = 4;
+    const VIEWPORT_PREFETCH_MAX_LINKS = 8;
+    const VIEWPORT_PREFETCH_ROOT_MARGIN = '200px';
     const MAX_ROUTE_TIMINGS = 100;
+    const MAX_SERVER_TIMING_LENGTH = 1024;
 
     // ============================================
     // Debug logging (production-safe)
@@ -159,6 +164,139 @@ export const getRouterScript = () => `
       return entry;
     }
 
+    function sanitizeServerTimingHeader(value) {
+      if (!value) return null;
+
+      const metrics = [];
+      const printable = String(value).replace(/[^\\x20-\\x7E]/g, ' ').trim();
+      if (!printable) return null;
+
+      for (const item of printable.split(',')) {
+        const segments = item.split(';').map((segment) => segment.trim()).filter(Boolean);
+        const name = sanitizeServerTimingMetricName(segments[0]);
+        if (!name) continue;
+
+        for (const segment of segments.slice(1)) {
+          const [key, rawValue = ''] = segment.split('=');
+          if (key.trim().toLowerCase() !== 'dur') continue;
+
+          const duration = Number(rawValue.trim().replace(/^"|"$/g, ''));
+          if (!Number.isFinite(duration) || duration < 0) continue;
+
+          metrics.push(name + ';dur=' + (Math.round(duration * 100) / 100).toFixed(2));
+          break;
+        }
+      }
+
+      const sanitized = metrics.join(', ');
+      return sanitized ? sanitized.slice(0, MAX_SERVER_TIMING_LENGTH) : null;
+    }
+
+    function sanitizeServerTimingMetricName(name) {
+      return String(name || '').trim().replace(/[^A-Za-z0-9_.-]/g, '_').slice(0, 128);
+    }
+
+    function parseServerTimingMetrics(value) {
+      const header = sanitizeServerTimingHeader(value);
+      if (!header) return null;
+
+      const metrics = {};
+      for (const item of header.split(',')) {
+        const segments = item.split(';').map((segment) => segment.trim()).filter(Boolean);
+        const name = sanitizeServerTimingMetricName(segments[0]);
+        if (!name) continue;
+
+        for (const segment of segments.slice(1)) {
+          const [key, rawValue = ''] = segment.split('=');
+          if (key.trim().toLowerCase() !== 'dur') continue;
+
+          const duration = Number(rawValue.trim().replace(/^"|"$/g, ''));
+          if (Number.isFinite(duration) && duration >= 0) {
+            metrics[name] = Math.round(duration * 100) / 100;
+          }
+        }
+      }
+
+      return Object.keys(metrics).length ? metrics : null;
+    }
+
+    function readResponseServerTiming(response) {
+      try {
+        return sanitizeServerTimingHeader(response.headers?.get('server-timing'));
+      } catch (_) {
+        return null;
+      }
+    }
+
+    function roundRouteTimingValue(value) {
+      return Math.round(value * 100) / 100;
+    }
+
+    function extractResourceTiming(entry) {
+      const fields = [
+        'startTime',
+        'requestStart',
+        'responseStart',
+        'responseEnd',
+        'duration',
+        'transferSize',
+        'encodedBodySize',
+        'decodedBodySize'
+      ];
+      const timing = {};
+
+      for (const field of fields) {
+        const value = entry?.[field];
+        if (typeof value === 'number' && Number.isFinite(value) && value >= 0) {
+          timing[field] = roundRouteTimingValue(value);
+        }
+      }
+
+      return Object.keys(timing).length ? timing : null;
+    }
+
+    function getPageDataResourceTiming(endpoint, fetchStartedAt) {
+      try {
+        if (typeof performance === 'undefined' || typeof performance.getEntriesByName !== 'function') {
+          return null;
+        }
+
+        const href = new URL(endpoint, window.location.href).href;
+        const entries = performance.getEntriesByName(href, 'resource');
+        if (!entries.length) return null;
+
+        for (let index = entries.length - 1; index >= 0; index--) {
+          const entry = entries[index];
+          if (
+            typeof entry?.responseEnd === 'number' &&
+            Number.isFinite(entry.responseEnd) &&
+            entry.responseEnd + 1 >= fetchStartedAt
+          ) {
+            return extractResourceTiming(entry);
+          }
+        }
+
+        return null;
+      } catch (_) {
+        return null;
+      }
+    }
+
+    function buildPageDataTimingDetail(response, endpoint, fetchStartedAt, source) {
+      const detail = { source, status: response.status };
+      const serverTiming = readResponseServerTiming(response);
+      if (serverTiming) {
+        detail.serverTiming = serverTiming;
+        const serverTimingMetrics = parseServerTimingMetrics(serverTiming);
+        if (serverTimingMetrics) detail.serverTimingMetrics = serverTimingMetrics;
+      }
+
+      const resourceTiming = getPageDataResourceTiming(response.url || endpoint, fetchStartedAt);
+      if (resourceTiming) detail.resourceTiming = resourceTiming;
+
+      return detail;
+    }
+
     // ============================================
     // LRU Cache with TTL (single Map to prevent sync issues)
     // ============================================
@@ -320,7 +458,12 @@ export const getRouterScript = () => `
       if (!response.ok) {
         perfEnd('fetch:' + path);
         if (recordRouteTiming) {
-          emitRouteTiming('page-data', path, startedAt, { source: timingSource, status: response.status });
+          emitRouteTiming(
+            'page-data',
+            path,
+            startedAt,
+            buildPageDataTimingDetail(response, endpoint, startedAt, timingSource)
+          );
         }
         const error = new Error('Failed to fetch page data: ' + response.status);
         error.status = response.status;
@@ -332,7 +475,12 @@ export const getRouterScript = () => `
       perfEnd('parse:' + path);
       perfEnd('fetch:' + path);
       if (recordRouteTiming) {
-        emitRouteTiming('page-data', path, startedAt, { source: timingSource, status: response.status });
+        emitRouteTiming(
+          'page-data',
+          path,
+          startedAt,
+          buildPageDataTimingDetail(response, endpoint, startedAt, timingSource)
+        );
       }
 
       if (triggerReloadOnVersionMismatch) {
@@ -614,6 +762,7 @@ export const getRouterScript = () => `
         container.__reactRoot.render(tree);
         perfEnd('render:reactRender');
         log('Page re-rendered via SPA');
+        scheduleRoutePrefetchRefresh();
         return;
       }
 
@@ -629,6 +778,9 @@ export const getRouterScript = () => `
     // ============================================
     let prefetchTimeout = null;
     let currentHoverLink = null;
+    let routePrefetchRefreshPending = false;
+    let viewportPrefetchObserver = null;
+    const observedPrefetchLinks = new WeakSet();
     const prefetchedPaths = new Set();
     const inFlightPrefetches = new Set();
 
@@ -650,6 +802,51 @@ export const getRouterScript = () => `
       return allPaths;
     }
 
+    function getCurrentRouteHref() {
+      return window.location.pathname + window.location.search;
+    }
+
+    function getInternalRouteHrefFromLink(link) {
+      if (
+        !link ||
+        link.target === '_blank' ||
+        link.hasAttribute('download') ||
+        link.getAttribute('data-prefetch') === 'false'
+      ) {
+        return null;
+      }
+
+      const href = link.getAttribute('href');
+      if (!href || href.startsWith('#') || href.startsWith('//') || !href.startsWith('/')) return null;
+
+      try {
+        const url = new URL(href, window.location.origin);
+        if (url.origin !== window.location.origin) return null;
+
+        const routeHref = url.pathname + url.search;
+        return routeHref === getCurrentRouteHref() ? null : routeHref;
+      } catch (_) {
+        return null;
+      }
+    }
+
+    function getEligiblePrefetchLinks(limit) {
+      const links = [];
+      const seenHrefs = new Set();
+
+      for (const link of document.querySelectorAll('a[href]')) {
+        const href = getInternalRouteHrefFromLink(link);
+        if (!href || seenHrefs.has(href)) continue;
+
+        seenHrefs.add(href);
+        links.push({ link, href });
+
+        if (links.length >= limit) break;
+      }
+
+      return links;
+    }
+
     async function preloadModulesForPageData(pageData, path) {
       if (!pageData) return;
       if (pageData.releaseId && window.__veryfrontSetReleaseId) {
@@ -698,6 +895,62 @@ export const getRouterScript = () => `
         });
     }
 
+    function prefetchEligibleRouteLinks(limit) {
+      for (const { href } of getEligiblePrefetchLinks(limit)) {
+        prefetchPage(href);
+      }
+    }
+
+    function ensureViewportPrefetchObserver() {
+      if (viewportPrefetchObserver || typeof IntersectionObserver !== 'function') {
+        return viewportPrefetchObserver;
+      }
+
+      viewportPrefetchObserver = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
+
+          viewportPrefetchObserver?.unobserve(entry.target);
+          const href = getInternalRouteHrefFromLink(entry.target);
+          if (href) prefetchPage(href);
+        }
+      }, { rootMargin: VIEWPORT_PREFETCH_ROOT_MARGIN });
+
+      return viewportPrefetchObserver;
+    }
+
+    function observeViewportPrefetchLinks() {
+      const observer = ensureViewportPrefetchObserver();
+      if (!observer) return;
+
+      for (const { link } of getEligiblePrefetchLinks(VIEWPORT_PREFETCH_MAX_LINKS)) {
+        if (observedPrefetchLinks.has(link)) continue;
+
+        observedPrefetchLinks.add(link);
+        observer.observe(link);
+      }
+    }
+
+    function runRoutePrefetchRefresh() {
+      routePrefetchRefreshPending = false;
+      prefetchEligibleRouteLinks(IDLE_PREFETCH_MAX_LINKS);
+      observeViewportPrefetchLinks();
+    }
+
+    function scheduleRoutePrefetchRefresh() {
+      if (routePrefetchRefreshPending) return;
+
+      routePrefetchRefreshPending = true;
+      setTimeout(() => {
+        if (typeof requestIdleCallback === 'function') {
+          requestIdleCallback(runRoutePrefetchRefresh, { timeout: IDLE_PREFETCH_DELAY_MS });
+          return;
+        }
+
+        runRoutePrefetchRefresh();
+      }, IDLE_PREFETCH_DELAY_MS);
+    }
+
     // ============================================
     // Router object
     // ============================================
@@ -802,8 +1055,8 @@ export const getRouterScript = () => `
         const link = e.target.closest('a[href]');
         if (!link) return;
 
-        const href = link.getAttribute('href');
-        if (!href?.startsWith('/') || href.startsWith('//')) return;
+        const href = getInternalRouteHrefFromLink(link);
+        if (!href) return;
 
         if (currentHoverLink === link) return;
 
@@ -834,6 +1087,12 @@ export const getRouterScript = () => `
       true
     );
 
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', scheduleRoutePrefetchRefresh, { once: true });
+    } else {
+      scheduleRoutePrefetchRefresh();
+    }
+
     // ============================================
     // Router hooks
     // ============================================

package/esm/src/react/runtime/core.js

@@ -60,7 +60,7 @@ export function useRouter() {
 }
 /** Renders an anchor element annotated for Veryfront prefetch handling. */
 export function Link({ prefetch = true, children, ...rest }) {
-    return React.createElement("a", { ...rest, "data-prefetch": prefetch ? "true" : undefined }, children);
+    return React.createElement("a", { ...rest, "data-prefetch": prefetch ? "true" : "false" }, children);
 }
 /** Provides page context to route and MDX descendants. */
 export function PageContextProvider({ children, pageContext, }) {

package/esm/src/utils/version-constant.d.ts

@@ -1,3 +1,3 @@
 /** Shared version value. */
-export declare const VERSION = "0.1.850";
+export declare const VERSION = "0.1.852";
 //# sourceMappingURL=version-constant.d.ts.map

package/esm/src/utils/version-constant.js

@@ -1,4 +1,4 @@
 // Keep in sync with deno.json version.
 // scripts/release.ts updates this constant during releases.
 /** Shared version value. */
-export const VERSION = "0.1.850";
+export const VERSION = "0.1.852";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veryfront",
-  "version": "0.1.850",
+  "version": "0.1.852",
   "description": "The simplest way to build AI-powered apps",
   "keywords": [
     "react",