@troyio/vite-file-router 0.5.0 → 0.6.0

package/README.md

@@ -48,14 +48,15 @@ plugins: [
       loader: "load",
       action: "mutate",
       middleware: "guard",
+      hydrateFallback: "booting",
     },
   }),
 ];
 ```
 
 Omitted convention values keep their defaults: `page`, `layout`, `loading`,
-`not-found`, `error`, `loader`, `action`, and `middleware`. Each convention
-must have a unique filename stem.
+`not-found`, `error`, `loader`, `action`, `middleware`, and
+`hydrate-fallback`. Each convention must have a unique filename stem.
 
 The router scans the pages directory recursively. Each directory becomes a
 nested route, and the following files are recognized:
@@ -70,6 +71,7 @@ nested route, and the following files are recognized:
 | `loader.js` / `loader.ts` | A React Router loader for the directory's route and its descendants. |
 | `action.js` / `action.ts` | A React Router action selected when that directory route is the submission target. |
 | `middleware.js` / `middleware.ts` | React Router middleware that runs before every loader and action at or below the directory. |
+| `hydrate-fallback.jsx` / `hydrate-fallback.tsx` | What renders while the first page load's loaders run. |
 
 Component files must default-export a React component. Loader and action
 modules must named-export their handler as `loader` or `action`; if both
@@ -144,6 +146,32 @@ export default function Loading() {
 
 A nested loading file creates a more specific boundary for that directory.
 
+Loading files cover lazy page code, not loader time. On later navigations,
+React Router keeps the current page on screen while loaders run, so show
+pending UI with `useNavigation()` in a layout.
+
+### Hydrate fallbacks
+
+On the first page load, nothing renders until the matched routes' loaders and
+lazy modules are ready. Add a `hydrate-fallback.jsx` or `hydrate-fallback.tsx`
+to show something in the meantime:
+
+```tsx
+export default function HydrateFallback() {
+  return <p>Loading the app...</p>;
+}
+```
+
+The file becomes the directory route's React Router `HydrateFallback`.
+React Router renders the nearest one at or above the first route that is
+still loading, below the layouts of the routes above it. A layout in the same
+directory as the fallback doesn't wrap it. It only shows on the first load;
+later navigations keep the current page on screen instead.
+
+Hydrate fallbacks are imported up front rather than lazily, because they
+render before any route module has loaded. Keep them small: they're part of
+your app's initial bundle.
+
 ### Not-found pages
 
 Add a `not-found.jsx` or `not-found.tsx` file to handle unmatched URLs. The plugin generates
@@ -386,11 +414,15 @@ export default defineConfig({
 ```
 
 Open the **Routes** dock to use the panel. It's development-only and needs
-Vite DevTools enabled. In the panel you can:
+Vite DevTools enabled. The panel has three pages, listed in a sidebar (or a
+top bar when the dock is narrow): **Routes**, **Timeline**, and **Generated
+code**. The page you're on is kept in the URL hash, so reloading the panel
+stays on it. In the panel you can:
 
 - **Browse the route tree.** Each route shows its URL segment, full path, and
   badges for its files: page, layout, loading, error, not-found (`404`),
-  loader, and action. You can filter by path, param, or file, collapse
+  loader, action, middleware (`mw`), and hydrate fallback (`hydrate`). You
+  can filter by path, param, or file, collapse
   branches, and move between routes with the arrow keys.
 - **See route details.** Select a route to see its params, files, and
   warnings. For a route with a loader or action, the **Data calls** section
@@ -445,6 +477,14 @@ Vite DevTools enabled. In the panel you can:
   you can see when a loader was skipped. You can filter by call type, text,
   or route. The dev server keeps the last 200 calls, so a panel opened later
   still sees recent history.
+- **Read the generated code.** The **Generated code** page shows
+  `virtual:routes`, `virtual:route-manifest`, `virtual:route-helpers`, and
+  the route types declaration file exactly as the plugin generates them, with
+  line numbers, size, simple highlighting, and a copy button. For
+  `virtual:routes`, switch between the dev server version, which includes the
+  DevTools client, and the build version. The page refreshes when route files
+  change, and a module that can't be generated (for example during a route
+  conflict) shows its error.
 - **Inspect a call.** Expand a timeline entry to see its route params, the
   request, and for actions the submitted form fields or body. Returned data
   appears as a collapsible JSON tree with a copy button. Responses show their

package/devtools/app.js

@@ -3,6 +3,7 @@ const EVENTS_URL = "/__vite-file-router-events";
 const MATCH_URL = "/__vite-file-router-match";
 const OPEN_URL = "/__open-in-editor";
 const NAVIGATE_URL = "/__vite-file-router-navigate";
+const CODE_URL = "/__vite-file-router-code";
 const RECENT_PARAMS_KEY = "vite-file-router:recent-params";
 const TESTER_STORAGE_KEY = "vite-file-router:tester-url";
 
@@ -24,11 +25,11 @@ const detailsElement = $("#details");
 const currentElement = $("#current");
 const currentSubtitle = $("#current-subtitle");
 const tabPicker = $("#tab-picker");
