refactor: createEnvironmentWithInvoke

hi-ogawa · Nov 7, 2024 · dbf24ef · dbf24ef
1 parent 14ba845
commit dbf24ef
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 43 deletions.
diff --git a/examples/browser-cli/src/cli.ts b/examples/browser-cli/src/cli.ts
@@ -7,7 +7,11 @@ import {
   createServer,
   parseAstAsync,
 } from "vite";
-import type { FetchFunction, ModuleRunner } from "vite/module-runner";
+import type { ModuleRunner } from "vite/module-runner";
+import {
+  createEnvironmentWithInvoke,
+  vitePluginFetchModuleServer,
+} from "../../web-worker/src/lib/fetch-module-server";
 
 const headless = !process.env["CLI_HEADED"];
 const extension = process.env["CLI_EXTENSION"] ?? "tsx";
@@ -29,6 +33,15 @@ async function main() {
         resolve: {
           noExternal: true,
         },
+<<<<<<< HEAD
+=======
+        dev: {
+          createEnvironment: createEnvironmentWithInvoke,
+          optimizeDeps: {
+            exclude: ["vite/module-runner"],
+          },
+        },
+>>>>>>> 45db83b (refactor: createEnvironmentWithInvoke)
       },
     },
     server: {
@@ -185,25 +198,4 @@ function vitePluginBrowserRunner(): Plugin {
   };
 }
 
-// https://github.com/vitejs/vite/discussions/18191
-function vitePluginFetchModuleServer(): Plugin {
-  return {
-    name: vitePluginFetchModuleServer.name,
-    configureServer(server) {
-      server.middlewares.use(async (req, res, next) => {
-        const url = new URL(req.url ?? "/", "https://any.local");
-        if (url.pathname === "/@vite/fetchModule") {
-          const [name, ...args] = JSON.parse(url.searchParams.get("payload")!);
-          const result = await server.environments[name]!.fetchModule(
-            ...(args as Parameters<FetchFunction>),
-          );
-          res.end(JSON.stringify(result));
-          return;
-        }
-        next();
-      });
-    },
-  };
-}
-
 main();
diff --git a/examples/browser-cli/src/runner.ts b/examples/browser-cli/src/runner.ts
@@ -1,16 +1,13 @@
-import {
-  ESModulesEvaluator,
-  type FetchFunction,
-  ModuleRunner,
-} from "vite/module-runner";
+import { ESModulesEvaluator, ModuleRunner } from "vite/module-runner";
+import { fetchClientFetchModule } from "../../web-worker/src/lib/fetch-module-client";
 
 export async function start(options: { root: string }) {
   const runner = new ModuleRunner(
     {
       root: options.root,
       sourcemapInterceptor: false,
       transport: {
-        fetchModule: fetchModuleFetchClient("custom"),
+        invoke: fetchClientFetchModule("custom"),
       },
       hmr: false,
     },
@@ -19,15 +16,3 @@ export async function start(options: { root: string }) {
 
   return runner;
 }
-
-// https://github.com/vitejs/vite/discussions/18191
-function fetchModuleFetchClient(environmentName: string): FetchFunction {
-  return async (...args) => {
-    const payload = JSON.stringify([environmentName, ...args]);
-    const response = await fetch(
-      "/@vite/fetchModule?" + new URLSearchParams({ payload }),
-    );
-    const result = response.json();
-    return result as any;
-  };
-}
diff --git a/examples/web-worker/src/lib/fetch-module-server.ts b/examples/web-worker/src/lib/fetch-module-server.ts
@@ -1,4 +1,4 @@
-import type { Plugin } from "vite";
+import { DevEnvironment, type DevEnvironmentOptions, type Plugin } from "vite";
 
 export function vitePluginFetchModuleServer(): Plugin {
   return {
@@ -18,3 +18,22 @@ export function vitePluginFetchModuleServer(): Plugin {
     },
   };
 }
+
+// expose `DevEnvironment.__invoke`
+export const createEnvironmentWithInvoke: NonNullable<
+  DevEnvironmentOptions["createEnvironment"]
+> = (name, config) => {
+  let invokeHandler!: Function;
+  const devEnv = new DevEnvironment(name, config, {
+    hot: false,
+    transport: {
+      setInvokeHandler(invokeHandler_) {
+        if (invokeHandler_) {
+          invokeHandler = invokeHandler_;
+        }
+      },
+    },
+  });
+  Object.assign(devEnv, { __invoke: invokeHandler });
+  return devEnv;
+};
diff --git a/examples/web-worker/vite.config.ts b/examples/web-worker/vite.config.ts
@@ -1,8 +1,11 @@
 import { rmSync } from "node:fs";
 import react from "@vitejs/plugin-react";
 import MagicString from "magic-string";
-import { DevEnvironment, type Plugin, defineConfig } from "vite";
-import { vitePluginFetchModuleServer } from "./src/lib/fetch-module-server";
+import { type Plugin, defineConfig } from "vite";
+import {
+  createEnvironmentWithInvoke,
+  vitePluginFetchModuleServer,
+} from "./src/lib/fetch-module-server";
 
 export default defineConfig((_env) => ({
   clearScreen: false,