@rangojs/router 0.0.0-experimental.14 → 0.0.0-experimental.140

package/src/handle.ts

@@ -1,3 +1,6 @@
+import { missingInjectedIdError } from "./missing-id-error.js";
+import { isUnderTestRunner } from "./runtime-env.js";
+
 /**
  * Handle definition for accumulating data across route segments.
  *
@@ -7,8 +10,11 @@
  *
  * @example
  * ```ts
- * // Define a handle (name auto-generated from file + export)
- * export const Breadcrumbs = createHandle<BreadcrumbItem>();
+ * // Define a handle (name auto-generated from file + export).
+ * // Default collect is the identity: one array per segment that pushed.
+ * export const Breadcrumbs = createHandle<BreadcrumbItem, BreadcrumbItem[]>(
+ *   (segments) => segments.flat(), // opt into a single flat list
+ * );
  *
  * // Use in handler
  * const push = ctx.use(Breadcrumbs);
@@ -18,7 +24,7 @@
  * const crumbs = useHandle(Breadcrumbs);
  * ```
  */
-export interface Handle<TData, TAccumulated = TData[]> {
+export interface Handle<TData, TAccumulated = TData[][]> {
   /**
    * Brand to distinguish handles from loaders in ctx.use()
    */
@@ -29,14 +35,16 @@ export interface Handle<TData, TAccumulated = TData[]> {
    * Format: "filePath#ExportName" in dev, "hash#ExportName" in production
    */
   readonly $$id: string;
-
 }
 
 /**
- * Default collect function that flattens segment arrays into a single array.
+ * Default collect: pass the per-segment data through as-is — one array per segment
+ * that pushed, in segment order. Lossless, so a consumer can tell which/how-many
+ * segments contributed. Callers that want a single flat list opt in with
+ * `createHandle((segments) => segments.flat())`.
  */
-function defaultCollect<T>(segments: T[][]): T[] {
-  return segments.flat();
+function defaultCollect<T>(segments: T[][]): T[][] {
+  return segments;
 }
 
 // Module-level registry mapping $$id to collect functions.
@@ -44,11 +52,13 @@ function defaultCollect<T>(segments: T[][]): T[] {
 // Used by useHandle() to recover collect when handle is deserialized from RSC prop.
 const collectRegistry = new Map<string, (segments: unknown[][]) => unknown>();
 
-/**
- * Look up a collect function from the registry by handle $$id.
- * Returns undefined if not registered (falls back to defaultCollect in useHandle).
- */
-export function getCollectFn(id: string): ((segments: unknown[][]) => unknown) | undefined {
+// Monotonic counter for runtime fallback ids (see createHandle). Only used
+// when no build id was injected (a bare unit test).
+let runtimeHandleIdCounter = 0;
+
+export function getCollectFn(
+  id: string,
+): ((segments: unknown[][]) => unknown) | undefined {
   return collectRegistry.get(id);
 }
 
@@ -58,13 +68,22 @@ export function getCollectFn(id: string): ((segments: unknown[][]) => unknown) |
  * The $$id is auto-generated by the Vite exposeInternalIds plugin based on
  * file path and export name. No manual naming required.
  *
- * @param collect - Optional collect function (default: flatten into array)
+ * @param collect - Optional collect function. Default: pass the per-segment data
+ *   through as-is (one array per segment that pushed, in segment order). Lossless,
+ *   so a consumer can tell which/how-many segments contributed. Opt into a single
+ *   flat list with `(segments) => segments.flat()`.
  * @param __injectedId - Auto-injected by Vite plugin, do not provide manually
  *
  * @example
  * ```ts
- * // Default: flatten into array
- * export const Breadcrumbs = createHandle<BreadcrumbItem>();
+ * // Default: per-segment grouping, as-is
+ * export const Pushed = createHandle<string>();
+ * // Result type: string[][]  (e.g. [["a"], ["b", "c"]])
+ *
+ * // Opt into a single flat list
+ * export const Breadcrumbs = createHandle<BreadcrumbItem, BreadcrumbItem[]>(
+ *   (segments) => segments.flat()
+ * );
  * // Result type: BreadcrumbItem[]
  *
  * // Custom: last value wins
@@ -79,8 +98,9 @@ export function getCollectFn(id: string): ((segments: unknown[][]) => unknown) |
  * );
  * // Result type: MetaTags
  *
- * // Custom: dedupe by href
- * export const Breadcrumbs = createHandle<BreadcrumbItem>(
+ * // Custom: dedupe by href (TAccumulated must be given — a custom collect that
+ * // returns a flat array no longer matches the default TData[][])
+ * export const Breadcrumbs = createHandle<BreadcrumbItem, BreadcrumbItem[]>(
  *   (segments) => {
  *     const all = segments.flat();
  *     return all.filter((item, i) => all.findIndex(x => x.href === item.href) === i);
@@ -88,28 +108,40 @@ export function getCollectFn(id: string): ((segments: unknown[][]) => unknown) |
  * );
  * ```
  */
-export function createHandle<TData, TAccumulated = TData[]>(
+export function createHandle<TData, TAccumulated = TData[][]>(
   collect?: (segments: TData[][]) => TAccumulated,
-  __injectedId?: string
+  __injectedId?: string,
 ): Handle<TData, TAccumulated> {
-  const handleId = __injectedId ?? "";
+  let handleId = __injectedId ?? "";
 
-  if (!handleId && process.env.NODE_ENV !== "production") {
-    throw new Error(
-      "[rsc-router] Handle is missing $$id. " +
-        "Make sure the exposeInternalIds Vite plugin is enabled and " +
-        "the handle is exported with: export const MyHandle = createHandle(...)"
-    );
+  // No build-injected id. Under a test runner: fall back to a synthetic id so the
+  // collect registers below and the handle is exercisable in tests (useHandle,
+  // collectHandle, renderRoute's `handles` run the REAL collect). Otherwise (dev
+  // or a real build) it means an UNSUPPORTED handler shape the plugin skipped —
+  // fail loud. The rich, stack-parsing diagnostic stays behind the NODE_ENV check
+  // so a production build folds it away and tree-shakes missing-id-error.ts out,
+  // shipping the small throw instead. isUnderTestRunner() is runtime-safe.
+  if (!handleId) {
+    if (isUnderTestRunner()) {
+      handleId = `__rango_runtime_handle_${runtimeHandleIdCounter++}`;
+    } else if (process.env.NODE_ENV !== "production") {
+      throw missingInjectedIdError("Handle", "createHandle");
+    } else {
+      throw new Error(
+        "[rango] Handle is missing $$id — the build plugin did not inject one. " +
+          "Export it as `export const X = createHandle(...)`.",
+      );
+    }
   }
 
-  const collectFn = collect ??
+  const collectFn =
+    collect ??
     (defaultCollect as unknown as (segments: TData[][]) => TAccumulated);
 
-  // Register collect in module-level registry so useHandle() can recover it
-  // when the handle is deserialized from RSC props (toJSON strips collect).
-  if (handleId) {
-    collectRegistry.set(handleId, collectFn as (segments: unknown[][]) => unknown);
-  }
+  collectRegistry.set(
+    handleId,
+    collectFn as (segments: unknown[][]) => unknown,
+  );
 
   return {
     __brand: "handle" as const,
@@ -117,9 +149,6 @@ export function createHandle<TData, TAccumulated = TData[]>(
   };
 }
 
-/**
- * Type guard to check if a value is a Handle.
- */
 export function isHandle(value: unknown): value is Handle<unknown, unknown> {
   return (
     typeof value === "object" &&
@@ -128,3 +157,49 @@ export function isHandle(value: unknown): value is Handle<unknown, unknown> {
     (value as { __brand: unknown }).__brand === "handle"
   );
 }
+
+/**
+ * Collect handle data from a HandleData map, applying the handle's collect
+ * function over segments in order. Shared between server-side rendered()
+ * reads and client-side useHandle().
+ *
+ * @param handle - The handle to collect data for
+ * @param data - Full handle data map (handleName -> segmentId -> entries[])
+ * @param segmentOrder - Segment IDs in parent -> child resolution order
+ */
+export function collectHandleData<TData, TAccumulated>(
+  handle: Handle<TData, TAccumulated>,
+  data: Record<string, Record<string, unknown[]>>,
+  segmentOrder: string[],
+): TAccumulated {
+  // Fall back to the default (identity, pass-through) collect when none is
+  // registered — e.g. the handle's module was not imported so createHandle() never
+  // ran. This is harmless for a handle that wanted the default, but a handle with a
+  // CUSTOM collect that failed to register silently gets the wrong shape (identity
+  // TData[][]) cast as its declared TAccumulated. The runtime can't tell the two
+  // apart (a Handle only carries $$id), so warn in dev (folded out of production).
+  const collectFn = getCollectFn(handle.$$id);
+  if (!collectFn && process.env.NODE_ENV !== "production") {
+    console.warn(
+      `[rango] Handle "${handle.$$id}" has no registered collect — falling back ` +
+        `to the identity (per-segment data as-is). If this handle declares a ` +
+        `CUSTOM collect, import its module so createHandle() runs where it is read.`,
+    );
+  }
+  const collect = (collectFn ??
+    (defaultCollect as unknown as (segments: unknown[][]) => unknown)) as (
+    segments: TData[][],
+  ) => TAccumulated;
+
+  const segmentData = data[handle.$$id];
+  if (!segmentData) return collect([]);
+
+  const segmentArrays: TData[][] = [];
+  for (const segmentId of segmentOrder) {
+    const entries = segmentData[segmentId];
+    if (entries && entries.length > 0) {
+      segmentArrays.push(entries as TData[]);
+    }
+  }
+  return collect(segmentArrays);
+}

package/src/handles/MetaTags.tsx

@@ -3,11 +3,16 @@
 /**
  * Component to render collected meta descriptors in the document head.
  *
- * Supports both sync and async meta descriptors. Async descriptors
- * (Promise<MetaDescriptorBase>) are resolved using React's use() hook.
+ * Deferred (Promise) meta descriptors are resolved before MetaTags renders
+ * (server-side on the full render, client-side before apply on navigation), so
+ * it only ever receives resolved descriptors and never suspends.
  *
  * When theme is enabled in the router config, MetaTags also renders
  * the theme initialization script to prevent FOUC (flash of unstyled content).
+ * This makes MetaTags the sole FOUC-script injector for apps that render it;
+ * the standalone `<ThemeScript />` is only needed when MetaTags is not used.
+ * Rendering both is safe (the inline script guards listener registration) but
+ * redundant.
  *
  * @example
  * ```tsx
@@ -24,12 +29,13 @@
  * ```
  */
 
-import { use } from "react";
 import { useHandle } from "../browser/react/use-handle.js";
 import { Meta } from "./meta.js";
-import type { MetaDescriptor, MetaDescriptorBase } from "../router/types.js";
-import { getSSRThemeConfig } from "../theme/theme-context.js";
+import type { MetaDescriptorBase } from "../router/types.js";
+import { useThemeContext } from "../theme/theme-context.js";
 import { generateThemeScript } from "../theme/theme-script.js";
+import { useNonce } from "../browser/react/nonce-context.js";
+import { escapeJsonForScript } from "../escape-script.js";
 
 // Type guards for MetaDescriptorBase variants
 function hasCharSet(d: MetaDescriptorBase): d is { charSet: "utf-8" } {
@@ -40,57 +46,67 @@ function hasTitle(d: MetaDescriptorBase): d is { title: string } {
   return "title" in d && typeof (d as { title?: unknown }).title === "string";
 }
 
-function hasNameContent(d: MetaDescriptorBase): d is { name: string; content: string } {
-  return "name" in d && "content" in d &&
+function hasNameContent(
+  d: MetaDescriptorBase,
+): d is { name: string; content: string } {
+  return (
+    "name" in d &&
+    "content" in d &&
     typeof (d as { name?: unknown }).name === "string" &&
-    typeof (d as { content?: unknown }).content === "string";
+    typeof (d as { content?: unknown }).content === "string"
+  );
 }
 
-function hasPropertyContent(d: MetaDescriptorBase): d is { property: string; content: string } {
-  return "property" in d && "content" in d &&
+function hasPropertyContent(
+  d: MetaDescriptorBase,
+): d is { property: string; content: string } {
+  return (
+    "property" in d &&
+    "content" in d &&
     typeof (d as { property?: unknown }).property === "string" &&
-    typeof (d as { content?: unknown }).content === "string";
+    typeof (d as { content?: unknown }).content === "string"
+  );
 }
 
-function hasHttpEquivContent(d: MetaDescriptorBase): d is { httpEquiv: string; content: string } {
-  return "httpEquiv" in d && "content" in d &&
+function hasHttpEquivContent(
+  d: MetaDescriptorBase,
+): d is { httpEquiv: string; content: string } {
+  return (
+    "httpEquiv" in d &&
+    "content" in d &&
     typeof (d as { httpEquiv?: unknown }).httpEquiv === "string" &&
-    typeof (d as { content?: unknown }).content === "string";
+    typeof (d as { content?: unknown }).content === "string"
+  );
 }
 
-function hasScriptLdJson(d: MetaDescriptorBase): d is { "script:ld+json": object } {
+function hasScriptLdJson(
+  d: MetaDescriptorBase,
+): d is { "script:ld+json": object } {
   return "script:ld+json" in d;
 }
 
-function hasTagName(d: MetaDescriptorBase): d is { tagName: "meta" | "link"; [name: string]: string } {
-  return "tagName" in d && ((d as { tagName?: unknown }).tagName === "meta" || (d as { tagName?: unknown }).tagName === "link");
-}
-
-/**
- * Check if a value is a Promise.
- */
-function isPromise(value: unknown): value is Promise<unknown> {
-  return value !== null && typeof value === "object" && "then" in value;
+function hasTagName(
+  d: MetaDescriptorBase,
+): d is { tagName: "meta" | "link"; [name: string]: string } {
+  return (
+    "tagName" in d &&
+    ((d as { tagName?: unknown }).tagName === "meta" ||
+      (d as { tagName?: unknown }).tagName === "link")
+  );
 }
 
-/**
- * Render a single meta descriptor as a React element.
- */
-function renderMetaDescriptor(
+export function renderMetaDescriptor(
   descriptor: MetaDescriptorBase,
-  index: number
+  index: number,
 ): React.ReactNode {
-  // charset
   if (hasCharSet(descriptor)) {
     return <meta key="charSet" charSet={descriptor.charSet} />;
   }
 
-  // title
   if (hasTitle(descriptor)) {
     return <title key="title">{descriptor.title}</title>;
   }
 
-  // name + content (description, viewport, etc.)
   if (hasNameContent(descriptor)) {
     return (
       <meta
@@ -101,7 +117,6 @@ function renderMetaDescriptor(
     );
   }
 
-  // property + content (Open Graph, etc.)
   if (hasPropertyContent(descriptor)) {
     return (
       <meta
@@ -112,7 +127,6 @@ function renderMetaDescriptor(
     );
   }
 
-  // http-equiv + content
   if (hasHttpEquivContent(descriptor)) {
     return (
       <meta
@@ -123,9 +137,10 @@ function renderMetaDescriptor(
     );
   }
 
-  // JSON-LD structured data
   if (hasScriptLdJson(descriptor)) {
-    const json = JSON.stringify(descriptor["script:ld+json"]);
+    const json = escapeJsonForScript(
+      JSON.stringify(descriptor["script:ld+json"]),
+    );
     return (
       <script
         key={`ld-json-${index}`}
@@ -135,27 +150,32 @@ function renderMetaDescriptor(
     );
   }
 
-  // Custom tagName (meta or link with arbitrary attributes)
   if (hasTagName(descriptor)) {
     const { tagName, ...rest } = descriptor;
     if (tagName === "link") {
-      return <link key={`link-${index}`} {...(rest as React.LinkHTMLAttributes<HTMLLinkElement>)} />;
+      return (
+        <link
+          key={`link-${index}`}
+          {...(rest as React.LinkHTMLAttributes<HTMLLinkElement>)}
+        />
+      );
     }
     if (tagName === "meta") {
-      return <meta key={`meta-${index}`} {...(rest as React.MetaHTMLAttributes<HTMLMetaElement>)} />;
+      return (
+        <meta
+          key={`meta-${index}`}
+          {...(rest as React.MetaHTMLAttributes<HTMLMetaElement>)}
+        />
+      );
     }
   }
 
-  // Fallback: treat as meta attributes
-  return <meta key={`meta-fallback-${index}`} {...(descriptor as React.MetaHTMLAttributes<HTMLMetaElement>)} />;
-}
-
-/**
- * Wrapper component to resolve a Promise<MetaDescriptorBase> using use().
- */
-function AsyncMetaTag({ promise, index }: { promise: Promise<MetaDescriptorBase>; index: number }): React.ReactNode {
-  const resolved = use(promise);
-  return renderMetaDescriptor(resolved, index);
+  return (
+    <meta
+      key={`meta-fallback-${index}`}
+      {...(descriptor as React.MetaHTMLAttributes<HTMLMetaElement>)}
+    />
+  );
 }
 
 /**
@@ -167,27 +187,31 @@ function AsyncMetaTag({ promise, index }: { promise: Promise<MetaDescriptorBase>
  * When theme is enabled in router config, also renders the theme initialization
  * script to prevent FOUC (flash of unstyled content).
  *
- * Async meta descriptors (Promise<MetaDescriptorBase>) are resolved using
- * React's use() hook. RSC streaming handles the Promise resolution.
+ * Deferred (Promise) meta descriptors are resolved BEFORE MetaTags renders —
+ * server-side on the full/SSR render, client-side before apply on navigation
+ * (resolve-by-default) — so MetaTags only ever receives resolved descriptors and
+ * never suspends.
  */
 export function MetaTags(): React.ReactNode {
-  const descriptors = useHandle(Meta) as MetaDescriptor[];
-  const themeConfig = getSSRThemeConfig();
+  // Deferred descriptors are resolved BEFORE collect runs (resolve-by-default),
+  // and collectMeta strips unset markers, so the collected output is always
+  // resolved base descriptors (never a Promise).
+  const descriptors = useHandle(Meta) as MetaDescriptorBase[];
+  const themeConfig = useThemeContext()?.config ?? null;
+  const nonce = useNonce();
 
   return (
     <>
       {/* Theme script must be first to prevent FOUC */}
       {themeConfig && (
         <script
+          nonce={nonce}
           dangerouslySetInnerHTML={{ __html: generateThemeScript(themeConfig) }}
         />
       )}
-      {descriptors.map((descriptor, index) => {
-        if (isPromise(descriptor)) {
-          return <AsyncMetaTag key={`async-${index}`} promise={descriptor} index={index} />;
-        }
-        return renderMetaDescriptor(descriptor, index);
-      })}
+      {descriptors.map((descriptor, index) =>
+        renderMetaDescriptor(descriptor, index),
+      )}
     </>
   );
 }

package/src/handles/Scripts.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+/**
+ * Renders the scripts collected by the Script handle into the document.
+ *
+ * Place `<Scripts />` inside `<head>` (default) and, if you push body scripts,
+ * `<Scripts position="body" />` at the top of `<body>`. Each site renders the
+ * configs whose `position` matches; the request CSP nonce is applied
+ * automatically to every DOCUMENT-RENDERED <script> (consumers never pass it). An
+ * async script first encountered on a soft navigation is injected client-side
+ * where the nonce is unavailable, so it carries no nonce and relies on
+ * 'strict-dynamic' (or a host allowance) — see the nonce caveat in the /scripts
+ * skill.
+ *
+ * EXECUTION CONTRACT — see the Script handle's docs. Inline + ordered (defer)
+ * scripts are document-load: they execute only when present in the initial HTML,
+ * so this component FREEZES that set after hydration (the initializer below runs
+ * once) — a later soft navigation never inserts an inert <script> (React creates
+ * client-mounted scripts via innerHTML, which the HTML spec makes non-executing).
+ * Async external scripts are React resources and stay reactive: React loads them
+ * on first encounter, including after navigation, deduped by src.
+ *
+ * @example
+ * ```tsx
+ * <html>
+ *   <head>
+ *     <MetaTags />
+ *     <Scripts />
+ *   </head>
+ *   <body>
+ *     <Scripts position="body" />
+ *     {children}
+ *   </body>
+ * </html>
+ * ```
+ */
+
+import { useState, type ReactNode } from "react";
+import { useHandle } from "../browser/react/use-handle.js";
+import { useNonce } from "../browser/react/nonce-context.js";
+import { escapeScriptBody } from "../escape-script.js";
+import { Script, type ScriptAttributes, type ScriptConfig } from "./script.js";
+
+/** An external async script is a React-managed resource (reactive on nav). */
+function isAsyncResource(config: ScriptConfig): boolean {
+  return config.src != null && config.async === true;
+}
+
+// Fields the Script handle owns (set via the ScriptConfig fields, applied as
+// explicit props by renderScript) plus the inline-content props. Dropped from the
+// attributes bag so untyped/serialized input cannot smuggle them in — e.g.
+// `children`/`dangerouslySetInnerHTML` alongside an inline body makes React throw,
+// or `src` on an inline script. The discriminated type already excludes these;
+// this is the runtime guard.
+const MANAGED_ATTRS = new Set([
+  "id",
+  "src",
+  "async",
+  "defer",
+  "type",
+  "children",
+  "nonce",
+  "dangerouslySetInnerHTML",
+]);
+
+// Drop managed fields + any `on*` event handlers (a config serializes across the
+// server -> client boundary, so a function cannot survive it) from the passthrough
+// attributes, warning in dev.
+function passthroughAttributes(
+  attributes: ScriptAttributes | undefined,
+): Record<string, unknown> {
+  if (!attributes) return {};
+  const out: Record<string, unknown> = {};
+  const dev = process.env.NODE_ENV !== "production";
+  for (const [key, value] of Object.entries(
+    attributes as Record<string, unknown>,
+  )) {
+    const isHandler = key.startsWith("on");
+    if (isHandler || MANAGED_ATTRS.has(key)) {
+      if (dev) {
+        console.warn(
+          isHandler
+            ? `[Scripts] event handler "${key}" in a script's attributes is ` +
+                `dropped; callbacks cannot cross the server -> client handle ` +
+                `boundary. Use a "use client" component for load/error handling.`
+            : `[Scripts] managed field "${key}" in a script's attributes is ` +
+                `dropped; set it via the ScriptConfig fields (the request nonce ` +
+                `is applied automatically).`,
+        );
+      }
+      continue;
+    }
+    out[key] = value;
+  }
+  return out;
+}
+
+function renderScript(
+  config: ScriptConfig,
+  nonce: string | undefined,
+  index: number,
+): ReactNode {
+  const { id, src, children, async, defer, type, attributes } = config;
+  const key = id ?? src ?? `rango-script-${index}`;
+  const attrs = passthroughAttributes(attributes);
+
+  // Inline: rendered in place (never hoisted), escaped against </script> breakout.
+  // The server-only nonce makes the attribute differ from the (undefined) client
+  // value, so suppressHydrationWarning is required — the same sanctioned pattern
+  // as the theme/Meta inline scripts.
+  if (src == null) {
+    if (children == null) return null;
+    return (
+      <script
+        key={key}
+        {...attrs}
+        id={id}
+        type={type}
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: escapeScriptBody(children) }}
+      />
+    );
+  }
+
+  if (
+    process.env.NODE_ENV !== "production" &&
+    config.position === "body" &&
+    async
+  ) {
+    console.warn(
+      `[Scripts] An async external script (src="${src}") is hoisted into ` +
+        `<head> by React; position: "body" is ignored for it.`,
+    );
+  }
+
+  // External: async => React-hoisted, src-deduped resource; otherwise in place
+  // (defer or plain), preserving authoring order.
+  return (
+    <script
+      key={key}
+      {...attrs}
+      id={id}
+      type={type}
+      src={src}
+      async={async}
+      defer={defer}
+      nonce={nonce}
+      suppressHydrationWarning
+    />
+  );
+}
+
+export function Scripts({
+  position = "head",
+}: { position?: "head" | "body" } = {}): ReactNode {
+  const all = useHandle(Script) as ScriptConfig[];
+  const nonce = useNonce();
+
+  const forPosition = all.filter(
+    (config) => (config.position ?? "head") === position,
+  );
+
+  // Document-load scripts (inline + ordered external) execute only from the
+  // initial HTML, so freeze them to the first-render set. The initializer runs
+  // during SSR and again at hydration with the same handle data, so the output
+  // matches; afterwards a navigation cannot add an inert <script>.
+  const [documentLoad] = useState(() =>
+    forPosition.filter((config) => !isAsyncResource(config)),
+  );
+  // Async external scripts are resources React loads on first encounter; keep
+  // them reactive so a script first reached via navigation still loads.
+  const asyncResources = forPosition.filter(isAsyncResource);
+
+  return (
+    <>
+      {documentLoad.map((config, index) => renderScript(config, nonce, index))}
+      {asyncResources.map((config, index) =>
+        renderScript(config, nonce, index),
+      )}
+    </>
+  );
+}