-const inspectTab = $("#tab-inspect");
-const timelineTab = $("#tab-timeline");
-const inspectView = $("#view-inspect");
-const timelineView = $("#view-timeline");
+const pageNav = $("#page-nav");
 const timelineCount = $("#timeline-count");
+const warningCount = $("#warning-count");
+const codeModulesElement = $("#code-modules");
+const codeViewElement = $("#code-view");
 const timelineElement = $("#timeline");
 const timelineFilter = $("#timeline-filter");
 const timelineTypes = $("#timeline-types");
@@ -47,6 +48,7 @@ const FILE_KINDS = [
   ["loader", "Loader", "loader"],
   ["action", "Action", "action"],
   ["middleware", "Middleware", "mw"],
+  ["hydrateFallback", "Hydrate fallback", "hydrate"],
 ];
 
 const state = {
@@ -69,6 +71,8 @@ const state = {
   // Exact route ID the timeline is narrowed to, from a route's details.
   timelineRoute: undefined,
   openCalls: new Set(),
+  // Generated modules for the Generated code page, fetched when it opens.
+  code: { modules: undefined, selected: "virtual:routes", variant: "dev", stale: false, failure: undefined },
   // Signature of the slow-loader warnings last rendered.
   slowSignature: "",
 };
@@ -406,7 +410,7 @@ function slowLoaderWarnings() {
         severity: "info",
         key: found.key,
         fullPath: found.node.fullPath,
-        message: `This loader took up to ${formatDuration(duration)}. Loading files don't show while loaders run, so show pending UI with useNavigation() in a layout.`,
+        message: `This loader took up to ${formatDuration(duration)}. Loading files don't show while loaders run. Add a hydrate-fallback file for the first page load, and show pending UI with useNavigation() in a layout for later navigations.`,
         files: found.node.files.loader ? [found.node.files.loader] : [],
       },
     ];
@@ -467,6 +471,10 @@ function revealRoute(key) {
 
 function renderWarnings() {
   const warnings = allWarnings();
+  const severeCount = warnings.filter((warning) => warning.severity === "warning").length;
+  warningCount.hidden = severeCount === 0;
+  warningCount.textContent = String(severeCount);
+  warningCount.title = `${severeCount} route warning${severeCount === 1 ? "" : "s"}`;
   warningsElement.hidden = warnings.length === 0;
   if (!warnings.length) return;
   const severe = warnings.filter((warning) => warning.severity === "warning").length;
@@ -694,6 +702,7 @@ function renderMatch() {
       result.middleware?.length ? fact("Middleware, outermost first", result.middleware.map(fileLink)) : undefined,
       result.loaders.length ? fact("Loaders", result.loaders.map(fileLink)) : undefined,
       result.loading ? fact("Loading fallback", fileLink(result.loading)) : undefined,
+      result.hydrateFallback ? fact("Hydrate fallback (first load)", fileLink(result.hydrateFallback)) : undefined,
       result.error ? fact("Error boundary", fileLink(result.error)) : undefined,
     ),
   );
@@ -990,6 +999,201 @@ function rowOpenButton(node, key) {
   );
 }
 
