@bleedingdev/modern-js-runtime-extensions 3.9.0-ultramodern.3 → 3.9.0-ultramodern.5

package/src/routeHydration.ts

@@ -0,0 +1,208 @@
+import { escapeHtmlAttribute } from './html';
+
+type RouteAssetManifest = {
+  assets?: string[];
+};
+
+export type RouteManifestLike = {
+  routeAssets?: Record<string, RouteAssetManifest | undefined>;
+};
+
+type ScriptTagMatch = {
+  index: number;
+  tag: string;
+  src: string;
+};
+
+export type ScriptChunkLike = {
+  filename?: string;
+  url?: string;
+};
+
+function getScriptTags(template: string): ScriptTagMatch[] {
+  const scriptRegExp = /<script\b[^>]*\bsrc=(["'])(.*?)\1[^>]*><\/script>/g;
+  return Array.from(template.matchAll(scriptRegExp)).map(match => ({
+    index: match.index ?? 0,
+    tag: match[0],
+    src: match[2],
+  }));
+}
+
+function getAssetBasename(src: string) {
+  const withoutQuery = src.split(/[?#]/)[0];
+  return withoutQuery.split('/').pop() || withoutQuery;
+}
+
+function isEntryScript(src: string, entryName: string, asyncEntry: boolean) {
+  const basename = getAssetBasename(src);
+  const prefix = asyncEntry ? `async-${entryName}` : entryName;
+  return (
+    basename === `${prefix}.js` ||
+    basename.startsWith(`${prefix}.`) ||
+    basename.startsWith(`${prefix}-`)
+  );
+}
+
+const dedupeByUrl = <T extends ScriptChunkLike>(chunks: T[]) => {
+  const seen = new Set<string>();
+  return chunks.filter(chunk => {
+    if (chunk.url === undefined || chunk.url === '' || seen.has(chunk.url)) {
+      return false;
+    }
+    seen.add(chunk.url);
+    return true;
+  });
+};
+
+const isAsyncEntryScriptChunk = (chunk: ScriptChunkLike, entryName: string) => {
+  if (chunk.url === undefined || !chunk.url.endsWith('.js')) {
+    return false;
+  }
+
+  const asyncEntryName = `async-${entryName}`;
+  const filename = chunk.filename ?? chunk.url;
+  const basename = filename.split('/').pop() ?? filename;
+  return (
+    basename === `${asyncEntryName}.js` ||
+    basename.startsWith(`${asyncEntryName}.`) ||
+    basename.startsWith(`${asyncEntryName}-`)
+  );
+};
+
+export function getMatchedRouteChunks<T>(
+  routeManifest: RouteManifestLike | undefined,
+  matchedRouteIds: string[],
+  routeAssetToChunk: (asset: string) => T,
+): T[] {
+  const routeAssets = routeManifest?.routeAssets;
+  if (routeAssets === undefined) {
+    return [];
+  }
+
+  return matchedRouteIds
+    .flatMap(routeId => routeAssets[routeId]?.assets ?? [])
+    .map(routeAssetToChunk);
+}
+
+export const orderHydrationScriptChunks = <T extends ScriptChunkLike>({
+  asyncEntryChunks,
+  collectedChunks,
+  matchedRouteChunks,
+  entryName,
+}: {
+  asyncEntryChunks: T[];
+  collectedChunks: T[];
+  matchedRouteChunks: T[];
+  entryName: string;
+}) => {
+  const asyncEntryScriptChunks: T[] = [];
+  const asyncEntryDependencyChunks: T[] = [];
+
+  for (const chunk of asyncEntryChunks) {
+    if (isAsyncEntryScriptChunk(chunk, entryName)) {
+      asyncEntryScriptChunks.push(chunk);
+    } else {
+      asyncEntryDependencyChunks.push(chunk);
+    }
+  }
+
+  return dedupeByUrl([
+    ...asyncEntryDependencyChunks,
+    ...collectedChunks,
+    ...matchedRouteChunks,
+    ...asyncEntryScriptChunks,
+  ]);
+};
+
+export function injectBeforeHydrationEntryScript(
+  template: string,
+  scripts: string,
+  entryName = 'index',
+) {
+  if (scripts === '') {
+    return template;
+  }
+
+  const scriptTags = getScriptTags(template);
+  const target =
+    scriptTags.find(match => isEntryScript(match.src, entryName, false)) ??
+    scriptTags.find(match => isEntryScript(match.src, entryName, true));
+
+  if (target === undefined) {
+    return template;
+  }
+
+  return `${template.slice(0, target.index)}${scripts}${template.slice(
+    target.index,
+  )}`;
+}
+
+export function replaceChunkJsPlaceholder(
+  template: string,
+  scripts: string,
+  entryName: string | undefined,
+  placeholder: string,
+) {
+  if (!template.includes(placeholder)) {
+    return template;
+  }
+
+  if (scripts === '') {
+    return template.replace(placeholder, () => '');
+  }
+
+  const withoutPlaceholder = template.replace(placeholder, () => '');
+  const withEarlyScripts = injectBeforeHydrationEntryScript(
+    withoutPlaceholder,
+    scripts,
+    entryName,
+  );
+
+  if (withEarlyScripts !== withoutPlaceholder) {
+    return withEarlyScripts;
+  }
+
+  return template.replace(placeholder, () => scripts);
+}
+
+export function createRouteHydrationScriptTags(
+  routeManifest: RouteManifestLike | undefined,
+  matchedRouteIds: string[],
+  entryName: string,
+  options: {
+    nonce?: string;
+    template?: string;
+  } = {},
+) {
+  const { nonce, template } = options;
+  const routeAssets = routeManifest?.routeAssets;
+  if (routeAssets === undefined) {
+    return '';
+  }
+  const existingScriptSrcs =
+    template === undefined
+      ? new Set<string>()
+      : new Set(getScriptTags(template).map(({ src }) => src));
+
+  const jsAssets = Array.from(
+    new Set(
+      [
+        ...getMatchedRouteChunks(
+          routeManifest,
+          matchedRouteIds,
+          asset => asset,
+        ),
+        ...(routeAssets[`async-${entryName}`]?.assets ?? []),
+      ].filter((asset: string) => asset.endsWith('.js')),
+    ),
+  );
+  return jsAssets
+    .filter(asset => !existingScriptSrcs.has(asset))
+    .map(
+      asset =>
+        `<script src="${escapeHtmlAttribute(asset)}"${
+          nonce ? ` nonce="${escapeHtmlAttribute(nonce)}"` : ''
+        }></script>`,
+    )
+    .join(' ');
+}

package/src/routerPrefetchPolicy.ts

@@ -0,0 +1,195 @@
+import { getNavigationWarmupCacheKey } from './navigationWarmup';
+import { normalizePreloadBehavior } from './prefetchPolicy';
+
+type PrefetchBehavior = 'intent' | 'render' | 'viewport' | 'none';
+type PrefetchState = { code: boolean; data: boolean };
+
+type NetworkInformationLike = {
+  saveData?: boolean;
+  effectiveType?: string;
+};
+
+type WarmupTask = {
+  key: string;
+  run: () => Promise<unknown>;
+  cancelled: boolean;
+};
+
+const INTENT_DELAY = 100;
+const VIEWPORT_ROOT_MARGIN = '200px';
+const MAX_CONCURRENT_WARMUPS = 4;
+const WARMUP_TTL = 30_000;
+
+/** Policy-only contract: native links supply elements, route inputs and loads. */
+export function createRouterPrefetchPolicy() {
+  const cache = new Map<string, number>();
+  const queue: WarmupTask[] = [];
+  let activeWarmups = 0;
+
+  const canWarmup = () => {
+    const navigator = globalThis.navigator as
+      | (Navigator & {
+          connection?: NetworkInformationLike;
+          mozConnection?: NetworkInformationLike;
+          webkitConnection?: NetworkInformationLike;
+        })
+      | undefined;
+    const connection =
+      navigator?.connection ||
+      navigator?.mozConnection ||
+      navigator?.webkitConnection;
+    return (
+      !connection?.saveData &&
+      connection?.effectiveType !== 'slow-2g' &&
+      connection?.effectiveType !== '2g'
+    );
+  };
+
+  const runNext = () => {
+    while (activeWarmups < MAX_CONCURRENT_WARMUPS && queue.length > 0) {
+      const task = queue.shift()!;
+      if (task.cancelled) {
+        continue;
+      }
+      activeWarmups += 1;
+      task
+        .run()
+        .catch(() => {
+          cache.delete(task.key);
+        })
+        .finally(() => {
+          activeWarmups -= 1;
+          runNext();
+        });
+    }
+  };
+
+  return {
+    canWarmup,
+    allowData(route: unknown) {
+      return (
+        (route as { handle?: { navigationWarmup?: { data?: boolean } } })
+          ?.handle?.navigationWarmup?.data !== false
+      );
+    },
+    observe({
+      element,
+      prefetch: inputPrefetch,
+      preload: inputPreload,
+      notify,
+    }: {
+      element: HTMLAnchorElement | null;
+      prefetch?: PrefetchBehavior;
+      preload?: PrefetchBehavior | false;
+      notify: (state: PrefetchState) => void;
+    }) {
+      const prefetch = inputPrefetch ?? 'render';
+      const preload = normalizePreloadBehavior(inputPreload, prefetch);
+      let state: PrefetchState = {
+        code: prefetch === 'render' || preload === 'render',
+        data: prefetch === 'render',
+      };
+      let timer: ReturnType<typeof setTimeout> | undefined;
+      let observer: IntersectionObserver | undefined;
+      const update = (next: PrefetchState) => {
+        state = next;
+        notify(state);
+      };
+      const cancelTimer = () => {
+        if (timer !== undefined) {
+          clearTimeout(timer);
+          timer = undefined;
+        }
+      };
+      notify(state);
+
+      if (
+        element &&
+        (prefetch === 'viewport' || preload === 'viewport') &&
+        typeof IntersectionObserver !== 'undefined'
+      ) {
+        observer = new IntersectionObserver(
+          entries => {
+            if (!entries.some(entry => entry.isIntersecting)) {
+              return;
+            }
+            update({
+              code: true,
+              data: state.data || prefetch === 'viewport',
+            });
+            observer?.disconnect();
+          },
+          { rootMargin: VIEWPORT_ROOT_MARGIN },
+        );
+        observer.observe(element);
+      }
+
+      return {
+        onIntent() {
+          if (prefetch !== 'intent' && preload !== 'intent') {
+            return;
+          }
+          if (timer !== undefined) {
+            return;
+          }
+          timer = setTimeout(() => {
+            timer = undefined;
+            update({ code: true, data: state.data || prefetch === 'intent' });
+          }, INTENT_DELAY);
+        },
+        onCancel() {
+          if (prefetch === 'intent' || preload === 'intent') {
+            cancelTimer();
+            update({ code: false, data: false });
+          }
+        },
+        dispose() {
+          cancelTimer();
+          observer?.disconnect();
+        },
+      };
+    },
+    schedule({
+      runtimeContext,
+      chunkLoader,
+      publicPath,
+      key: operationKey,
+      run,
+    }: {
+      runtimeContext: object;
+      chunkLoader: object;
+      publicPath: string;
+      key: string;
+      run: () => Promise<unknown>;
+    }) {
+      if (!canWarmup()) {
+        return () => {};
+      }
+      const now = performance.now();
+      for (const [key, timestamp] of cache) {
+        if (now - timestamp > WARMUP_TTL) {
+          cache.delete(key);
+        }
+      }
+      const key = getNavigationWarmupCacheKey(
+        runtimeContext,
+        chunkLoader,
+        publicPath,
+        operationKey,
+      );
+      if (cache.has(key)) {
+        return () => {};
+      }
+      cache.set(key, now);
+      const task: WarmupTask = { key, run, cancelled: false };
+      queue.push(task);
+      runNext();
+      return () => {
+        task.cancelled = true;
+        if (queue.includes(task)) {
+          cache.delete(key);
+        }
+      };
+    },
+  };
+}