@uniflowed/vite 0.0.0-alpha.35 → 0.0.0-alpha.39

package/index.js

@@ -28,6 +28,11 @@
 //                 markdown, front matter, heading ids and build-time syntax
 //                 highlighting, so `.mdx` works with
 //                 no configuration.
+// * `uf:barrel-imports` — a named import from `@uniflowed/ui` becomes an import
+//                 from the file that defines the name, in every environment,
+//                 so a page using one component loads that component's module
+//                 rather than every module the barrel re-exports. See
+//                 `internal/barrel-imports.js`.
 // * `uf:asset`  — an imported image is decoded, resized to the widths the
 //                 project declares and re-encoded by `uf assets`, and an
 //                 imported font is self-hosted with the `@font-face` and the
@@ -53,9 +58,11 @@ import {
   auditTag,
 } from "./internal/a11y.js";
 import { assetPlugin } from "./internal/assets.js";
+import { barrelImportsPlugin, namespaceViewOf } from "./internal/barrel-imports.js";
 import { emit, reportRenderError } from "./internal/events.js";
 import remarkFrontmatterExport from "./internal/frontmatter.js";
 import { highlightPlugin } from "./internal/highlight.js";
+import { moduleId } from "./internal/module-graph.js";
 import remarkFrontmatter from "remark-frontmatter";
 import remarkGfm from "remark-gfm";
 
