wip: build browser and server in parallel

hi-ogawa · Jun 5, 2024 · b657376 · b657376
1 parent 6f5c84e
commit b657376
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 22 deletions.
diff --git a/packages/react-server/src/features/assets/plugin.ts b/packages/react-server/src/features/assets/plugin.ts
@@ -116,7 +116,7 @@ export function vitePluginServerAssets({
         // ensure hmr boundary since css module doesn't have `import.meta.hot.accept`
         return code + `if (import.meta.hot) { import.meta.hot.accept() }`;
       }
-      if (manager.buildType === "client") {
+      if (manager.buildType) {
         // TODO: probe manifest to collect css?
         const files = await fs.promises.readdir("./dist/rsc/assets", {
           withFileTypes: true,

diff --git a/packages/react-server/src/features/router/plugin.ts b/packages/react-server/src/features/router/plugin.ts
@@ -20,7 +20,7 @@ export function routeManifestPluginServer({
       name: "server-route-manifest",
       apply: "build",
       async buildEnd() {
-        if (manager.buildType === "rsc") {
+        if (manager.buildType === "parallel") {
           const routeFiles = await FastGlob(
             "./src/routes/**/(page|layout|error).(js|jsx|ts|tsx)",
           );
@@ -45,6 +45,9 @@ export function routeManifestPluginServer({
   ];
 }
 
+// TODO: route manifest also requires
+// - routeManifestPluginServer.buildEnd finishes before
+// - routeManifestPluginClient.generateBundle
 export function routeManifestPluginClient({
   manager,
 }: { manager: PluginStateManager }): Plugin[] {
@@ -53,7 +56,7 @@ export function routeManifestPluginClient({
       name: routeManifestPluginClient.name + ":bundle",
       apply: "build",
       generateBundle(_options, bundle) {
-        if (manager.buildType === "client") {
+        if (manager.buildType === "parallel") {
           const facadeModuleDeps: Record<string, AssetDeps> = {};
           for (const [k, v] of Object.entries(bundle)) {
             if (v.type === "chunk" && v.facadeModuleId) {

diff --git a/packages/react-server/src/features/server-action/plugin.tsx b/packages/react-server/src/features/server-action/plugin.tsx
@@ -114,7 +114,7 @@ export function vitePluginServerUseServer({
           id,
           outCode: output.toString(),
         });
-        if (manager.buildType === "rsc") {
+        if (manager.buildType) {
           this.emitFile({
             type: "chunk",
             id,
@@ -138,10 +138,10 @@ export function vitePluginServerUseServer({
   const virtualPlugin = createVirtualPlugin(
     "server-references",
     async function () {
-      if (manager.buildType === "scan") {
-        return `export default {}`;
-      }
-      tinyassert(manager.buildType === "rsc");
+      // if (manager.buildType === "scan") {
+      //   return `export default {}`;
+      // }
+      tinyassert(manager.buildType === "parallel");
       await this.load({ id: "\0virtual:wait-for-idle" });
       let result = `export default {\n`;
       for (const id of manager.rscUseServerIds) {
@@ -162,6 +162,9 @@ function waitForIdlePlugin(): Plugin[] {
   const idlePromise = createManualPromise<void>();
   let done = false;
   const notIdle = debounce((...args) => {
+    if (done) {
+      console.log("[wait-for-idle:done-again]");
+    }
     console.log("[wait-for-idle:done]", { args });
     done = true;
     idlePromise.resolve();

diff --git a/packages/react-server/src/features/use-client/plugin.ts b/packages/react-server/src/features/use-client/plugin.ts
@@ -147,11 +147,11 @@ export function vitePluginServerUseClient({
         `import { registerClientReference as $$proxy } from "${runtimePath}";\n`,
       );
       manager.rscUseClientIds.add(id);
-      if (manager.buildType === "scan") {
-        // to discover server references imported only by client
-        // we keep code as is and continue crawling
-        return;
-      }
+      // if (manager.buildType === "scan") {
+      //   // to discover server references imported only by client
+      //   // we keep code as is and continue crawling
+      //   return;
+      // }
       return {
         code: output.toString(),
         map: output.generateMap(),
@@ -249,7 +249,7 @@ export function vitePluginClientUseClient({
   return [
     devExternalPlugin,
     createVirtualPlugin("client-references", () => {
-      tinyassert(manager.buildType && manager.buildType !== "rsc");
+      tinyassert(manager.buildType);
       return fs.promises.readFile("dist/rsc/client-references.js", "utf-8");
     }),
   ];

diff --git a/packages/react-server/src/plugin/index.ts b/packages/react-server/src/plugin/index.ts
@@ -62,7 +62,8 @@ class PluginStateManager {
   config!: ResolvedConfig;
   configEnv!: ConfigEnv;
 
-  buildType?: "scan" | "rsc" | "client" | "ssr";
+  // buildType?: "scan" | "rsc" | "client" | "ssr";
+  buildType?: "parallel" | "ssr";
   buildContextServer?: Rollup.PluginContext;
   buildContextBrowser?: Rollup.PluginContext;
 
@@ -310,13 +311,17 @@ export function vitePluginReactServer(options?: {
         // manager.buildType = "scan";
         // await build(reactServerViteConfig);
 
-        console.log("▶▶▶ REACT SERVER BUILD (server) [2/4]");
-        manager.buildType = "rsc";
-        await build(reactServerViteConfig);
+        console.log("▶▶▶ REACT SERVER BUILD (server, browser) [(2,3)/4]");
+        manager.buildType = "parallel";
+        await Promise.all([build(reactServerViteConfig), build()]);
 
-        console.log("▶▶▶ REACT SERVER BUILD (browser) [3/4]");
-        manager.buildType = "client";
-        await build();
+        // console.log("▶▶▶ REACT SERVER BUILD (server) [2/4]");
+        // manager.buildType = "rsc";
+        // await build(reactServerViteConfig);
+
+        // console.log("▶▶▶ REACT SERVER BUILD (browser) [3/4]");
+        // manager.buildType = "client";
+        // await build();
 
         console.log("▶▶▶ REACT SERVER BUILD (ssr) [4/4]");
         manager.buildType = "ssr";
@@ -350,7 +355,7 @@ export function vitePluginReactServer(options?: {
         `;
       }
       // build
-      if (manager.buildType === "client") {
+      if (manager.buildType === "parallel") {
         // import "runtime-client" for preload
         return /* js */ `
           import "${SERVER_CSS_PROXY}";