@tinvar/renderer 0.4.6 → 0.4.8

package/package.json

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

package/src/client-deps.js

@@ -0,0 +1,25 @@
+// What the browser's dependency optimizer leaves alone in dev (ADR 0180).
+//
+// Vite bundles the packages the browser imports before it serves them.
+// @tinvar/react's client components are client references, which the RSC
+// plugin points the browser at by their own path; bundled into the
+// browser's @tinvar/react as well, a page loaded both copies, each with its
+// own React, and the first page of every new app failed with "Invalid hook
+// 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.
+
+/** 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() {
+  return {
+    name: 'tinvar:client-dependencies',
+    apply: 'serve',
+    configEnvironment(name) {
+      // Merged with the app's own: Vite concatenates the lists.
+      return name === 'client' ? { optimizeDeps: { exclude: [...NOT_OPTIMIZED] } } : undefined;
+    },
+  };
+}

package/src/dev-server.js

@@ -32,6 +32,7 @@ import {
   viewsOf,
 } from './vite.js';
 
+import { clientDependencies } from './client-deps.js';
 import { styleXDevStyles } from './stylex-dev.js';
 export { assertDevelopment, DevServerRefused, PRODUCTION_MARKERS } from './dev-guard.js';
 
@@ -102,6 +103,7 @@ export async function createDevServer({
     ...(logLevel ? { logLevel } : {}),
     plugins: [
       styles,
+      clientDependencies(),
       ignoreReplayedChanges(watchedFrom),
       followRestarts(() => {
         const waiting = listened;