@uniflowed/vite 0.0.0-alpha.12 → 0.0.0-alpha.14

package/index.js

@@ -14,8 +14,12 @@
 //                 development and the virtual modules that make a directory
 //                 of pages an application: the route table, the client entry
 //                 that hydrates it, and the server entry that renders it. In
-//                 development it also renders every HTML request on the
-//                 server, so `uf dev` serves the same markup `uf build` writes.
+//                 development it also answers every request the way a
+//                 deployment does — the guard, a server action, a route
+//                 handler, then the renderer — so `uf dev` serves what
+//                 `uf start` serves rather than an approximation of it, and it
+//                 serves the two `/__uf/` paths a browser reports to (see
+//                 `internal/diagnostics.js`).
 //                 The client's copy of the route table is not the server's:
 //                 `internal/rsc.js` reads the RSC analysis and leaves out the
 //                 page of every route no client boundary reaches, so that
@@ -55,7 +59,16 @@ import {
   preambleCode,
   refreshRuntimeSource,
 } from "./internal/refresh.js";
-import { RSC_MANIFEST_ENV, clientRouteFilter, readRscManifest } from "./internal/rsc.js";
+import {
+  RSC_MANIFEST_ENV,
+  actionReferenceSource,
+  actionsModuleSource,
+  clientRouteFilter,
+  readRscManifest,
+  rscManifestKey,
+  serverActionModules,
+  serverActionTable,
+} from "./internal/rsc.js";
 import {
   RESERVED,
   VIRTUAL,
@@ -65,8 +78,9 @@ import {
   serverModuleSource,
 } from "./internal/routes.js";
 import { TransformService, isFlowModule } from "@uniflowed/host/transform";
+import { createChannelMiddleware } from "./internal/diagnostics.js";
 import { send, toRequest } from "./internal/http.js";
-import { withRequest } from "./internal/serve.js";
+import { beginRequest } from "./internal/serve.js";
 
 /** A resolved virtual id: Vite's convention is a leading NUL byte. */
 const resolved = (id) => `\0${id}`;
@@ -185,7 +199,44 @@ function flowPlugin({ routerRoot, appEntry, command }) {
     if (server == null) {
       emit("rsc-split", { pages: kept.size, routes: table.routes.length });
     }
-    return routesModuleSource(table, { shipsPage: (route) => kept.has(route) });
+    // `relativeTo` only here, and never for the server's copy below. Every
+    // `import()` in this table becomes a chunk URL, but `file` is a string and
+    // survives the build — so the browser's table was shipping the absolute
+    // path of every page on the machine that built the site, to every visitor.
+    // The server's table is read where those files are and keeps them.
+    return routesModuleSource(table, {
+      shipsPage: (route) => kept.has(route),
+      relativeTo: root,
+    });
+  };
+
+  /**
+   * The manifest's two action tables, re-read only when the file changes.
+   *
+   * `load` runs for every module in the graph and has to ask "is this a
+   * `"use server"` module?" about each one, so parsing the manifest per call
+   * would put a JSON parse of the whole graph between Vite and every file it
+   * opens. Size and modification time are the identity — the same pair
+   * `.uf/cache/transform` keys on — and `uf dev` drops the memo outright when
+   * its watcher sees the file change, so a rewrite inside one millisecond is
+   * still seen.
+   */
+  let actionMemo = null;
+  const forgetActions = () => {
+    actionMemo = null;
+  };
+  const actionTables = () => {
+    const file = process.env[RSC_MANIFEST_ENV];
+    const key = rscManifestKey(file);
+    if (actionMemo == null || actionMemo.key !== key) {
+      const manifest = readRscManifest(file);
+      actionMemo = {
+        key,
+        modules: serverActionModules(manifest, root),
+        table: serverActionTable(manifest, root),
+      };
+    }
+    return actionMemo;
   };
 
   return {
@@ -256,7 +307,36 @@ function flowPlugin({ routerRoot, appEntry, command }) {
       }
       if (id === resolved(VIRTUAL.client)) return clientModuleSource(entryPath);
       if (id === resolved(VIRTUAL.server)) return serverModuleSource(entryPath);
+      // Only `virtual:uf/server` imports this, so it is only ever asked for in
+      // the server environment — but the table it carries is every callable
+      // endpoint of the build, so it is worth saying that a browser asking for
+      // it gets nothing rather than getting the list.
+      if (id === resolved(VIRTUAL.actions)) {
+        if (!isSsr(this, loadOptions))
+          return "export const actions = [];\nexport default actions;\n";
+        return actionsModuleSource(actionTables().table);
+      }
       if (id.startsWith(STYLE_PREFIX)) return styles.get(id) ?? "";
+
+      // A `"use server"` module, in the browser's graph only: what the client
+      // gets is one `createServerReference` per callable export, and never the
+      // file. This is where the second half of the RSC split actually happens
+      // — the route filter above decides which *pages* the browser is given,
+      // and this decides that an action module's body, its imports and
+      // everything only they reached are not the browser's business at all.
+      //
+      // Substituting the source rather than rewriting it: a transform that
+      // stripped the body would have to be right about every way a module can
+      // name something, and being wrong once means shipping a database handle.
+      // The exports the reference module declares come from the manifest, so
+      // they are exactly the exports `uf_rsc` decided are callable endpoints
+      // and an import of anything else is a build error rather than a silent
+      // `undefined`. `crates/uf_rsc/src/graph/build.rs` colours these modules
+      // server for the same reason, so the analysis and the bundle agree.
+      if (!isSsr(this, loadOptions)) {
+        const references = actionTables().modules.get(cleanId(id));
+        if (references != null) return actionReferenceSource(references);
+      }
       return null;
     },
 
@@ -378,8 +458,15 @@ function flowPlugin({ routerRoot, appEntry, command }) {
         devServer.watcher.add(manifestPath);
         const onManifest = (file) => {
           if (path.resolve(file) !== manifestPath) return;
+          // The action tables are read from the same file and are memoised on
+          // its size and modification time, which is a pair two writes inside
+          // one millisecond can share. This is the answer that does not
+          // depend on a clock.
+          forgetActions();
           const routes = devServer.moduleGraph.getModuleById(resolved(VIRTUAL.routes));
           if (routes) devServer.moduleGraph.invalidateModule(routes);
+          const actions = devServer.moduleGraph.getModuleById(resolved(VIRTUAL.actions));
+          if (actions) devServer.moduleGraph.invalidateModule(actions);
           devServer.ws.send({ type: "full-reload", path: "*" });
         };
         devServer.watcher.on("add", onManifest);
@@ -387,75 +474,181 @@ function flowPlugin({ routerRoot, appEntry, command }) {
       }
 
       // After Vite's own middlewares, so `/@vite/client`, `/@id/...` and
-      // static files are served first and only a document request reaches
-      // the renderer.
+      // static files are served first and only what Vite declined reaches uf.
+      //
+      // # One renderer
+      //
+      // This is the only middleware that renders a document under `uf dev`,
+      // and that is worth stating because there were two. `driver.js` added a
+      // second one after `createServer` had returned, which put it *later* in
+      // the connect stack than this one — so for every request this one
+      // claimed, this one decided, and the other was reached only for what
+      // this one declined. Route-handler dispatch was in the other. A
+      // `GET /feed` from a browser is `Accept: text/html` with no extension,
+      // so it looked like a document, so `app/feed/_uf.route.js` was never
+      // asked and the reader got the route table's page — or the not-found
+      // page — for a path that had a handler. See ubugeeei-prod/uf#349.
+      //
+      // Two renderers is also how the two came to disagree about the render
+      // result's `headers`: this one wrote them and the driver's did not, so a
+      // loader calling `redirect()` answered a browser with a `307` carrying
+      // no `Location` and a meta-refresh body — a redirect that works when you
+      // deploy it and not while you are writing it. See
+      // ubugeeei-prod/uf#338.
+      //
+      // So the driver's middleware is gone and everything it did is here: it
+      // claims every request, runs the guard, the action endpoint and the
+      // dispatcher for every method, and hands back to Vite's chain what none
+      // of them answered.
+      //
+      // # What is still not `createFetchHandler`
+      //
+      // One middleware rather than two, and still not the function every
+      // deployment runs. It cannot be: `transformIndexHtml` takes a whole
+      // document, so the render has to be collected here rather than streamed
+      // (ubugeeei-prod/uf#374), and a request nothing claimed has to go back
+      // to Vite's chain rather than become a 404 — neither of which a handler
+      // that always answers with a `Response` can do.
+      //
+      // What that still costs, written down so the next reader does not have
+      // to find it: `createFetchHandler` renders inside a cache scope even
+      // with no cache configured, so a component calling `cacheLife` states a
+      // lifetime nobody honours; here there is no scope, so the same component
+      // throws under `uf dev` and renders under `uf start`. Closing that means
+      // the generated server entry handing the host a scope the way it already
+      // hands it `beginRequest` — see `serverModuleSource` in
+      // `./internal/routes.js` — and it is the next thing to remove from this
+      // list rather than something this middleware can decide on its own.
       return () => {
+        // The browser's own reporting channel, mounted above the application
+        // so that a report never reaches a project's `_uf.middleware.js` or
+        // its route table. See `internal/diagnostics.js`.
+        devServer.middlewares.use(
+          createChannelMiddleware((diagnostic) => emit("diagnostic", diagnostic)),
+        );
+
         devServer.middlewares.use(async (request, response, next) => {
-          if (!wantsDocument(request)) return next();
+          // `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 ?? "/";
+          // 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 url = request.url ?? "/";
             const entry = await importServerEntry(devServer);
             const asRequest = await toRequest(request, devServer.config);
 
-            // One request, owned here and settled once the document has been
-            // written — the same lifecycle `driver.js` gives `uf dev` and
-            // `internal/serve.js` gives `uf preview` and `uf start`. A project
-            // driving Vite itself must not get a different answer about when
-            // `after()` runs than the same project run through `uf dev`; see
-            // `internal/serve.js` and ubugeeei-prod/uf#389.
-            //
-            // Only requests that look like a document reach here, so unlike
-            // `driver.js` there is no path where uf hands the response back to
-            // Vite's chain: what is below either writes it or throws.
-            await withRequest(entry, asRequest, async () => {
-              // Before anything answers: a middleware guards a subtree, and a
-              // page rendered while the guard on it had not run is the whole of
-              // ubugeeei-prod/uf#260. `driver.js` makes the same call, for
-              // every method.
+            // The request begins here and ends when the response has been
+            // written, which is what `after()` promises and what `uf preview`,
+            // `uf start` and a compiled binary all do too — a middleware that
+            // 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);
+            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
+              // under it that matches neither. Running it inside the
+              // 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.
               const guarded = await entry.runMiddleware(asRequest);
               if (guarded != null) {
                 await send(response, guarded);
-                return;
+                return true;
               }
 
-              // Then the route handlers, above the renderer and for the same
-              // reason `driver.js` puts them there: a path that answers a
-              // request is not a document, whatever the client said it would
-              // accept. `curl /api/thing` and a `<form action>` navigation both
-              // send `Accept: text/html`, and both want the handler's answer.
-              //
-              // This step is not a duplicate of the dispatcher in `driver.js`,
-              // it is the only one that can run: this middleware is mounted by
-              // `configureServer`, which Vite calls while it is building the
-              // server, and `uf dev` adds its own after `createServer` has
-              // returned — so for every request this one claims, it is the one
-              // that decides. Without it a route handler under `uf dev` was
-              // reachable only by a client that asked for something other than
-              // HTML, and answered the 404 page to everyone else.
+              // Then a server action, below the guard and above the handlers.
+              // It declines every request that carries no action id, so this
+              // costs an ordinary request one `headers.get`; and it answers
+              // every request that carries one, refusals included, so an
+              // action can never fall through to a route handler that happens
+              // to sit at the URL it was posted to. The same two lines are in
+              // `@uniflowed/server`'s `fetch.js`, which is what every
+              // deployment runs.
+              const acted = await entry.callAction(asRequest);
+              if (acted != null) {
+                await send(response, acted);
+                return true;
+              }
+
+              // Then the route handlers, above the renderer and for every
+              // method: a path that answers a request is not a document,
+              // whatever the client said it would accept. `curl /api/thing`
+              // and a `<form action>` navigation both send `Accept:
+              // text/html`, and both want the handler's answer — which is the
+              // whole of ubugeeei-prod/uf#349.
               const handled = await entry.dispatch(asRequest);
               if (handled != null) {
                 await send(response, handled);
-                return;
+                return true;
               }
 
+              // Only a navigation reaches the renderer. A page cannot answer a
+              // `POST`, and letting one try would turn a missing handler into
+              // a rendered page with a 200 rather than a 404.
+              //
+              // `wantsDocument` is stricter than the production handler, which
+              // renders anything a static file did not answer, and the
+              // difference is Vite's chain: `/@id/…`, `/node_modules/…` and
+              // any path with an extension belong to the module server, and a
+              // request one of those declined has to go back to it rather than
+              // become a rendered 404 page. What it costs is that
+              // `/favicon.svg` on a project that has none is a bare 404 here
+              // 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.
+              if (!wantsDocument(request)) return false;
+
               const result = await entry.render(
                 url,
                 { scripts: [devUrlFor(VIRTUAL.client)], styles: [], preloads: [] },
-                { onError: (error) => reportRenderError(devServer, url, error) },
+                {
+                  // A boundary that threw after the shell went out.
+                  // `result.error` cannot carry it — the caller already has the
+                  // result by then — so the terminal hears about it here or not
+                  // at all.
+                  onError: (error) => reportRenderError(devServer, url, error),
+                },
               );
               if (result.error != null) reportRenderError(devServer, url, result.error);
-              // Collected rather than piped, for the reason `driver.js` gives at
-              // step 4: `transformIndexHtml` is a whole-document hook.
+              // Collected rather than piped: `transformIndexHtml` is a
+              // whole-document hook, so there is no first byte to send until it
+              // has run. `uf start` and `uf preview` stream — see
+              // `internal/serve.js` — and that is a property of the development
+              // server rather than of the renderer. ubugeeei-prod/uf#374.
               const html = await devServer.transformIndexHtml(url, await result.text());
-              response.statusCode = result.status;
-              response.setHeader("Content-Type", "text/html; charset=utf-8");
+              response.statusCode = result.status ?? 200;
+              // The render's own headers, then the content type over the top:
+              // exactly the order `@uniflowed/server`'s `fetch.js` writes them
+              // in, so a `Location` from `redirect()` survives here and a
+              // render cannot claim to be something other than a document.
               for (const [name, value] of Object.entries(result.headers ?? {})) {
                 response.setHeader(name, value);
               }
+              response.setHeader("content-type", "text/html; charset=utf-8");
               response.end(html);
+              return true;
             });
+
+            if (!answered) {
+              // The one path where uf is not the one writing the response: a
+              // request nothing claimed goes back to Vite's chain. The guard
+              // has still run and may have deferred work, so `close` — the
+              // socket saying the response is over, however it ended — is the
+              // only honest signal left that the bytes are out.
+              response.once("close", lifecycle.settle);
+              next();
+              return;
+            }
+            await lifecycle.settle();
           } catch (error) {
-            devServer.ssrFixStacktrace(error);
+            if (lifecycle != null) await lifecycle.settle();
+            // Map the stack back onto the Flow source before it reaches the
+            // overlay.
+            if (error instanceof Error) devServer.ssrFixStacktrace(error);
             next(error);
           }
         });
@@ -526,14 +719,25 @@ const ALL_DIAGNOSTICS = "UF_REACT_COMPILER_DIAGNOSTICS";
  * Report what the React Compiler said about one module.
  *
  * Every finding used to be printed as `a function: <message>` — no file, no
- * line, no column, and the fallback string doing all the work because the
- * compiler names an inner function about as often as not. The transform hook
+ * line, no column, and the fallback string doing all the work, because
+ * `diagnostic.function` was read out of a field only a *success* event carries
+ * and so was null for every finding there has ever been (#371), not because
+ * the compiler was reporting on anonymous inner functions. The transform hook
  * knows the module and the compiler gives a position for most findings, so
  * both go into the message: Vite prints a plugin warning's `message` and
  * nothing else, so a location that is not in the string is a location the
  * reader never sees. `id` and `loc` go along for anything reading the log
  * object rather than the line. See ubugeeei-prod/uf#307.
  *
+ * `(in Form)` is real now: `uf transform` recovers the name from the tree it
+ * compiled, and leaves it off the diagnostic when the function genuinely has
+ * no name to give.
+ *
+ * The position is real too, and is the expression the compiler objected to
+ * rather than the function containing it, so the two halves of the line say
+ * different things — `packages/hooks/dom.js:195:7: This value cannot be
+ * modified (in useLongPress)` locates the write and names the hook to look in.
+ *
  * A dependency's findings are held back. A React Compiler bailout inside
  * `@uniflowed/form` is not something the person running the build can fix, and
  * a channel carrying forty of them on every build is a channel people stop
@@ -556,9 +760,20 @@ function reportDiagnostics(context, { id, root, diagnostics, environment, report
   const mine = isProjectModule(root, id) || process.env[ALL_DIAGNOSTICS] === "all";
   for (const diagnostic of diagnostics) {
     // Everything a reader would be shown, so two findings that would print as
-    // the same line collapse into one. The compiler reports "Cannot access refs
-    // during render" once per pass that noticed it — three times for one `ref`
-    // — and three identical lines are not three things to fix.
+    // the same line collapse into one.
+    //
+    // This used to collapse far more than that, and the note here used to say
+    // the compiler reports "Cannot access refs during render" once per pass
+    // that noticed it — three times for one `ref`. That was the wrong reading
+    // of the evidence. The position in a finding was the position of the
+    // *function* it was found in, so every finding in one function shared a
+    // line and a column and any two with the same message were, to this
+    // signature, the same finding. They were not: over this repository's own
+    // packages it collapsed 173 findings into 119 lines, and the five that
+    // became one line in `DatePickerInput` are five different reads of a ref
+    // on five different lines. `uf transform` now reports where the compiler
+    // actually objected, so the signature separates them, and what it still
+    // collapses is a genuine repeat of one site.
     const signature = `${diagnostic.kind}\0${diagnostic.line}\0${diagnostic.column}\0${diagnostic.message}`;
     if (ledger.signatures.has(signature)) continue;
     ledger.signatures.add(signature);