chore: update vite (#6)

* wip * wip: react server environment * wip: not working * chore: feedback * chore: environment optimizeDeps example * chore: give up react-jsx * feat: add "fix-import-jsxDEV" plugin * wip: hello react server * wip: move node_modules/.env-deps to dist/.env-deps * wip: patch import analysis * chore: remove custom * chore: revert * refactor: minor * chore: typo * wip: rsc hydration * chore: readme * refactor: move code * wip: build * wip: build * fix: fix string stream * chore: remove vc-build * chore: readme * refactor: tweak config * wip: vitePluginUseClient * wip: build client reference * refactor: minor * wip: react plugin * wip: client hmr (use react pluign) * feat: browser hmr * chore: rename * chore: update vite * refactor: default environments.ssr.dev works * wip: simplify react-server (todo: need import analysis patch) * chore: comment * chore: use `builder.buildEnvironments` * chore: update react-server config * chore: access `this.environment` from `transform` (fixed) * chore: comment
hi-ogawa · Mar 29, 2024 · cded6a9 · cded6a9
1 parent 7f0a0e3
commit cded6a9
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 156 deletions.
diff --git a/examples/react-server/vite.config.ts b/examples/react-server/vite.config.ts
@@ -1,6 +1,6 @@
 import {
   defineConfig,
-  createNodeEnvironment,
+  createNodeDevEnvironment,
   type PluginOption,
   type Plugin,
   createServerModuleRunner,
@@ -33,14 +33,6 @@ export default defineConfig((env) => ({
     vitePluginFixJsxDEV(),
   ],
 
-  // [feedback] same as react-ssr
-  define:
-    env.command === "build"
-      ? {
-          "process.env.NODE_ENV": `"production"`,
-        }
-      : {},
-
   environments: {
     client: {
       build: {
@@ -49,32 +41,15 @@ export default defineConfig((env) => ({
         sourcemap: true,
       },
     },
-    server: {
-      dev: {
-        createEnvironment: (server) => createNodeEnvironment(server, "server"),
-      },
+    ssr: {
       build: {
-        createEnvironment(builder, name) {
-          return {
-            name,
-            mode: "build",
-            builder,
-            config: {
-              build: {
-                outDir: "dist/server",
-                sourcemap: true,
-                // [feedback]
-                // still a convenient flag to switch into SSR like build?
-                // e.g. minify: false, modulePreload: false
-                ssr: true,
-                rollupOptions: {
-                  input: {
-                    index: process.env["SERVER_ENTRY"] ?? "/src/adapters/node",
-                  },
-                },
-              },
-            },
-          };
+        outDir: "dist/server",
+        sourcemap: true,
+        ssr: true,
+        rollupOptions: {
+          input: {
+            index: process.env["SERVER_ENTRY"] ?? "/src/adapters/node",
+          },
         },
       },
     },
@@ -84,50 +59,16 @@ export default defineConfig((env) => ({
   build: env.isPreview ? { outDir: "dist/client" } : {},
 
   builder: {
-    runBuildTasks: async (_builder, buildTasks) => {
-      for (const task of buildTasks) {
-        // [feedback] same as react-ssr
-        Object.assign(
-          task.config.build,
-          task.config.environments[task.environment.name]?.build,
-        );
-        // [feedback] resolve also not working?
-        debug("[build:config.resolve]", [
-          task.environment.name,
-          task.config.resolve,
-          task.config.environments[task.environment.name]?.resolve,
-        ]);
-        Object.assign(
-          task.config.resolve,
-          task.config.environments[task.environment.name]?.resolve,
-        );
-      }
-
-      debug(
-        "[build]",
-        buildTasks.map((t) => t.environment.name),
-      );
-
-      // [feedback] `buildTasks` should be object?
-      const tasks = Object.fromEntries(
-        buildTasks.map((t) => [t.environment.name, t]),
-      );
-
-      manager.buildType = "react-server";
-      await tasks["react-server"].run();
-
-      manager.buildType = "client";
-      await tasks["client"].run();
-
-      manager.buildType = "server";
-      await tasks["server"].run();
+    async buildEnvironments(builder, build) {
+      await build(builder.environments["react-server"]!);
+      await build(builder.environments["client"]!);
+      await build(builder.environments["ssr"]!);
     },
   },
 }));
 
 // singleton to pass data through environment build
 class ReactServerManager {
-  buildType?: "react-server" | "client" | "server";
   public clientReferences = new Set<string>();
 }
 
@@ -141,13 +82,11 @@ function vitePluginReactServer(): PluginOption {
     config(config, _env) {
       tinyassert(config.environments);
       config.environments["react-server"] = {
-        // [feedback] not working during build?
         resolve: {
           conditions: ["react-server"],
         },
         dev: {
-          createEnvironment: (server) =>
-            createNodeEnvironment(server, "react-server"),
+          createEnvironment: createNodeDevEnvironment,
           optimizeDeps: {
             include: [
               "react",
@@ -158,28 +97,13 @@ function vitePluginReactServer(): PluginOption {
           },
         },
         build: {
-          createEnvironment(builder, name) {
-            return {
-              name,
-              mode: "build",
-              builder,
-              config: {
-                // [feedback] workaround for environment.(name).build
-                resolve: {
-                  conditions: ["react-server"],
-                },
-                build: {
-                  outDir: "dist/react-server",
-                  sourcemap: true,
-                  minify: false,
-                  rollupOptions: {
-                    input: {
-                      index: "/src/entry-react-server",
-                    },
-                  },
-                },
-              },
-            };
+          outDir: "dist/react-server",
+          sourcemap: true,
+          minify: false,
+          rollupOptions: {
+            input: {
+              index: "/src/entry-react-server",
+            },
           },
         },
       };
@@ -214,11 +138,7 @@ function vitePluginUseClient(): PluginOption {
   const transformPlugin: Plugin = {
     name: vitePluginUseClient.name + ":transform",
     async transform(code, id, _options) {
-      // [feedback] this.environment is undefined during build?
-      if (
-        this.environment?.name === "react-server" ||
-        manager.buildType === "react-server"
-      ) {
+      if (this.environment?.name === "react-server") {
         if (/^("use client")|('use client')/.test(code)) {
           manager.clientReferences.add(id);
           const ast = await parseAstAsync(code);

diff --git a/examples/react-ssr/vite.config.ts b/examples/react-ssr/vite.config.ts
@@ -1,22 +1,17 @@
 import {
   defineConfig,
-  createNodeEnvironment,
   type PluginOption,
   type Plugin,
   createServerModuleRunner,
   Connect,
 } from "vite";
-import { createDebug, tinyassert, typedBoolean } from "@hiogawa/utils";
+import { createDebug, typedBoolean } from "@hiogawa/utils";
 import { __global } from "./src/global";
 import react from "@vitejs/plugin-react";
 import type { ModuleRunner } from "vite/module-runner";
 
 const debug = createDebug("app");
 
-// [feedback]
-// - cac cli error?
-//   vite build --environment=client
-
 export default defineConfig((env) => ({
   clearScreen: false,
   appType: "custom",
@@ -33,40 +28,23 @@ export default defineConfig((env) => ({
       },
     },
   ],
-  // [feedback] no automatic process.env.NODE_ENV replacement applied for build?
-  define:
-    env.command === "build"
-      ? {
-          "process.env.NODE_ENV": `"production"`,
-        }
-      : {},
-  // [feedback] (doc) array or record?
   environments: {
     client: {
-      // [feedback] not working? (see runBuildTasks below)
       build: {
-        // minify: false,
+        minify: false,
         sourcemap: true,
         outDir: "dist/client",
       },
     },
-    // [feedback] cannot use "ssr" as it conflicts with builtin one?
-    server: {
-      dev: {
-        // [feedback] type error? createEnvironment: createNodeEnvironment
-        createEnvironment: (server) => createNodeEnvironment(server, "server"),
-      },
-      // [feedback] can we reuse vite's default ssr build config e.g. external, minify?
+    ssr: {
       build: {
-        minify: false,
         outDir: "dist/server",
+        // [feedback] should this be automatically set?
+        ssr: true,
         rollupOptions: {
           input: {
             index: process.env["SERVER_ENTRY"] ?? "/src/adapters/node",
           },
-          external: (source) => {
-            return source[0] !== "/" && source[0] !== ".";
-          },
         },
       },
     },
@@ -76,17 +54,9 @@ export default defineConfig((env) => ({
   build: env.isPreview ? { outDir: "dist/client" } : {},
 
   builder: {
-    runBuildTasks: async (_builder, buildTasks) => {
-      for (const task of buildTasks) {
-        // [feedback] task config empty?
-        debug("[task.environment.config]", task.environment.config);
-        Object.assign(
-          task.config.build,
-          // for now, we can grab the same config by this
-          task.config.environments[task.environment.name]?.build,
-        );
-        await task.run();
-      }
+    async buildEnvironments(builder, build) {
+      await build(builder.environments["client"]!);
+      await build(builder.environments["ssr"]!);
     },
   },
 }));
@@ -106,11 +76,9 @@ export function vitePluginSsrMiddleware({
   const plugin: Plugin = {
     name: vitePluginSsrMiddleware.name,
 
-    // [feedback] (doc) `ctx.environment` instead of `this.environment`
+    // [feedback] "server" environment full-reload still triggers "client" full-reload?
     hotUpdate(ctx) {
-      if (ctx.environment.name === "server") {
-        // [feedback] can we access runner side `moduleCache`?
-        //            probably not since runner is not in the main process?
+      if (ctx.environment.name === "ssr") {
         const ids = ctx.modules.map((mod) => mod.id).filter(typedBoolean);
         const invalidated = runner.moduleCache.invalidateDepTree(ids);
         debug("[handleUpdate]", { ids, invalidated: [...invalidated] });
@@ -120,9 +88,7 @@ export function vitePluginSsrMiddleware({
     },
 
     configureServer(server) {
-      const serverEnv = server.environments["server"];
-      tinyassert(serverEnv);
-      runner = createServerModuleRunner(serverEnv);
+      runner = createServerModuleRunner(server.environments.ssr);
 
       const handler: Connect.NextHandleFunction = async (req, res, next) => {
         try {

diff --git a/misc/vite-5.2.6-2024-03-29-patch-build.tgz b/misc/vite-5.2.6-2024-03-29-patch-build.tgz
diff --git a/misc/vite-5.2.6-2024-03-29.tgz b/misc/vite-5.2.6-2024-03-29.tgz
diff --git a/misc/vite-5.2.6-patch-2.tgz b/misc/vite-5.2.6-patch-2.tgz
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "prettier": "^3.2.5",
     "tsx": "^4.7.1",
     "typescript": "^5.4.3",
-    "vite": "file:./misc/vite-5.2.6-patch-import-analysis.tgz"
+    "vite": "file:./misc/vite-5.2.6-patch-2.tgz"
   },
   "packageManager": "[email protected]+sha256.4b4efa12490e5055d59b9b9fc9438b7d581a6b7af3b5675eb5c5f447cee1a589",
   "volta": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml