@uniflowed/vite 0.0.0-alpha.17 → 0.0.0-alpha.20

package/index.js

@@ -135,6 +135,20 @@ export default function uniflowed(options = {}) {
   // no `uf.config.js` will mention. It only ever reaches the *development*
   // client entry; see `flowPlugin`'s `load`. ubugeeei-prod/uf#516.
   const strictMode = app.react?.strictMode !== false;
+  // What the browser does with a link, read here for the reason Strict Mode is
+  // and honoured in every command rather than in the build alone: it is the
+  // one setting whose whole effect is what happens on a click, so a dev server
+  // that disagreed with the deployment would be the wrong application to look
+  // 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";
+  // 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
+  // question here is "is it in the list", not "is it the only thing in it",
+  // and a driver started by hand on a config `uf` never validated gets the same
+  // answer for the same reason a project would want.
+  const mount = (app.rendering?.modes ?? []).includes("csr") ? "render" : "hydrate";
 
   const accessibility = ufConfig.accessibility ?? {};
 
@@ -143,6 +157,8 @@ export default function uniflowed(options = {}) {
       routerRoot,
       appEntry,
       strictMode,
+      navigation,
+      mount,
       command: options.command,
       accessibility,
     }),
@@ -157,7 +173,15 @@ export default function uniflowed(options = {}) {
   ];
 }
 
