refactor: use async server reference (#704)

Author: hi-ogawa

packages/react-server/src/features/client-component/server.tsx

@@ -11,17 +11,7 @@ import type { BundlerConfig, ImportManifestEntry } from "../../types/react";
 
 /* @__NO_SIDE_EFFECTS__ */
 export function registerClientReference(id: string, name: string) {
-  // reuse everything but { $$async: true }.
-  // `$$async` is not strictly necessary if we use `__webpack_chunk_load__` trick
-  // but for now, we go with async `__webpack_require__` for simplicity.
-  const reference = ReactServer.registerClientReference({}, id, name);
-  return Object.defineProperties(
-    {},
-    {
-      ...Object.getOwnPropertyDescriptors(reference),
-      $$async: { value: true },
-    },
-  );
+  return ReactServer.registerClientReference({}, id, name);
 }
 
 export function createBundlerConfig(): BundlerConfig {
@@ -33,7 +23,12 @@ export function createBundlerConfig(): BundlerConfig {
         let [id, name] = $$id.split("#");
         tinyassert(id);
         tinyassert(name);
-        return { id, name, chunks: [] } satisfies ImportManifestEntry;
+        return {
+          id,
+          name,
+          chunks: [],
+          async: true,
+        } satisfies ImportManifestEntry;
       },
     },
   );

packages/react-server/src/features/client-component/ssr.tsx

@@ -62,6 +62,7 @@ export function createModuleMap(): ModuleMap {
                 id,
                 name,
                 chunks: [],
+                async: true,
               } satisfies ImportManifestEntry;
             },
           },

packages/react-server/src/features/server-action/server.tsx

@@ -40,6 +40,7 @@ export function createActionBundlerConfig(): BundlerConfig {
           id,
           name,
           chunks: [],
+          async: true,
         } satisfies ImportManifestEntry;
       },
     },

packages/react-server/src/plugin/index.ts

@@ -410,12 +410,6 @@ export function vitePluginReactServer(
             "__webpack_chunk_load__",
             "__vite_react_server_webpack_chunk_load__",
           );
-
-          // make server reference async for simplicity (stale chunkCache, etc...)
-          // see TODO in https://github.com/facebook/react/blob/33a32441e991e126e5e874f831bd3afc237a3ecf/packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack.js#L131-L132
-          code = code.replaceAll("if (isAsyncImport(metadata))", "if (true)");
-          code = code.replaceAll("4 === metadata.length", "true");
-
           return { code, map: null };
         }
         return;

packages/react-server/src/types/react.ts

@@ -6,8 +6,8 @@
 export interface ImportManifestEntry {
   id: string;
   name: string;
-  // TODO
   chunks: string[];
+  async: boolean;
 }
 
 export interface BundlerConfig {
@@ -22,14 +22,13 @@ export type ModuleMap = {
 
 export interface SsrManifest {
   moduleMap: ModuleMap;
-  // TODO
   serverModuleMap?: unknown;
+  // TODO: preload on ssr https://github.com/hi-ogawa/experiments/pull/83
   moduleLoading?: unknown;
 }
 
 export type WebpackRequire = (id: string) => Promise<unknown>;
 
-// TODO
 export type WebpackChunkLoad = (id: string) => Promise<unknown>;
 
 export type CallServerCallback = (id: any, args: any) => Promise<unknown>;