+// ---------------------------------------------------------------------------
+// Pages
+
+const PAGES = ["routes", "timeline", "code"];
+
+function currentPage() {
+  const name = window.location.hash.slice(1);
+  return PAGES.includes(name) ? name : "routes";
+}
+
+/** Shows a page. `inspect` is the Routes page's older name. */
+function showView(name) {
+  const page = name === "inspect" ? "routes" : name;
+  if (window.location.hash !== `#${page}`) {
+    history.replaceState(null, "", `#${page}`);
+  }
+  applyPage();
+}
+
+function applyPage() {
+  const page = currentPage();
+  for (const name of PAGES) $(`#page-${name}`).hidden = name !== page;
+  for (const link of pageNav.querySelectorAll("a")) {
+    if (link.dataset.page === page) link.setAttribute("aria-current", "page");
+    else link.removeAttribute("aria-current");
+  }
+  if (page === "timeline") state.unseen = 0;
+  renderTimeline();
+  if (page === "code" && (!state.code.modules || state.code.stale)) loadCode();
+}
+
+// ---------------------------------------------------------------------------
+// Generated code
+
+const CODE_MODULES = [
+  ["virtual:routes", "Route objects passed to React Router, with lazy imports and preloading."],
+  ["virtual:route-manifest", "The route tree as data: paths, params, and files."],
+  ["virtual:route-helpers", "routePath(), useRouteParams(), and useRouteData()."],
+  ["route-types", "Types for route patterns, params, and loader data."],
+];
+
+const KEYWORDS = new Set(
+  "import export from const let var function return async await if else for of in new typeof type interface declare module extends default throw try catch null undefined true false class keyof infer as".split(
+    " ",
+  ),
+);
+const TOKEN_PATTERN =
+  /(\/\/[^\n]*|\/\*[\s\S]*?\*\/)|("(?:[^"\\\n]|\\.)*"|'(?:[^'\\\n]|\\.)*'|`(?:[^`\\]|\\.)*`)|\b([A-Za-z_$][\w$]*)\b|\b(\d+(?:\.\d+)?)\b/g;
+
+/** A small highlighter for the generated JavaScript and TypeScript. */
+function highlight(code) {
+  const pieces = [];
+  let last = 0;
+  for (const match of code.matchAll(TOKEN_PATTERN)) {
+    const [text, comment, string, word, number] = match;
+    const kind = comment
+      ? "comment"
+      : string
+        ? "string"
+        : number
+          ? "number"
+          : word && KEYWORDS.has(word)
+            ? "keyword"
+            : undefined;
+    if (!kind) continue;
+    if (match.index > last) pieces.push([undefined, code.slice(last, match.index)]);
+    pieces.push([kind, text]);
+    last = match.index + text.length;
+  }
+  if (last < code.length) pieces.push([undefined, code.slice(last)]);
+
+  // Split the pieces into lines, so each line can carry its number.
+  const lines = [[]];
+  for (const [kind, text] of pieces) {
+    text.split("\n").forEach((part, index) => {
+      if (index > 0) lines.push([]);
+      if (part) lines.at(-1).push(kind ? el("span", { class: `tok-${kind}` }, part) : document.createTextNode(part));
+    });
+  }
+  if (lines.length > 1 && lines.at(-1).length === 0) lines.pop();
+  return lines.map((parts) => el("span", { class: "code-line" }, parts.length ? parts : "​"));
+}
+
+function formatBytes(bytes) {
+  return bytes < 1024 ? `${bytes} B` : `${(bytes / 1024).toFixed(1)} KB`;
+}
+
+function selectedModule() {
+  const { modules, selected, variant } = state.code;
+  return modules?.find(
+    (module) => module.id === selected && (module.variant === undefined || module.variant === variant),
+  );
+}
+
+function renderCode() {
+  const { modules, selected, variant, failure } = state.code;
+  codeModulesElement.replaceChildren(
+    ...CODE_MODULES.map(([id, description]) =>
+      el(
+        "button",
+        {
+          class: "code-module",
+          type: "button",
+          role: "tab",
+          "aria-selected": String(id === selected),
+          onclick: () => {
+            state.code.selected = id;
+            renderCode();
+          },
+        },
+        el("span", { class: "code-module-name" }, id === "route-types" ? "Route types (.d.ts)" : id),
+        el("span", { class: "code-module-description" }, description),
+      ),
+    ),
+  );
+
+  if (failure) {
+    codeViewElement.replaceChildren(el("p", { class: "empty" }, failure));
+    return;
+  }
+  if (!modules) {
+    codeViewElement.replaceChildren(el("p", { class: "empty" }, "Loading generated code…"));
+    return;
+  }
+  const module = selectedModule();
+  const code = module?.code ?? "";
+  const notes = [];
+  if (module?.id === "virtual:routes") {
+    notes.push(
+      variant === "dev"
+        ? "As the dev server serves it, with the DevTools client and call reporting."
+        : "As vite build generates it, without any DevTools code.",
+    );
+  }
+  if (module?.id === "route-types") {
+    notes.push(
+      module.written
+        ? `Written to ${module.file}.`
+        : `Not written: the dts option is false, or the project has no tsconfig.json or jsconfig.json. With dts set, it goes to ${module.file}.`,
+    );
+  }
+
+  codeViewElement.replaceChildren(
+    el(
+      "div",
+      { class: "code-toolbar" },
+      module?.id === "virtual:routes"
+        ? el(
+            "div",
+            { class: "segmented code-variant", role: "group", "aria-label": "Variant" },
+            ["dev", "build"].map((name) =>
+              el(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": String(name === variant),
+                  onclick: () => {
+                    state.code.variant = name;
+                    renderCode();
+                  },
+                },
+                name === "dev" ? "Dev server" : "Build",
+              ),
+            ),
+          )
+        : undefined,
+      el(
+        "span",
+        { class: "code-size muted" },
+        module?.code === undefined
+          ? ""
+          : `${code.split("\n").length - (code.endsWith("\n") ? 1 : 0)} lines · ${formatBytes(new TextEncoder().encode(code).length)}`,
+      ),
+      module?.code !== undefined ? copyButton(code, "Copy") : undefined,
+    ),
+    notes.length ? el("p", { class: "code-note muted" }, notes.join(" ")) : undefined,
+    module?.error
+      ? el("p", { class: "code-error" }, module.error)
+      : el("pre", { class: "code", tabindex: "0" }, el("code", {}, highlight(code))),
+  );
+}
+
+async function loadCode() {
+  state.code.stale = false;
+  try {
+    const response = await fetch(CODE_URL, { cache: "no-store" });
+    if (!response.ok) throw new Error(`Request failed (${response.status})`);
+    state.code.modules = (await response.json()).modules;
+    state.code.failure = undefined;
+  } catch (error) {
+    state.code.failure = `Couldn't load the generated code: ${error.message}`;
+  }
+  renderCode();
+}
+
 // ---------------------------------------------------------------------------
 // Loader and action timeline
 
@@ -1415,7 +1619,7 @@ function addActivity(calls) {
   if (state.activity.length > MAX_TIMELINE) {
     state.activity.splice(0, state.activity.length - MAX_TIMELINE);
   }
-  if (timelineView.hidden) state.unseen += calls.length;
+  if (currentPage() !== "timeline") state.unseen += calls.length;
   renderTimeline();
   refreshSlowWarnings();
   // Keep the selected route's call stats current.
@@ -1424,15 +1628,6 @@ function addActivity(calls) {
   if (routeId && calls.some((call) => call.routeId === routeId)) renderDetails();
 }
 
-function showView(name) {
-  const timeline = name === "timeline";
-  inspectView.hidden = timeline;
-  timelineView.hidden = !timeline;
-  inspectTab.setAttribute("aria-selected", String(!timeline));
-  timelineTab.setAttribute("aria-selected", String(timeline));
-  if (timeline) state.unseen = 0;
-  renderTimeline();
-}
 
 function applyData(data) {
   const snapshot = JSON.stringify(data);
@@ -1453,6 +1648,9 @@ function applyData(data) {
   renderCurrent();
   renderTimeline();
   if (testerInput.value.trim()) runMatch();
+  // Generated code follows the route files; refetch it now if it's showing.
+  state.code.stale = true;
+  if (currentPage() === "code" && state.code.modules) loadCode();
 }
 
 async function refresh() {
@@ -1506,8 +1704,7 @@ function connect() {
 }
 
 filterElement.addEventListener("input", renderTree);
-inspectTab.addEventListener("click", () => showView("inspect"));
-timelineTab.addEventListener("click", () => showView("timeline"));
+window.addEventListener("hashchange", applyPage);
 timelineFilter.addEventListener("input", renderTimeline);
 timelineTypes.addEventListener("click", (event) => {
   const type = event.target.closest("button")?.dataset.type;
@@ -1541,6 +1738,6 @@ testerForm.addEventListener("submit", (event) => {
 testerInput.value = readStorage(TESTER_STORAGE_KEY);
 renderTree();
 renderCurrent();
-renderTimeline();
+applyPage();
 refresh();
 connect();

package/devtools/index.html

@@ -24,6 +24,15 @@
       <symbol id="icon-go" viewBox="0 0 16 16">
         <path d="M3 8h9M8.5 4.5L12 8l-3.5 3.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
       </symbol>
+      <symbol id="icon-timeline" viewBox="0 0 16 16">
+        <path d="M3 4h10M3 8h6M3 12h8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      </symbol>
+      <symbol id="icon-code" viewBox="0 0 16 16">
+        <path d="M6 4.5L2.5 8 6 11.5M10 4.5L13.5 8 10 11.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      </symbol>
+      <symbol id="icon-copy" viewBox="0 0 16 16">
+        <path d="M5.5 5.5h7v7h-7zM3.5 10.5v-7h7" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" />
+      </symbol>
       <symbol id="icon-route" viewBox="0 0 16 16">
         <circle cx="4" cy="4" r="1.8" fill="none" stroke="currentColor" stroke-width="1.4" />
         <circle cx="12" cy="12" r="1.8" fill="none" stroke="currentColor" stroke-width="1.4" />
@@ -58,96 +67,124 @@
     </header>
 
     <p class="alert" id="error" role="alert" hidden></p>
-    <section class="conflicts" id="conflicts" aria-label="Route conflicts" hidden></section>
-    <section class="warnings" id="warnings" aria-label="Route warnings" hidden></section>
 
-    <main class="layout">
-      <section class="panel tree-panel" aria-label="Route tree">
-        <div class="panel-toolbar">
-          <label class="field">
-            <svg class="field-icon" aria-hidden="true"><use href="#icon-search" /></svg>
-            <span class="visually-hidden">Filter routes</span>
-            <input id="filter" type="search" placeholder="Filter by path, param, or file" autocomplete="off" spellcheck="false" />
-          </label>
-          <button class="icon-button" id="toggle" type="button" aria-label="Collapse all" title="Collapse all">
-            <svg><use href="#icon-collapse" /></svg>
-          </button>
-        </div>
-        <div class="tree" id="tree" role="tree" aria-label="Routes"></div>
-      </section>
+    <div class="app">
+      <nav class="page-nav" id="page-nav" aria-label="Panel pages">
+        <a href="#routes" data-page="routes" aria-current="page">
+          <svg aria-hidden="true"><use href="#icon-route" /></svg>
+          <span>Routes</span>
+          <span class="nav-count" id="warning-count" hidden></span>
+        </a>
+        <a href="#timeline" data-page="timeline">
+          <svg aria-hidden="true"><use href="#icon-timeline" /></svg>
+          <span>Timeline</span>
+          <span class="nav-count" id="timeline-count" hidden></span>
+        </a>
+        <a href="#code" data-page="code">
+          <svg aria-hidden="true"><use href="#icon-code" /></svg>
+          <span>Generated code</span>
+        </a>
+      </nav>
 
-      <aside class="side">
-        <section class="panel current-panel" aria-labelledby="current-title">
-          <div class="panel-header panel-header-row">
-            <div>
-              <h2 id="current-title">Current page</h2>
-              <p id="current-subtitle">Follows the route your app is showing.</p>
+      <div class="page" id="page-routes">
+        <section class="conflicts" id="conflicts" aria-label="Route conflicts" hidden></section>
+        <section class="warnings" id="warnings" aria-label="Route warnings" hidden></section>
+
+        <main class="layout">
+          <section class="panel tree-panel" aria-label="Route tree">
+            <div class="panel-toolbar">
+              <label class="field">
+                <svg class="field-icon" aria-hidden="true"><use href="#icon-search" /></svg>
+                <span class="visually-hidden">Filter routes</span>
+                <input id="filter" type="search" placeholder="Filter by path, param, or file" autocomplete="off" spellcheck="false" />
+              </label>
+              <button class="icon-button" id="toggle" type="button" aria-label="Collapse all" title="Collapse all">
+                <svg><use href="#icon-collapse" /></svg>
+              </button>
             </div>
-            <div class="tab-picker" id="tab-picker" role="group" aria-label="App tabs" hidden></div>
-          </div>
-          <div id="current" aria-live="polite"></div>
-        </section>
+            <div class="tree" id="tree" role="tree" aria-label="Routes"></div>
+          </section>
 
-        <div class="tabs" role="tablist" aria-label="Panel sections">
-          <button class="tab" id="tab-inspect" type="button" role="tab" aria-selected="true" aria-controls="view-inspect">Inspect</button>
-          <button class="tab" id="tab-timeline" type="button" role="tab" aria-selected="false" aria-controls="view-timeline">
-            Timeline <span class="tab-count" id="timeline-count" hidden></span>
-          </button>
-        </div>
+          <aside class="side">
+            <section class="panel current-panel" aria-labelledby="current-title">
+              <div class="panel-header panel-header-row">
+                <div>
+                  <h2 id="current-title">Current page</h2>
+                  <p id="current-subtitle">Follows the route your app is showing.</p>
+                </div>
+                <div class="tab-picker" id="tab-picker" role="group" aria-label="App tabs" hidden></div>
+              </div>
+              <div id="current" aria-live="polite"></div>
+            </section>
+
+            <section class="panel" aria-labelledby="tester-title">
+              <div class="panel-header">
+                <h2 id="tester-title">Test a URL</h2>
+                <p>Shows which route files handle a URL.</p>
+              </div>
+              <form class="tester" id="tester">
+                <label class="field field-mono">
+                  <span class="visually-hidden">URL to match</span>
+                  <input id="tester-input" type="text" placeholder="/users/42?tab=posts" autocomplete="off" spellcheck="false" />
+                </label>
+                <button class="button" type="submit">Match</button>
+              </form>
+              <div id="tester-result" aria-live="polite"></div>
+            </section>
 
-        <div class="view" id="view-inspect" role="tabpanel" aria-labelledby="tab-inspect">
-        <section class="panel" aria-labelledby="tester-title">
-          <div class="panel-header">
-            <h2 id="tester-title">Test a URL</h2>
-            <p>Shows which route files handle a URL.</p>
+            <section class="panel" aria-labelledby="details-title">
+              <div class="panel-header">
+                <h2 id="details-title">Route details</h2>
+              </div>
+              <div id="details"></div>
+            </section>
+          </aside>
+        </main>
+      </div>
+
+      <div class="page" id="page-timeline" hidden>
+        <section class="panel" aria-labelledby="timeline-title">
+          <div class="panel-header panel-header-row">
+            <div>
+              <h2 id="timeline-title">Loader and action timeline</h2>
+              <p>Calls made by your app, newest first.</p>
+            </div>
+            <button class="icon-button text-button" id="timeline-clear" type="button">Clear</button>
           </div>
-          <form class="tester" id="tester">
-            <label class="field field-mono">
-              <span class="visually-hidden">URL to match</span>
-              <input id="tester-input" type="text" placeholder="/users/42?tab=posts" autocomplete="off" spellcheck="false" />
+          <div class="timeline-toolbar">
+            <div class="segmented" id="timeline-types" role="group" aria-label="Filter by call type">
+              <button type="button" data-type="all" aria-pressed="true">All</button>
+              <button type="button" data-type="loader" aria-pressed="false">Loaders</button>
+              <button type="button" data-type="action" aria-pressed="false">Actions</button>
+              <button type="button" data-type="middleware" aria-pressed="false">Middleware</button>
+              <button type="button" data-type="revalidate" aria-pressed="false">Revalidation</button>
+            </div>
+            <span class="route-pill" id="timeline-route" hidden></span>
+            <label class="field">
+              <svg class="field-icon" aria-hidden="true"><use href="#icon-search" /></svg>
+              <span class="visually-hidden">Filter calls</span>
+              <input id="timeline-filter" type="search" placeholder="Filter by route, URL, or outcome" autocomplete="off" spellcheck="false" />
             </label>
-            <button class="button" type="submit">Match</button>
-          </form>
-          <div id="tester-result" aria-live="polite"></div>
-        </section>
-
-        <section class="panel" aria-labelledby="details-title">
-          <div class="panel-header">
-            <h2 id="details-title">Route details</h2>
           </div>
-          <div id="details"></div>
+          <ol class="timeline" id="timeline" aria-label="Calls"></ol>
         </section>
-        </div>
+      </div>
 
-        <div class="view" id="view-timeline" role="tabpanel" aria-labelledby="tab-timeline" hidden>
-          <section class="panel" aria-labelledby="timeline-title">
-            <div class="panel-header panel-header-row">
-              <div>
-                <h2 id="timeline-title">Loader and action timeline</h2>
-                <p>Calls made by your app, newest first.</p>
-              </div>
-              <button class="icon-button text-button" id="timeline-clear" type="button">Clear</button>
-            </div>
-            <div class="timeline-toolbar">
-              <div class="segmented" id="timeline-types" role="group" aria-label="Filter by call type">
-                <button type="button" data-type="all" aria-pressed="true">All</button>
-                <button type="button" data-type="loader" aria-pressed="false">Loaders</button>
-                <button type="button" data-type="action" aria-pressed="false">Actions</button>
-                <button type="button" data-type="middleware" aria-pressed="false">Middleware</button>
-                <button type="button" data-type="revalidate" aria-pressed="false">Revalidation</button>
-              </div>
-              <span class="route-pill" id="timeline-route" hidden></span>
-              <label class="field">
-                <svg class="field-icon" aria-hidden="true"><use href="#icon-search" /></svg>
-                <span class="visually-hidden">Filter calls</span>
-                <input id="timeline-filter" type="search" placeholder="Filter by route, URL, or outcome" autocomplete="off" spellcheck="false" />
-              </label>
+      <div class="page" id="page-code" hidden>
+        <section class="panel code-panel" aria-labelledby="code-title">
+          <div class="panel-header panel-header-row">
+            <div>
+              <h2 id="code-title">Generated code</h2>
+              <p>The modules the plugin generates from your route files.</p>
             </div>
-            <ol class="timeline" id="timeline" aria-label="Calls"></ol>
-          </section>
-        </div>
-      </aside>
-    </main>
+          </div>
+          <div class="code-layout">
+            <div class="code-modules" id="code-modules" role="tablist" aria-label="Generated modules"></div>
+            <div class="code-view" id="code-view" role="tabpanel" aria-live="polite"></div>
+          </div>
+        </section>
+      </div>
+    </div>
     <script type="module" src="/__vite-file-router/app.js"></script>
   </body>
 </html>

package/devtools/style.css

@@ -350,7 +350,7 @@ h1 {
 
 .alert,
 .conflicts {
-  margin: 16px 20px 0;
+  margin: 0;
   padding: 12px 14px;
   border: 1px solid var(--border);
   border-radius: 0;
@@ -389,7 +389,7 @@ h1 {
   grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
   gap: 16px;
   align-items: start;
-  padding: 16px 20px 24px;
+  padding: 0;
 }
 
 @media (max-width: 860px) {
@@ -918,62 +918,6 @@ mark {
 }
 
 
-/* Tabs */
-
-.tabs {
-  display: flex;
-  gap: 4px;
-  padding: 4px;
-  border: 1px solid var(--border);
-  border-radius: 0;
-  background: var(--surface);
-}
-
-.tab {
-  display: inline-flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 30px;
-  border: 0;
-  border-radius: 0;
-  background: none;
-  color: var(--text-2);
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.tab:hover {
-  color: var(--text);
-}
-
-.tab[aria-selected="true"] {
-  background: var(--accent-soft);
-  color: var(--accent-text);
-}
-
-.tab-count {
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  border-radius: 0;
-  background: var(--accent);
-  color: var(--accent-contrast);
-  font-size: 10.5px;
-  line-height: 18px;
-  font-variant-numeric: tabular-nums;
-}
-
-.view {
-  display: grid;
-  gap: 16px;
-}
-
-.view[hidden] {
-  display: none;
-}
-
 .text-button {
   width: auto;
   padding: 0 10px;
@@ -1137,7 +1081,7 @@ mark {
 /* Missing-file warnings */
 
 .warnings {
-  margin: 16px 20px 0;
+  margin: 0;
   border: 1px solid var(--border);
   background: var(--surface);
 }
@@ -1488,3 +1432,279 @@ mark {
 .result-open {
   margin-left: auto;
 }
+
+/* Pages and navigation */
+
+.alert {
+  margin: 16px 20px 0;
+}
+
+.app {
+  display: grid;
+  grid-template-columns: 184px minmax(0, 1fr);
+  align-items: start;
+  min-height: calc(100vh - 57px);
+}
+
+.page-nav {
+  position: sticky;
+  top: 57px;
+  display: grid;
+  align-content: start;
+  gap: 2px;
+  padding: 16px 10px;
+  border-right: 1px solid var(--border);
+  min-height: calc(100vh - 57px);
+}
+
+.page-nav a {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  height: 34px;
+  padding: 0 10px;
+  color: var(--text-2);
+  font-weight: 550;
+  text-decoration: none;
+}
+
+.page-nav a:hover {
+  background: var(--surface-2);
+  color: var(--text);
+}
+
+.page-nav a[aria-current="page"] {
+  background: var(--accent-soft);
+  color: var(--text);
+  font-weight: 650;
+}
+
+.page-nav svg {
+  color: var(--text-3);
+}
+
+.page-nav a[aria-current="page"] svg {
+  color: var(--text);
+}
+
+.nav-count {
+  min-width: 18px;
+  height: 18px;
+  margin-left: auto;
+  padding: 0 5px;
+  background: var(--accent);
+  color: var(--accent-contrast);
+  font-size: 10.5px;
+  line-height: 18px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+#warning-count {
+  background: var(--surface-2);
+  color: var(--warning-text);
+  font-weight: 650;
+}
+
+.page {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  padding: 16px 20px 24px;
+  align-content: start;
+}
+
+@media (max-width: 860px) {
+  .app {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .page-nav {
+    position: static;
+    display: flex;
+    gap: 2px;
+    min-height: 0;
+    padding: 6px 12px;
+    overflow-x: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .page-nav a {
+    flex: none;
+  }
+
+  .page {
+    padding: 12px;
+  }
+}
+
+/* Generated code */
+
+.code-layout {
+  display: grid;
+  grid-template-columns: 230px minmax(0, 1fr);
+  border-top: 1px solid var(--border);
+  margin-top: 14px;
+}
+
+.code-modules {
+  display: grid;
+  align-content: start;
+  border-right: 1px solid var(--border);
+}
+
+.code-module {
+  display: grid;
+  gap: 2px;
+  padding: 10px 14px;
+  border: 0;
+  border-bottom: 1px solid var(--border);
+  background: none;
+  text-align: left;
+  cursor: pointer;
+}
+
+.code-module:hover {
+  background: var(--surface-2);
+}
+
+.code-module[aria-selected="true"] {
+  background: var(--accent-soft);
+}
+
+.code-module-name {
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.code-module-description {
+  color: var(--text-3);
+  font-size: 11.5px;
+}
+
+.code-view {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  min-width: 0;
+  padding: 12px 14px 14px;
+}
+
+.code-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.code-variant {
+  flex: none;
+  width: 220px;
+}
+
+.code-size {
+  margin-left: auto;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.code-note {
+  font-size: 12px;
+}
+
+.code-error {
+  padding: 10px 12px;
+  background: var(--surface-2);
+  color: var(--danger-text);
+  white-space: pre-wrap;
+}
+
+.code {
+  max-height: calc(100vh - 260px);
+  min-height: 200px;
+  margin: 0;
+  overflow: auto;
+  border: 1px solid var(--border);
+  background: var(--surface-2);
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.6;
+  counter-reset: line;
+}
+
+.code code {
+  display: block;
+  min-width: max-content;
+  padding: 8px 0;
+}
+
+.code-line {
+  display: block;
+  padding-right: 16px;
+  white-space: pre;
+}
+
+.code-line::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 3.5em;
+  margin-right: 14px;
+  padding-right: 10px;
+  border-right: 1px solid var(--border);
+  color: var(--text-3);
+  text-align: right;
+  user-select: none;
+}
+
+.tok-comment {
+  color: var(--text-3);
+  font-style: italic;
+}
+
+.tok-string {
+  color: var(--success);
+}
+
+.tok-keyword {
+  color: var(--text);
+  font-weight: 650;
+}
+
+.tok-number {
+  color: var(--warning-text);
+}
+
+@media (max-width: 860px) {
+  .code-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .code-modules {
+    display: flex;
+    overflow-x: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .code-module {
+    flex: none;
+    border-bottom: 0;
+    border-right: 1px solid var(--border);
+  }
+
+  .code-module-description {
+    display: none;
+  }
+}
+
+@media (max-width: 1080px) and (min-width: 861px) {
+  .layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .side {
+    position: static;
+  }
+}

package/dist/devtools.d.ts

@@ -6,6 +6,7 @@ export declare const ROUTE_INSPECTOR_DATA_PATH = "/__vite-file-router-data";
 export declare const ROUTE_INSPECTOR_EVENTS_PATH = "/__vite-file-router-events";
 export declare const ROUTE_INSPECTOR_MATCH_PATH = "/__vite-file-router-match";
 export declare const ROUTE_INSPECTOR_NAVIGATE_PATH = "/__vite-file-router-navigate";
+export declare const ROUTE_INSPECTOR_CODE_PATH = "/__vite-file-router-code";
 export type RouteInspectorState = {
     /** Absolute Vite project root, so the panel can open files in an editor. */
     projectRoot: string;
@@ -58,6 +59,7 @@ export type RouteMatchResult = {
     loaders: string[];
     middleware: string[];
     loading?: string;
+    hydrateFallback?: string;
     error?: string;
 };
 export declare function matchRouteManifest(manifest: RouteManifestNode, url: string): Promise<RouteMatchResult>;

package/dist/index.js

@@ -12,7 +12,8 @@ var DEFAULT_CONVENTIONS = {
 	error: "error",
 	loader: "loader",
 	action: "action",
-	middleware: "middleware"
+	middleware: "middleware",
+	hydrateFallback: "hydrate-fallback"
 };
 function getRouteSegment(name) {
 	if (name.startsWith("[...") && name.endsWith("]")) return "*";
@@ -526,6 +527,11 @@ function generateNode(node, root, context, inheritedBoundary) {
 		const instrumentId = getInstrumentId(node, context);
 		route.middleware = `[${instrumentId ? `instrumentMiddleware(${JSON.stringify(instrumentId)}, ${load})` : load}]`;
 	}
+	if (node.hydrateFallback) {
+		const fallback = genSafeVariableName(`HydrateFallback${context.nextLoadingId++}`);
+		context.loadingImports.push(`import ${fallback} from ${JSON.stringify(getImportPath(node.hydrateFallback, context.projectRoot))};`);
+		route.HydrateFallback = fallback;
+	}
 	let loadingComponent;
 	if (node.loading) {
 		loadingComponent = genSafeVariableName(`Loading${context.nextLoadingId++}`);
@@ -845,6 +851,7 @@ async function matchRouteManifest(manifest, url) {
 		loaders: collect("loader"),
 		middleware: collect("middleware"),
 		...nearest("loading") ? { loading: nearest("loading") } : {},
+		...nearest("hydrateFallback") ? { hydrateFallback: nearest("hydrateFallback") } : {},
 		...nearest("error") ? { error: nearest("error") } : {}
 	};
 }
@@ -1175,6 +1182,44 @@ function routes(input = "src/pages") {
 		onActivity: (event) => routeEvents.broadcast("activity", event)
 	});
 	const routeEvents = createRouteEventStream(getInspectorState, () => [["apps", appTracker.tabs()], ["activity-snapshot", appTracker.activity()]]);
+	/**
+	* Every module the plugin generates, for the DevTools Generated code page.
+	* A module that fails to generate (for example on a route conflict)
+	* reports its error instead of failing the others.
+	*/
+	async function getGeneratedCode() {
+		const capture = async (module, create) => {
+			try {
+				return {
+					...module,
+					code: await create()
+				};
+			} catch (error) {
+				return {
+					...module,
+					error: error instanceof Error ? error.message : String(error)
+				};
+			}
+		};
+		const typesFile = declarationFile ?? path.resolve(projectRoot, DEFAULT_DTS);
+		return Promise.all([
+			capture({
+				id: ROUTES_MODULE_ID,
+				variant: "dev"
+			}, () => execute(true)),
+			capture({
+				id: ROUTES_MODULE_ID,
+				variant: "build"
+			}, () => execute(false)),
+			capture({ id: MANIFEST_MODULE_ID }, executeManifest),
+			capture({ id: ROUTE_HELPERS_MODULE_ID }, executeRouteHelpers),
+			capture({
+				id: "route-types",
+				file: path.relative(projectRoot, typesFile).split(path.sep).join("/"),
+				written: Boolean(declarationFile)
+			}, () => createRouteDeclarations(scan(root, options.conventions), projectRoot, typesFile))
+		]);
+	}
 	function writeDeclarations() {
 		if (!declarationFile) return;
 		const content = createRouteDeclarations(scan(root, options.conventions), projectRoot, declarationFile);
@@ -1191,12 +1236,13 @@ function routes(input = "src/pages") {
 			return leftSource.localeCompare(rightSource);
 		});
 	}
-	async function execute() {
+	/** `devClient` adds the DevTools client, which only the dev server serves. */
+	async function execute(devClient = dev) {
 		const tree = scan(root, options.conventions);
 		const conflicts = findPageRouteConflicts(tree);
 		if (conflicts.length) {
 			const error = new RouteConflictError(conflicts);
-			if (!dev) throw error;
+			if (!devClient) throw error;
 			const code = `
         import { createElement } from "react";
 
@@ -1220,7 +1266,7 @@ function routes(input = "src/pages") {
       `;
 			return format(code, { parser: "typescript" });
 		}
-		const generated = generate(tree, true, projectRoot, { devClient: dev });
+		const generated = generate(tree, true, projectRoot, { devClient });
 		const sections = [
 			sortImports(generated.imports).join("\n"),
 			generated.helpers.join("\n"),
@@ -1435,7 +1481,8 @@ function routes(input = "src/pages") {
 					"/__vite-file-router-data",
 					"/__vite-file-router-events",
 					"/__vite-file-router-match",
-					"/__vite-file-router-navigate"
+					"/__vite-file-router-navigate",
+					"/__vite-file-router-code"
 				].includes(url.pathname)) {
 					next();
 					return;
@@ -1447,6 +1494,10 @@ function routes(input = "src/pages") {
 					res.end("Method Not Allowed");
 					return;
 				}
+				if (url.pathname === "/__vite-file-router-code") {
+					getGeneratedCode().then((modules) => sendJson(res, { modules }), next);
+					return;
+				}
 				if (url.pathname === "/__vite-file-router-navigate") {
 					navigateApp(req, res);
 					return;

package/dist/scanner.d.ts

@@ -10,9 +10,10 @@ export type Node = {
     loader?: string;
     action?: string;
     middleware?: string;
+    hydrateFallback?: string;
     children: Node[];
 };
-export type RouteFileKind = "page" | "layout" | "loading" | "notFound" | "error" | "loader" | "action" | "middleware";
+export type RouteFileKind = "page" | "layout" | "loading" | "notFound" | "error" | "loader" | "action" | "middleware" | "hydrateFallback";
 export type RouteConventions = Partial<Record<RouteFileKind, string>>;
 export type RouteManifestNode = {
     segment: string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@troyio/vite-file-router",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "File-system routing plugin for Vite",
   "type": "module",
   "private": false,