-function flowPlugin({ routerRoot, appEntry, strictMode, command, accessibility }) {
+function flowPlugin({
+  routerRoot,
+  appEntry,
+  strictMode,
+  navigation,
+  mount,
+  command,
+  accessibility,
+}) {
   let root = process.cwd();
   let isProduction = false;
   /**
@@ -331,7 +355,10 @@ function flowPlugin({ routerRoot, appEntry, strictMode, command, accessibility }
       ensureService();
     },
 
-    resolveId(id) {
+    resolveId(id, importer, resolveOptions) {
+      if (id === "@uniflowed/react" && !isSsr(this, resolveOptions)) {
+        return this.resolve("react", importer, { ...resolveOptions, skipSelf: true });
+      }
       if (id === RUNTIME_PUBLIC_PATH) return RUNTIME_RESOLVED_ID;
       if (id === AUDIT_PUBLIC_PATH) return AUDIT_RESOLVED_ID;
       if (VIRTUAL_IDS.has(id)) return resolved(id);
@@ -356,8 +383,17 @@ function flowPlugin({ routerRoot, appEntry, strictMode, command, accessibility }
       // Strict Mode belongs to the client entry and to development only: a
       // build passes `false`, so the generated module is the one that existed
       // before #516 and a visitor's browser renders once.
+      //
+      // `navigation` is in the same entry and has no `isProduction` beside it,
+      // deliberately: it is what a link does, and a dev server whose links
+      // behave differently from the deployment is the wrong thing to be
+      // looking at. See `clientModuleSource`.
       if (id === resolved(VIRTUAL.client)) {
-        return clientModuleSource(entryPath, { strictMode: strictMode && !isProduction });
+        return clientModuleSource(entryPath, {
+          strictMode: strictMode && !isProduction,
+          navigation,
+          mount,
+        });
       }
       if (id === resolved(VIRTUAL.server)) return serverModuleSource(entryPath);
       // Only `virtual:uf/server` imports this, so it is only ever asked for in
@@ -474,12 +510,13 @@ function flowPlugin({ routerRoot, appEntry, strictMode, command, accessibility }
       const tags = [
         {
           tag: "script",
+          attrs: { "data-uf-dev-head-preamble": "react-devtools" },
           children: devtoolsPreamble(),
           injectTo: "head-prepend",
         },
         {
           tag: "script",
-          attrs: { type: "module" },
+          attrs: { type: "module", "data-uf-dev-head-preamble": "react-refresh" },
           children: preambleCode(base),
           injectTo: "head-prepend",
         },
@@ -509,9 +546,8 @@ function flowPlugin({ routerRoot, appEntry, strictMode, command, accessibility }
       // missing `route` — so adding a route handler to a running dev server
       // did not rebuild the table and the handler stayed invisible until a
       // restart. A list that has to match another list has to be that list.
-      const stems = Object.values(RESERVED)
-        .map((stem) => stem.replaceAll(".", "\\."))
-        .join("|");
+      const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const stems = Object.values(RESERVED).map(escapeRegExp).join("|");
       const reserved = new RegExp(`/(${stems})(\\.[a-z]+)?\\.(js|jsx|mdx)$`);
       const onRouteFile = (file) => {
         if (!reserved.test(file) || !file.startsWith(appRoot)) return;
@@ -562,7 +598,7 @@ function flowPlugin({ routerRoot, appEntry, strictMode, command, accessibility }
       // 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
+      // so it looked like a document, so `app/feed/$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.
       //
@@ -598,7 +634,7 @@ function flowPlugin({ routerRoot, appEntry, strictMode, command, accessibility }
       // 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
+        // so that a report never reaches a project's `$middleware.js` or
         // its route table. See `internal/diagnostics.js`.
         devServer.middlewares.use(
           createChannelMiddleware((diagnostic) => emit("diagnostic", diagnostic)),
@@ -687,6 +723,30 @@ function flowPlugin({ routerRoot, appEntry, strictMode, command, accessibility }
               }
               if (notDocument != null) return false;
 
+              // A single-page project's deployment answers every navigation
+              // with the same empty shell, so this does too. Rendering the
+              // route here instead would have been the better-looking dev
+              // server and the wrong one: a page that only works because the
+              // server rendered it would work all through development and be
+              // blank the day it shipped. It is the same argument
+              // `app.rendering.navigation` makes about a link, one level up.
+              //
+              // The three steps above still ran — the guard, the action, the
+              // handler — and each of them is something `uf build` refuses in
+              // a `["csr"]` project by name. A dev server that skipped them
+              // would hide the very thing the build is going to stop.
+              if (mount === "render") {
+                response.statusCode = 200;
+                response.setHeader("content-type", "text/html; charset=utf-8");
+                const shell = entry.shellDocument({
+                  scripts: [devUrlFor(VIRTUAL.client)],
+                  styles: [],
+                  preloads: [],
+                });
+                response.end(await devServer.transformIndexHtml(url, shell));
+                return true;
+              }
+
               const result = await entry.render(
                 url,
                 { scripts: [devUrlFor(VIRTUAL.client)], styles: [], preloads: [] },
@@ -696,15 +756,41 @@ function flowPlugin({ routerRoot, appEntry, strictMode, command, accessibility }
                   // result by then — so the terminal hears about it here or not
                   // at all.
                   onError: (error) => reportRenderError(devServer, url, error),
+                  // Vite sees the head and only the head. That is what lets the
+                  // development server stream like every other host — see below.
+                  transformHead: (head) => devServer.transformIndexHtml(url, head),
+                  // And what the streaming actually did, when it changed. The
+                  // router has already decided there is something worth saying
+                  // and written the words — see its `internal/inspector.js`,
+                  // which cannot be imported from here because this file is
+                  // plain JavaScript that Vite loads before any Flow transform
+                  // exists. `info`, because a page that streamed is a
+                  // measurement and not a problem; `origin`, because a report
+                  // that does not say which page produced it is one somebody
+                  // has to reproduce before they can act on it.
+                  onStream: (diagnostic) =>
+                    emit("diagnostic", {
+                      severity: "info",
+                      origin: url,
+                      message: diagnostic.message,
+                      detail: diagnostic.detail,
+                    }),
                 },
               );
               if (result.error != null) reportRenderError(devServer, url, result.error);
-              // 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());
+              // Piped, like every other host. This used to collect the whole
+              // document and transform it at the end, because
+              // `transformIndexHtml` is a *whole document* hook — which made the
+              // one place a developer would notice streaming the one place it
+              // did not happen: a slow page showed nothing until it was finished
+              // and `$loading.js` looked broken.
+              //
+              // `transformHead` above is the seam. `internal/stream.js` already
+              // held the opening chunk back until the head was complete and
+              // forwarded everything after it untouched, so the hook only ever
+              // sees the head — and Vite's dev hook handles a document that ends
+              // mid-`<body>` without complaint, which was the open question on
+              // ubugeeei-prod/uf#374.
               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
@@ -714,7 +800,7 @@ function flowPlugin({ routerRoot, appEntry, strictMode, command, accessibility }
                 response.setHeader(name, value);
               }
               response.setHeader("content-type", "text/html; charset=utf-8");
-              response.end(html);
+              await result.pipe(response);
               return true;
             });
 

package/internal/a11y.js

@@ -86,15 +86,17 @@ export function auditRuntimeSource(settings) {
 /**
  * The tag that loads it, or `null` when this project has no engine.
  *
- * `injectTo: "body"` rather than the head: the audit reads the rendered tree,
- * so there is nothing for it to do until there is one, and a script in the
- * head would only sit through the same wait with the parser stopped behind it.
+ * `injectTo: "head"` because `uf dev` streams the body. Vite's HTML hook only
+ * sees the opening chunk; a `body` injection can land at a React chunk boundary
+ * and split an attribute before the rest of the body arrives. A module in the
+ * head still waits for a settled DOM before auditing — see the runtime — while
+ * staying in markup the opening transform can safely rewrite.
  */
 export function auditTag(base, available) {
   if (!available) return null;
   return {
     tag: "script",
     attrs: { type: "module", src: `${base}${AUDIT_PUBLIC_PATH.slice(1)}` },
-    injectTo: "body",
+    injectTo: "head",
   };
 }

package/internal/devtools.js

@@ -23,8 +23,8 @@
 // how the preamble is injected, could have taken it away in a diff nobody would
 // read as being about DevTools. See ubugeeei-prod/uf#503.
 //
-// So the hook is installed here, first, deliberately, and `tests/library/
-// devtools.test.js` runs this script's own text against a fake window.
+// So the hook is installed here, first, deliberately, and `devtools.test.js`
+// beside this package runs this script's own text against a fake window.
 //
 // # Three things DevTools needs, and what carries each
 //

package/internal/diagnostics.js

@@ -57,7 +57,7 @@
 // `@uniflowed/router`'s `internal/diagnostics.js` are the same two strings, and
 // they are the contract. They cannot be *imported* here: this module is loaded
 // by Vite before any Flow transform exists, and both of those are Flow. So they
-// are written out, and `tests/library/dev-channel.test.js` asserts that all
+// are written out, and `packages/vite/dev-channel.test.js` asserts that all
 // four spellings agree — a duplicated constant with a test on it is honest, and
 // one without is how the browser ends up posting to a path nothing serves.
 //
@@ -105,7 +105,7 @@ const SEVERITIES = new Set(["error", "warn", "info"]);
  * The connect middleware that answers the channel.
  *
  * Mounted **before** the application middleware, so a request under `/__uf/`
- * never reaches a project's `_uf.middleware.js` or its route table. A guard
+ * never reaches a project's `$middleware.js` or its route table. A guard
  * that ran for a page's own telemetry would be a guard asked a question the
  * application never asks, and one that redirected it would turn a report into
  * a login page.

package/internal/flow-keywords.js

@@ -435,7 +435,7 @@ export function markLines(lines) {
  *
  * Exported because it is where the decision is visible without starting Shiki:
  * give it the token split a grammar would produce and it says which words it
- * marked. `tests/library/highlight.test.js` uses exactly that, and the splits
+ * marked. `packages/vite/highlight.test.js` uses exactly that, and the splits
  * in it are the ones that had bugs.
  */
 export function markLine(line) {