@@ -82,17 +89,20 @@ import {
   clientModuleSource,
   resolveRouteTarget,
   routesModuleSource,
+  routingRulesOf,
   scanRoutes,
   serverModuleSource,
 } from "./internal/routes.js";
 import { TransformService, isFlowModule } from "@uniflowed/host/transform";
 import {
   DEV_RSC_HOOK,
+  FLIGHT_BROWSER_DEPENDENCIES,
   FLIGHT_VIRTUAL,
   RSC_ENVIRONMENT,
   builtBridgeSource,
   builtReferencesSource,
   clientManifestSource,
+  clientModuleUrlPlugin,
   clientReferencePlugin,
   compilerRuntimeSource,
   createFlightState,
@@ -109,8 +119,15 @@ import {
 } from "./internal/flight.js";
 import { createChannelMiddleware } from "./internal/diagnostics.js";
 import { devtoolsPreamble } from "./internal/devtools.js";
-import { send, toRequest } from "./internal/http.js";
-import { beginRequest } from "./internal/serve.js";
+import { send, toAddressRequest, toRequest } from "./internal/http.js";
+import {
+  answerRouting,
+  answersInFrontOfFiles,
+  beginRequest,
+  forViteBase,
+  rewriteRouting,
+} from "./internal/serve.js";
+import { serverComponentsProblem } from "./internal/server-components.js";
 
 /** A resolved virtual id: Vite's convention is a leading NUL byte. */
 const resolved = (id) => `\0${id}`;
@@ -166,6 +183,16 @@ export default function uniflowed(options = {}) {
   // at. Anything but `"document"` is the client router, which is what every
   // project that has not heard of the key has.
   const navigation = app.rendering?.navigation === "document" ? "document" : "client";
+  // How long, in seconds, the client router shows a route it already fetched
+  // without asking the server again, written into the client entry beside
+  // `navigation` and honoured by every command for the same reason. Anything
+  // but a positive number is `0`, which keeps nothing.
+  const staleTime =
+    typeof app.rendering?.staleTime === "number" &&
+    Number.isFinite(app.rendering.staleTime) &&
+    app.rendering.staleTime > 0
+      ? app.rendering.staleTime
+      : 0;
   // Whether this application starts by attaching to markup or by rendering
   // into an empty root. `["csr"]` is the only list that means the second, and
   // `uf` refuses that value beside any other while the config is read — so the
@@ -184,6 +211,10 @@ export default function uniflowed(options = {}) {
     : null;
 
   const accessibility = ufConfig.accessibility ?? {};
+  // `app.router.redirects`, `rewrites` and `headers`: written into the server
+  // bundle for every host that serves a build, and asked by `uf dev` itself
+  // from the same object. See `@uniflowed/server`'s `internal/routing.js`.
+  const routing = routingRulesOf(app.router);
 
   return [
     flowPlugin({
@@ -192,12 +223,17 @@ export default function uniflowed(options = {}) {
       routeTarget,
       strictMode,
       navigation,
+      staleTime,
       mount,
       flightState,
+      routing,
       command: options.command,
       accessibility,
     }),
-    ...(flightState == null ? [] : [clientReferencePlugin(flightState)]),
+    ...(flightState == null ? [] : [clientReferencePlugin(flightState), clientModuleUrlPlugin()]),
+    // After the references, so a client module the rsc graph has already
+    // replaced is not read for imports it no longer has; see the file.
+    barrelImportsPlugin(),
     mdxPlugin(markdown),
     assetPlugin({
       images: builtins.images ?? {},
@@ -215,8 +251,10 @@ function flowPlugin({
   routeTarget,
   strictMode,
   navigation,
+  staleTime,
   mount,
   flightState,
+  routing,
   command,
   accessibility,
 }) {
@@ -353,6 +391,16 @@ function flowPlugin({
 
     config(userConfig, env) {
       const projectRoot = path.resolve(userConfig.root ?? process.cwd());
+      // Before anything is resolved. Routes that render as React Server
+      // Components need `react-server-dom-parcel` and React 19.3, and the router
+      // installs without either (ubugeeei-prod/uf#992). Said here, once, rather
+      // than as an unresolved import deep in a build or a failure inside a render.
+      if (flightState != null) {
+        const problem = serverComponentsProblem(projectRoot);
+        if (problem != null) {
+          throw new Error(problem);
+        }
+      }
       isProduction = env.mode === "production" || env.command === "build";
       // A reference names the client manifest only in a build, where a client
       // build writes the chunks it names; a dev server names the URL it serves.
@@ -375,6 +423,9 @@ function flowPlugin({
             "react/compiler-runtime",
             "react-dom",
             "react-dom/client",
+            // React's Flight client, for an application whose routes render as
+            // Server Components; `FLIGHT_BROWSER_DEPENDENCIES` says why.
+            ...(flightState == null ? [] : FLIGHT_BROWSER_DEPENDENCIES),
             // The accessibility audit's engine, when this project has one.
             //
             // Named up front rather than left to be discovered. axe-core is
@@ -507,22 +558,26 @@ function flowPlugin({
         return flightClientSource(entryPath, {
           strictMode: strictMode && !isProduction,
           navigation,
+          staleTime,
+          routing,
         });
       }
       if (id === resolved(VIRTUAL.client)) {
         return clientModuleSource(entryPath, {
           strictMode: strictMode && !isProduction,
           navigation,
+          staleTime,
           mount,
+          routing,
         });
       }
       if (id === resolved(VIRTUAL.server)) {
         return flightState == null
-          ? serverModuleSource(entryPath)
-          : flightServerSource(entryPath, VIRTUAL.routes, VIRTUAL.actions);
+          ? serverModuleSource(entryPath, routing)
+          : flightServerSource(entryPath, VIRTUAL.routes, VIRTUAL.actions, routing);
       }
       if (flightState != null) {
-        if (id === resolved(FLIGHT_VIRTUAL.entry)) return rscEntrySource(VIRTUAL.routes);
+        if (id === resolved(FLIGHT_VIRTUAL.entry)) return rscEntrySource(VIRTUAL.routes, routing);
         if (id === resolved(FLIGHT_VIRTUAL.compilerRuntime)) return compilerRuntimeSource();
         if (id === resolved(FLIGHT_VIRTUAL.bridge)) {
           if (server != null) return devBridgeSource();
@@ -580,7 +635,9 @@ function flowPlugin({
     },
 
     async transform(code, id, transformOptions) {
-      if (!isFlowModule(id)) return null;
+      // A view of a barrel's namespace has the barrel's path and none of its
+      // source: `uf:barrel-imports` generates it as JavaScript.
+      if (!isFlowModule(id) || namespaceViewOf(id) != null) return null;
       // Both server graphs: neither gets a refresh wrapper, and the rsc graph's
       // findings are reported as that graph's.
       const rsc = this.environment?.name === RSC_ENVIRONMENT;
@@ -610,10 +667,17 @@ function flowPlugin({
       // business: Vite already injects a stylesheet in dev, extracts it in a
       // build, code-splits it per chunk, and replaces it over HMR. A module
       // whose styles are gone stops importing it, and Vite notices.
+      //
+      // The stylesheet is named by the module's path from the project root, the
+      // spelling `moduleId` gives the module graph report, and not by its
+      // absolute path. In a client chunk the stylesheet is one of the chunk's
+      // sources, so its name is written into the source map a site publishes,
+      // and an absolute name would publish where the machine that built it
+      // keeps its files. A module outside the root climbs out with `../`.
       const styled = out.css != null && out.css !== "";
       let output = out.code;
       if (styled) {
-        const styleId = `${STYLE_PREFIX}${cleanId(id)}.css`;
+        const styleId = `${STYLE_PREFIX}${moduleId(root, cleanId(id))}.css`;
         styles.set(styleId, out.css);
         output = `import ${JSON.stringify(styleId)};\n${output}`;
       }
@@ -709,6 +773,42 @@ function flowPlugin({
         service = null;
       });
 
+      // `app.router.headers` and `redirects`, in front of Vite's own middleware
+      // — the hook's body runs before those are installed — so a redirect
+      // answers before `public/` is looked in and a header reaches a file Vite
+      // serves, as both do in front of the static half of every other door.
+      // Vite's module server is left alone: `/@vite/client` and `/@fs/…` are
+      // development plumbing no deployment has, and `/__uf/` is the browser's
+      // channel back. Not mounted at all for a project with neither list.
+      if (answersInFrontOfFiles(routing)) {
+        devServer.middlewares.use((request, response, next) => {
+          const url = request.url ?? "/";
+          // Vite serves its own paths under the base path too, so they are
+          // recognised once it is taken off.
+          const under =
+            routing.basePath !== "" && url.startsWith(`${routing.basePath}/`)
+              ? url.slice(routing.basePath.length)
+              : url;
+          if (
+            under.startsWith("/@") ||
+            under.startsWith("/node_modules/") ||
+            under.startsWith("/__uf/")
+          ) {
+            next();
+            return;
+          }
+          answerRouting(routing, toAddressRequest(request), response)
+            .then((answered) => {
+              if (answered) return;
+              // The bare base path is the root, which Vite only knows as
+              // `/docs/`; see `forViteBase`.
+              forViteBase(routing, request);
+              next();
+            })
+            .catch(next);
+        });
+      }
+
       // A reserved file appearing or disappearing changes the route table,
       // which lives in a virtual module the watcher knows nothing about.
       //
@@ -820,14 +920,26 @@ function flowPlugin({
           // `request.url` and not `originalUrl`, which is the URL Vite's base
           // middleware has already stripped the base from — and the route
           // table's paths have no base in them either.
-          const url = request.url ?? "/";
+          //
+          // `let`, because a rewrite moves it: from here on it is the address
+          // the application answers for, which is what the render, the payload
+          // and the document test below all have to agree on.
+          let url = request.url ?? "/";
           // Declared out here so the catch below can still settle: a request
           // that failed is a request that happened, and a middleware that
           // logged its arrival is owed its callback either way.
           let lifecycle = null;
           try {
             const entry = await importServerEntry(devServer);
-            const asRequest = await toRequest(request, devServer.config);
+            // At `request.url`, which Vite's base middleware has already taken
+            // `app.router.basePath` off: the application path, as every other
+            // front door hands the application once it has admitted a request.
+            const arrived = await toRequest(request, devServer.config, url);
+            // `app.router.rewrites`, where `createFetchHandler` applies them for
+            // every other door: after the files Vite already served, before the
+            // guard — so the guard that runs is the destination's.
+            let asRequest = (await rewriteRouting(entry.routing, arrived)) ?? arrived;
+            if (asRequest !== arrived) url = addressOf(asRequest);
 
             // The request begins here and ends when the response has been
             // written, which is what `after()` promises and what `uf preview`,
@@ -835,7 +947,7 @@ function flowPlugin({
             // logs a response's status has to mean the same thing in
             // development as in production. See `internal/serve.js` and
             // ubugeeei-prod/uf#389.
-            lifecycle = await beginRequest(entry, asRequest);
+            lifecycle = await beginRequest(entry, arrived);
             const answered = await lifecycle.run(async () => {
               // Before anything answers: a middleware guards a subtree, so it
               // has to run for a page, for a route handler, and for a path
@@ -843,8 +955,14 @@ function flowPlugin({
               // dispatcher and again inside the renderer would have left
               // `/dashboard/typo` unguarded and run it twice for a path that
               // is both. See ubugeeei-prod/uf#260.
+              //
+              // A `Request` back is a middleware's `rewrite()`, already past
+              // the destination's own middleware.
               const guarded = await entry.runMiddleware(asRequest);
-              if (guarded != null) {
+              if (guarded instanceof Request) {
+                asRequest = guarded;
+                url = addressOf(guarded);
+              } else if (guarded != null) {
                 await send(response, guarded);
                 return true;
               }
@@ -912,7 +1030,7 @@ function flowPlugin({
               // and the project's own not-found *page* under `uf preview` and
               // `uf start` — a difference in the body of a 404 for a path that
               // is an asset request in the first place.
-              const notDocument = notADocumentBecause(request);
+              const notDocument = notADocumentBecause(request, url);
               if (notDocument === "accept") {
                 // Everything about this is a navigation except the header, and
                 // the path is one uf renders. Say so, rather than letting the
@@ -1077,9 +1195,23 @@ async function importServerEntry(devServer) {
   return devServer.ssrLoadModule(VIRTUAL.server);
 }
 
+/**
+ * The path and query a `Request` is for, which is what the dev server's
+ * renderer and payload test are keyed on.
+ *
+ * @param {Request} request
+ */
+function addressOf(request) {
+  const url = new URL(request.url);
+  return url.pathname + url.search;
+}
+
 /**
  * Why `request` is not a document request, or `null` when it is one.
  *
+ * `url` is the address the application answers for, which a rewrite may have
+ * moved away from the one the request line named.
+ *
  * A reason rather than a boolean because one of the four is worth saying out
  * loud. Three of them mean the request belongs to somebody else — Vite's module
  * server, a static file, or a method a page cannot answer — and handing it back
@@ -1091,9 +1223,8 @@ async function importServerEntry(devServer) {
  * confused: `/favicon.svg` with `Accept: *\/*` is an asset, not a navigation
  * with the wrong header, and still goes back to Vite's chain untouched.
  */
-function notADocumentBecause(request) {
+function notADocumentBecause(request, url = request.url ?? "/") {
   if (request.method !== "GET" && request.method !== "HEAD") return "method";
-  const url = request.url ?? "/";
   if (url.startsWith("/@") || url.startsWith("/node_modules/")) return "module-server";
   const pathname = url.split("?")[0];
   // A request for a file — `/favicon.svg`, `/assets/x.js` — that no static