@tinvar/renderer 0.4.11 → 0.4.13

package/bin/dev-renderer.js

@@ -42,7 +42,7 @@ const [socketPath, appRoot] = positional;
 const port = Number(option('port'));
 if (!socketPath || !appRoot || !Number.isInteger(port) || port < 1 || port > 65535) {
   console.error(
-    'usage: dev-renderer.js <socket-path> <app-root> --port=N [--deferred=FILE] [--codec=msgpack|json-lines] [--exit-with-stdin]',
+    'usage: dev-renderer.js <socket-path> <app-root> --port=N [--deferred=FILE] [--public-host=NAME] [--codec=msgpack|json-lines] [--exit-with-stdin]',
   );
   process.exit(64);
 }
@@ -87,6 +87,8 @@ try {
     appRoot: path.resolve(appRoot),
     port,
     deferredManifest: option('deferred') ? path.resolve(option('deferred')) : null,
+    // A tunnel's name, which serve --dev's Caddyfile lets in (ADR 0190).
+    publicHost: option('public-host') ?? null,
   });
 } catch (error) {
   console.error(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinvar/renderer",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "license": "MIT",
   "files": [
     "src",

package/src/client-deps.js

@@ -1,4 +1,5 @@
-// What the browser's dependency optimizer leaves alone in dev (ADR 0180).
+// What the browser's dependency optimizer leaves alone in dev, and what it
+// takes up in their place (ADR 0180, 0190).
 //
 // Vite bundles the packages the browser imports before it serves them.
 // @tinvar/react's client components are client references, which the RSC
@@ -8,18 +9,129 @@
 // call" until Vite reloaded it. The plugin says so, as "client component
 // dependency is inconsistently optimized". Served as its own modules, the
 // package loads once. What it imports, React alone, is optimized as before.
+//
+// A package StyleX leaves out -- every package it compiles from source,
+// such as the skeleton's Meridian kit -- has its imports left out
+// with it: Vite never looks inside it for what to bundle. So Meridian's
+// lucide-react reached the browser as some 1,600 modules, one request each:
+// slow on loopback, and through a tunnel more requests at once than the dev
+// server's backlog or the tunnel would take. Its own dependencies are
+// optimized instead, so each is one bundle, as the shop's vite.config has
+// had lucide-react for a while. Each by its own name, where the app's root
+// resolves it to the same package: then it is the one bundle the app's own
+// imports of it reach too, and not a second copy beside it with its own
+// React context. Through its parent (Vite's `parent > dependency`) only
+// where the root reaches another copy, or none. A dependency the browser
+// cannot take -- a native addon -- is left out by the app as any package
+// is, in its client optimizeDeps.exclude, and is then not included here.
+
+import { existsSync, readFileSync } from 'node:fs';
+import path from 'node:path';
 
 /** Served to the browser as their own modules, never optimized into a bundle. */
 export const NOT_OPTIMIZED = ['@tinvar/react'];
 
 /** @returns {import('vite').Plugin} */
 export function clientDependencies() {
+  /** @type {string[]} */
+  let include = [];
+
   return {
     name: 'tinvar:client-dependencies',
     apply: 'serve',
+    // After StyleX, whose own config hook adds the packages it compiles.
+    enforce: 'post',
+    config(config) {
+      const root = path.resolve(config.root ?? process.cwd());
+      const excluded = new Set([
+        ...NOT_OPTIMIZED,
+        ...(config.optimizeDeps?.exclude ?? []),
+        ...(config.environments?.client?.optimizeDeps?.exclude ?? []),
+      ]);
+      const included = new Set([
+        ...(config.optimizeDeps?.include ?? []),
+        ...(config.environments?.client?.optimizeDeps?.include ?? []),
+      ]);
+      include = throughExcluded(root, excluded, included);
+    },
     configEnvironment(name) {
+      if (name !== 'client') return undefined;
       // Merged with the app's own: Vite concatenates the lists.
-      return name === 'client' ? { optimizeDeps: { exclude: [...NOT_OPTIMIZED] } } : undefined;
+      return {
+        optimizeDeps: {
+          exclude: [...NOT_OPTIMIZED],
+          ...(include.length > 0 ? { include: [...include] } : {}),
+        },
+      };
     },
   };
 }
+
+/**
+ * Whether a package is one StyleX compiles from source: one that depends on
+ * StyleX itself. Only such a package is a kit whose imports the browser
+ * needs. Another package left out -- the RSC plugin leaves itself out --
+ * is build tooling, whose dependencies are no browser's.
+ *
+ * @param {any} json
+ */
+function compiledByStyleX(json) {
+  return ['dependencies', 'peerDependencies'].some((field) => {
+    const declared = json?.[field];
+    return declared && typeof declared === 'object' && Object.hasOwn(declared, '@stylexjs/stylex');
+  });
+}
+
+/**
+ * Each installed dependency of each installed package StyleX left out: never a
+ * peer, which is the app's to provide and to include, never
+ * one left out itself, and never one the app includes already. By its own
+ * name where the root resolves it to the same package, else as
+ * `parent > dependency`.
+ *
+ * @param {string} root
+ * @param {Set<string>} excluded
+ * @param {Set<string>} included
+ * @returns {string[]}
+ */
+function throughExcluded(root, excluded, included) {
+  const include = new Set();
+  for (const parent of excluded) {
+    if (NOT_OPTIMIZED.includes(parent)) continue;
+    const manifest = installed(root, parent);
+    if (manifest === null || !compiledByStyleX(manifest.json)) continue;
+    const declared = manifest.json?.dependencies;
+    const dependencies =
+      declared && typeof declared === 'object' && !Array.isArray(declared) ? Object.keys(declared) : [];
+    for (const dependency of dependencies) {
+      if (excluded.has(dependency) || included.has(dependency)) continue;
+      const own = installed(manifest.dir, dependency);
+      if (own === null) continue;
+      include.add(installed(root, dependency)?.dir === own.dir ? dependency : `${parent} > ${dependency}`);
+    }
+  }
+  return [...include];
+}
+
+/**
+ * A package's manifest as Node would find it from `from`: in the nearest
+ * node_modules that holds it, walking up. Read from disk, since a package's
+ * exports need not offer its package.json.
+ *
+ * @param {string} from
+ * @param {string} name
+ * @returns {{ dir: string, json: any } | null}
+ */
+function installed(from, name) {
+  for (let dir = from; ; dir = path.dirname(dir)) {
+    const file = path.join(dir, 'node_modules', name, 'package.json');
+    if (existsSync(file)) {
+      try {
+        return { dir: path.dirname(file), json: JSON.parse(readFileSync(file, 'utf8')) };
+      } catch {
+        return null;
+      }
+    }
+    if (path.dirname(dir) === dir) return null;
+  }
+}

package/src/dev-server.js

@@ -55,9 +55,11 @@ function configFileOf(appRoot) {
  * Starts Vite's dev server on loopback for the app at `appRoot`, and points
  * the renderer's dev entry at its rsc environment.
  *
- * @param {{ appRoot: string, port: number, host?: string, deferredManifest?: string | null, logLevel?: string }} options
+ * @param {{ appRoot: string, port: number, host?: string, deferredManifest?: string | null, publicHost?: string | null, logLevel?: string }} options
  *        `deferredManifest` is where to keep the views' <Deferred> components
- *        up to date, as the build's deferredBoundaries() writes them
+ *        up to date, as the build's deferredBoundaries() writes them;
+ *        `publicHost` the one name a tunnel serves the app under, which
+ *        Vite's host check lets in beside loopback's (ADR 0190)
  * @returns {Promise<{ vite: any, url: string, close: () => Promise<void> }>}
  */
 export async function createDevServer({
@@ -65,6 +67,7 @@ export async function createDevServer({
   port,
   host = '127.0.0.1',
   deferredManifest = null,
+  publicHost = null,
   logLevel,
 }) {
   assertDevelopment();
@@ -120,6 +123,9 @@ export async function createDevServer({
       host,
       port,
       strictPort: true,
+      // Vite answers loopback's names alone, against DNS rebinding, as the
+      // Caddyfile in front of it does; a tunnel's one name besides.
+      ...(publicHost ? { allowedHosts: [publicHost] } : {}),
       fs: {
         // Vite's own refusals, and the secrets an app keeps beside its code:
         // a key file, a database, the PHP dependencies.