@cloudflare/vite-plugin 0.0.0-dbbeb23c7 → 0.0.0-dee6068af

package/README.md

@@ -1,6 +1,6 @@
 # `@cloudflare/vite-plugin`
 
-[Intro](#intro) | [Quick start](#quick-start) | [Tutorial](#tutorial) | [API](#api) | [Cloudflare environments](#cloudflare-environments) | [Migrating from `wrangler dev`](#migrating-from-wrangler-dev)
+[Intro](#intro) | [Quick start](#quick-start) | [Tutorial](#tutorial) | [API](#api) | [Cloudflare environments](#cloudflare-environments) | [Debugging](#debugging) | [Migrating from `wrangler dev`](#migrating-from-wrangler-dev)
 
 ## Intro
 
@@ -374,6 +374,10 @@ It accepts an optional `PluginConfig` parameter.
   All requests are routed through your entry Worker.
   During the build, each Worker is output to a separate subdirectory of `dist`.
 
+- `inspectorPort?: number | false`
+
+  Optional inspector port to use for debugging your workers, for more details on debugging see the [devtools section](#devtools). Can be set to `false` to disable the debugging inspector altogether. Defaults to `9229`.
+
 > [!NOTE]
 > When running `wrangler deploy`, only your main (entry) Worker will be deployed.
 > If using multiple Workers, each must be deployed individually.
@@ -482,6 +486,62 @@ Secrets can be provided to your Worker in local development using a [`.dev.vars`
 > [!NOTE]
 > The `vite build` command copies the relevant `.dev.vars[.env-name]` file to the output directory. This is only used when running `vite preview` and is not deployed with your Worker.
 
+## Debugging
+
+The Cloudflare Vite plugin allows you to conveniently debug your Worker code during local development.
+
+By default the inspector port used by the plugin is `9229`, which can be customized by providing a different port to the plugin's `inspectorPort` option.
+
+There are two recommended ways of doing so, which we'll explore in this section.
+
+### Devtools
+
+When running `vite dev` or `vite preview` a `/__debug` route in your local server will be made available which gives you access to [Cloudflare's implementation](/packages/chrome-devtools-patches) of [Chrome's DevTools](https://developer.chrome.com/docs/devtools/overview).
+
+Navigating to this route will open a devtools tab for each of the workers in your application (Note: in case of multiple workers you might need to allow your browser to open pop-ups).
+
+Once the tab or tabs are open, you can make a request to your application and start debugging your workers' code.
+
+Note: If you're not interested in debugging all your workers you can close the tabs of the workers you don't want to debug.
+
+### VS Code
+
+To setup VS Code for breakpoint debugging for your application, you will need to create a `.vscode/launch.json` file that contains a configuration following this structure:
+
+```json
+{
+  "configurations": [
+    {
+      "name": "<NAME_OF_WORKER>",
+      "type": "node",
+      "request": "attach",
+      "websocketAddress": "ws://localhost:9229/<NAME_OF_WORKER>",
+      "resolveSourceMapLocations": null,
+      "attachExistingChildren": false,
+      "autoAttachChildProcesses": false,
+      "sourceMaps": true
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Debug All Workers",
+      "configurations": ["<NAME_OF_WORKER>"],
+      "stopAll": true
+    }
+  ]
+}
+```
+
+Where, `<NAME_OF_WORKER>` indicates the name of your worker as specified in your Wrangler configuration.
+
+Note: if you customized your `inspectorPort` you need to use that port in the `websocketAddress` field.
+
+If you have more than one worker you need add a configuration in the `configurations` field for each one and then include the configuration name in the `configurations` array in the compound configuration.
+
+Once your `launch.json` file is ready, after running `vite dev` or `vite preview` you can select **Debug All Workers** at the top of the **Run & Debug** panel to attach debuggers to all the various Workers. Then you can add breakpoints to your code and start debugging.
+
+Note: You can also manually select the configurations to run (e.g. **Debug Worker1**) to filter which workers you want to debug.
+
 ## Migrating from `wrangler dev`
 
 Migrating from `wrangler dev` is a simple process and you can follow the instructions in the [Quick start](#quick-start) to get started.

package/dist/index.d.ts

@@ -17,6 +17,7 @@ interface AuxiliaryWorkerConfig extends BaseWorkerConfig {
 interface PluginConfig extends EntryWorkerConfig {
     auxiliaryWorkers?: AuxiliaryWorkerConfig[];
     persistState?: PersistState;
+    inspectorPort?: number | false;
 }
 
 /**
@@ -28,4 +29,4 @@ interface PluginConfig extends EntryWorkerConfig {
  */
 declare function cloudflare(pluginConfig?: PluginConfig): vite.Plugin[];
 
-export { cloudflare };
+export { type PluginConfig, cloudflare };

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/index.ts
-import assert9 from "node:assert";
+import assert8 from "node:assert";
 import * as fs5 from "node:fs";
 import * as fsp2 from "node:fs/promises";
 import { builtinModules as builtinModules2 } from "node:module";
@@ -1083,6 +1083,7 @@ var ADDITIONAL_MODULE_TYPES = [
   "Data",
   "Text"
 ];
+var DEFAULT_INSPECTOR_PORT = 9229;
 
 // src/additional-modules.ts
 var moduleRules = [
@@ -8150,6 +8151,9 @@ function getOutputDirectory(userConfig, environmentName) {
   const rootOutputDirectory = userConfig.build?.outDir ?? "dist";
   return userConfig.environments?.[environmentName]?.build?.outDir ?? path2.join(rootOutputDirectory, environmentName);
 }
+function getRouterWorker(miniflare) {
+  return miniflare.getWorker(ROUTER_WORKER_NAME);
+}
 function toMiniflareRequest(request) {
   return new MiniflareRequest(request.url, {
     method: request.method,
@@ -8338,15 +8342,65 @@ function initRunners(resolvedPluginConfig, viteDevServer, miniflare) {
   );
 }
 
-// src/deploy-config.ts
+// src/debugging.ts
 import assert4 from "node:assert";
+import colors from "picocolors";
+var debuggingPath = "/__debug";
+function addDebugToVitePrintUrls(server) {
+  const originalPrintUrls = server.printUrls;
+  server.printUrls = () => {
+    originalPrintUrls();
+    const localUrl = server.resolvedUrls?.local[0];
+    if (localUrl) {
+      const { protocol, hostname, port } = new URL(localUrl);
+      const colorDebugUrl = (url) => colors.dim(
+        colors.yellow(
+          url.replace(/:(\d+)\//, (_, port2) => `:${colors.bold(port2)}/`)
+        )
+      );
+      server.config.logger.info(
+        `  ${colors.green("\u279C")}  ${colors.bold("Debug")}:   ${colorDebugUrl(`${protocol}//${hostname}:${port}${debuggingPath}`)}`
+      );
+    }
+  };
+}
+function getDebugPathHtml(workerNames, inspectorPort) {
+  assert4(workerNames.length >= 1, "no workers present to debug");
+  const workerDevtoolsUrls = workerNames.map((workerName) => {
+    const localHost = `localhost:${inspectorPort}/${workerName}`;
+    const searchParams = new URLSearchParams({
+      theme: "systemPreferred",
+      debugger: "true",
+      ws: localHost,
+      domain: workerName
+    });
+    const devtoolsFrontendUrl = `https://devtools.devprod.cloudflare.dev/js_app?${searchParams}`;
+    return devtoolsFrontendUrl;
+  });
+  return `
+		<script>
+			const workerUrls = ${JSON.stringify(workerDevtoolsUrls)};
+			const [firstUrl, ...rest] = workerUrls;
+			for (const workerUrl of rest) {
+				// open new tabs for the devtools of the various workers
+				window.open(workerUrl);
+			}
+			// redirect the current tab to the devtools of the first worker
+			window.location.replace(firstUrl);
+		</script>
+    `;
+}
+
+// src/deploy-config.ts
+import assert5 from "node:assert";
 import * as fs2 from "node:fs";
 import * as path3 from "node:path";
 import "vite";
+import { unstable_readConfig } from "wrangler";
 function getDeployConfigPath(root) {
   return path3.resolve(root, ".wrangler", "deploy", "config.json");
 }
-function getWorkerConfigPaths(root) {
+function getWorkerConfigs(root) {
   const deployConfigPath = getDeployConfigPath(root);
   const deployConfig = JSON.parse(
     fs2.readFileSync(deployConfigPath, "utf-8")
@@ -8354,9 +8408,13 @@ function getWorkerConfigPaths(root) {
   return [
     { configPath: deployConfig.configPath },
     ...deployConfig.auxiliaryWorkers
-  ].map(
-    ({ configPath }) => path3.resolve(path3.dirname(deployConfigPath), configPath)
-  );
+  ].map(({ configPath }) => {
+    const resolvedConfigPath = path3.resolve(
+      path3.dirname(deployConfigPath),
+      configPath
+    );
+    return unstable_readConfig({ config: resolvedConfigPath });
+  });
 }
 function getRelativePathToWorkerConfig(deployConfigDirectory, root, outputDirectory) {
   return path3.relative(
@@ -8370,7 +8428,7 @@ function writeDeployConfig(resolvedPluginConfig, resolvedViteConfig) {
   fs2.mkdirSync(deployConfigDirectory, { recursive: true });
   if (resolvedPluginConfig.type === "assets-only") {
     const clientOutputDirectory = resolvedViteConfig.environments.client?.build.outDir;
-    assert4(
+    assert5(
       clientOutputDirectory,
       "Unexpected error: client environment output directory is undefined"
     );
@@ -8388,7 +8446,7 @@ function writeDeployConfig(resolvedPluginConfig, resolvedViteConfig) {
     const auxiliaryWorkers = [];
     for (const environmentName of Object.keys(resolvedPluginConfig.workers)) {
       const outputDirectory = resolvedViteConfig.environments[environmentName]?.build.outDir;
-      assert4(
+      assert5(
         outputDirectory,
         `Unexpected error: ${environmentName} environment output directory is undefined`
       );
@@ -8403,7 +8461,7 @@ function writeDeployConfig(resolvedPluginConfig, resolvedViteConfig) {
         auxiliaryWorkers.push({ configPath });
       }
     }
-    assert4(
+    assert5(
       entryWorkerConfigPath,
       `Unexpected error: entryWorkerConfigPath is undefined`
     );
@@ -8415,14 +8473,6 @@ function writeDeployConfig(resolvedPluginConfig, resolvedViteConfig) {
   }
 }
 
-// src/dev.ts
-import assert5 from "node:assert";
-function getDevEntryWorker(resolvedPluginConfig, miniflare) {
-  const entryWorkerConfig = resolvedPluginConfig.type === "assets-only" ? resolvedPluginConfig.config : resolvedPluginConfig.workers[resolvedPluginConfig.entryWorkerEnvironmentName];
-  assert5(entryWorkerConfig, "Unexpected error: No entry worker configuration");
-  return entryWorkerConfig.assets ? miniflare.getWorker(ROUTER_WORKER_NAME) : miniflare.getWorker(entryWorkerConfig.name);
-}
-
 // src/miniflare-options.ts
 import assert6 from "node:assert";
 import * as fs3 from "node:fs";
@@ -8438,8 +8488,7 @@ import {
 import { globSync } from "tinyglobby";
 import "vite";
 import {
-  unstable_getMiniflareWorkerOptions,
-  unstable_readConfig
+  unstable_getMiniflareWorkerOptions
 } from "wrangler";
 function getPersistence(root, persistState) {
   if (persistState === false) {
@@ -8633,6 +8682,7 @@ function getDevMiniflareOptions(resolvedPluginConfig, viteDevServer) {
         worker: {
           ...workerOptions,
           name: workerOptions.name ?? workerConfig.name,
+          unsafeInspectorProxy: resolvedPluginConfig.inspectorPort !== false,
           modulesRoot: miniflareModulesRoot,
           unsafeEvalBinding: "__VITE_UNSAFE_EVAL__",
           serviceBindings: {
@@ -8674,6 +8724,8 @@ function getDevMiniflareOptions(resolvedPluginConfig, viteDevServer) {
   const logger = new ViteMiniflareLogger(resolvedViteConfig);
   return {
     log: logger,
+    inspectorPort: resolvedPluginConfig.inspectorPort || void 0,
+    unsafeInspectorProxy: resolvedPluginConfig.inspectorPort !== false,
     handleRuntimeStdio(stdout, stderr) {
       const decoder = new TextDecoder();
       stdout.forEach((data2) => logger.info(decoder.decode(data2)));
@@ -8810,12 +8862,8 @@ function getPreviewModules(main, modulesRules) {
     ]
   };
 }
-function getPreviewMiniflareOptions(vitePreviewServer, persistState) {
+function getPreviewMiniflareOptions(vitePreviewServer, workerConfigs, persistState, inspectorPort = DEFAULT_INSPECTOR_PORT) {
   const resolvedViteConfig = vitePreviewServer.config;
-  const configPaths = getWorkerConfigPaths(resolvedViteConfig.root);
-  const workerConfigs = configPaths.map(
-    (configPath) => unstable_readConfig({ config: configPath })
-  );
   const workers = workerConfigs.flatMap((config) => {
     const miniflareWorkerOptions = unstable_getMiniflareWorkerOptions(config);
     const { externalWorkers } = miniflareWorkerOptions;
@@ -8824,6 +8872,7 @@ function getPreviewMiniflareOptions(vitePreviewServer, persistState) {
       {
         ...workerOptions,
         name: workerOptions.name ?? config.name,
+        unsafeInspectorProxy: inspectorPort !== false,
         ...miniflareWorkerOptions.main ? getPreviewModules(miniflareWorkerOptions.main, modulesRules) : { modules: true, script: "" }
       },
       ...externalWorkers
@@ -8832,6 +8881,8 @@ function getPreviewMiniflareOptions(vitePreviewServer, persistState) {
   const logger = new ViteMiniflareLogger(resolvedViteConfig);
   return {
     log: logger,
+    inspectorPort: inspectorPort || void 0,
+    unsafeInspectorProxy: inspectorPort !== false,
     handleRuntimeStdio(stdout, stderr) {
       const decoder = new TextDecoder();
       stdout.forEach((data2) => logger.info(decoder.decode(data2)));
@@ -8877,15 +8928,14 @@ function miniflareLogLevelFromViteLogLevel(level = "info") {
 }
 
 // src/plugin-config.ts
-import assert8 from "node:assert";
+import assert7 from "node:assert";
 import * as path6 from "node:path";
 import * as vite5 from "vite";
 
 // src/workers-configs.ts
-import assert7 from "node:assert";
 import * as fs4 from "node:fs";
 import * as path5 from "node:path";
-import { unstable_readConfig as unstable_readConfig2 } from "wrangler";
+import { unstable_readConfig as unstable_readConfig3 } from "wrangler";
 var nonApplicableWorkerConfigs = {
   /**
    * Object containing configs that have a vite replacement, the object's field contain details about the config's replacement
@@ -8936,7 +8986,7 @@ function readWorkerConfig(configPath, env2) {
     replacedByVite: /* @__PURE__ */ new Set(),
     notRelevant: /* @__PURE__ */ new Set()
   };
-  const config = unstable_readConfig2({ config: configPath, env: env2 }, {});
+  const config = unstable_readConfig3({ config: configPath, env: env2 }, {});
   const raw = structuredClone(config);
   nullableNonApplicable.forEach((prop) => {
     if (config[prop] !== void 0) {
@@ -9037,34 +9087,38 @@ function getWorkerConfig(configPath, env2, opts) {
   }
   const { raw, config, nonApplicable } = readWorkerConfig(configPath, env2);
   opts?.visitedConfigPaths?.add(configPath);
-  assert7(
-    config.topLevelName,
-    missingFieldErrorMessage(`top-level 'name'`, configPath, env2)
-  );
-  assert7(config.name, missingFieldErrorMessage(`'name'`, configPath, env2));
-  assert7(
-    config.compatibility_date,
-    missingFieldErrorMessage(`'compatibility_date'`, configPath, env2)
-  );
-  if (opts?.isEntryWorker && !config.main) {
-    assert7(
-      config.assets,
-      missingFieldErrorMessage(`'main' or 'assets'`, configPath, env2)
+  if (!config.name) {
+    throw new Error(missingFieldErrorMessage(`'name'`, configPath, env2));
+  }
+  if (!config.topLevelName) {
+    throw new Error(
+      missingFieldErrorMessage(`top-level 'name'`, configPath, env2)
     );
+  }
+  if (!config.compatibility_date) {
+    throw new Error(
+      missingFieldErrorMessage(`'compatibility_date`, configPath, env2)
+    );
+  }
+  const requiredFields = {
+    topLevelName: config.topLevelName,
+    name: config.name,
+    compatibility_date: config.compatibility_date
+  };
+  if (opts?.isEntryWorker && !config.main) {
     return {
       type: "assets-only",
       raw,
       config: {
         ...config,
-        topLevelName: config.topLevelName,
-        name: config.name,
-        compatibility_date: config.compatibility_date,
-        assets: config.assets
+        ...requiredFields
       },
       nonApplicable
     };
   }
-  assert7(config.main, missingFieldErrorMessage(`'main'`, configPath, env2));
+  if (!config.main) {
+    throw new Error(missingFieldErrorMessage(`'main'`, configPath, env2));
+  }
   const mainStat = fs4.statSync(config.main, { throwIfNoEntry: false });
   if (!mainStat) {
     throw new Error(
@@ -9081,9 +9135,7 @@ function getWorkerConfig(configPath, env2, opts) {
     raw,
     config: {
       ...config,
-      topLevelName: config.topLevelName,
-      name: config.name,
-      compatibility_date: config.compatibility_date,
+      ...requiredFields,
       main: config.main
     },
     nonApplicable
@@ -9105,6 +9157,7 @@ function workerNameToEnvironmentName(workerName) {
 function resolvePluginConfig(pluginConfig, userConfig, viteEnv) {
   const configPaths = /* @__PURE__ */ new Set();
   const persistState = pluginConfig.persistState ?? true;
+  const inspectorPort = pluginConfig.inspectorPort ?? DEFAULT_INSPECTOR_PORT;
   const root = userConfig.root ? path6.resolve(userConfig.root) : process.cwd();
   const { CLOUDFLARE_ENV: cloudflareEnv } = vite5.loadEnv(
     viteEnv.mode,
@@ -9113,10 +9166,11 @@ function resolvePluginConfig(pluginConfig, userConfig, viteEnv) {
     ""
   );
   const configPath = pluginConfig.configPath ? path6.resolve(root, pluginConfig.configPath) : findWranglerConfig(root);
-  assert8(
-    configPath,
-    `Config not found. Have you created a wrangler.json(c) or wrangler.toml file?`
-  );
+  if (!configPath) {
+    throw new Error(
+      `Config not found. Have you created a wrangler.json(c) or wrangler.toml file?`
+    );
+  }
   const entryWorkerResolvedConfig = getWorkerConfig(configPath, cloudflareEnv, {
     visitedConfigPaths: configPaths,
     isEntryWorker: true
@@ -9126,6 +9180,7 @@ function resolvePluginConfig(pluginConfig, userConfig, viteEnv) {
       type: "assets-only",
       config: entryWorkerResolvedConfig.config,
       configPaths,
+      inspectorPort,
       persistState,
       rawConfigs: {
         entryWorker: entryWorkerResolvedConfig
@@ -9148,7 +9203,7 @@ function resolvePluginConfig(pluginConfig, userConfig, viteEnv) {
       }
     );
     auxiliaryWorkersResolvedConfigs.push(workerResolvedConfig);
-    assert8(
+    assert7(
       workerResolvedConfig.type === "worker",
       "Unexpected error: received AssetsOnlyResult with auxiliary workers."
     );
@@ -9165,6 +9220,7 @@ function resolvePluginConfig(pluginConfig, userConfig, viteEnv) {
     type: "workers",
     configPaths,
     persistState,
+    inspectorPort,
     workers,
     entryWorkerEnvironmentName,
     rawConfigs: {
@@ -9211,15 +9267,18 @@ function handleWebSocket(httpServer, fetcher) {
 }
 
 // src/index.ts
+var workersConfigsWarningShown = false;
 function cloudflare2(pluginConfig = {}) {
   let resolvedPluginConfig;
   let resolvedViteConfig;
   let miniflare;
-  let workersConfigsWarningShown = false;
   const additionalModulePaths = /* @__PURE__ */ new Set();
+  let hasClientBuild = false;
   return [
     {
       name: "vite-plugin-cloudflare",
+      // This only applies to this plugin so is safe to use while other plugins migrate to the Environment API
+      sharedDuringBuild: true,
       config(userConfig, env2) {
         if (env2.isPreview) {
           return { appType: "custom" };
@@ -9276,7 +9335,7 @@ function cloudflare2(pluginConfig = {}) {
                   resolvedPluginConfig.workers
                 ).map((environmentName) => {
                   const environment = builder.environments[environmentName];
-                  assert9(
+                  assert8(
                     environment,
                     `${environmentName} environment not found`
                   );
@@ -9292,6 +9351,9 @@ function cloudflare2(pluginConfig = {}) {
           }
         };
       },
+      buildStart() {
+        workersConfigsWarningShown = false;
+      },
       configResolved(config) {
         resolvedViteConfig = config;
       },
@@ -9306,18 +9368,27 @@ function cloudflare2(pluginConfig = {}) {
             return;
           }
           workerConfig.main = entryChunk[0];
+          workerConfig.no_bundle = true;
+          workerConfig.rules = [
+            { type: "ESModule", globs: ["**/*.js", "**/*.mjs"] }
+          ];
           const isEntryWorker = this.environment.name === resolvedPluginConfig.entryWorkerEnvironmentName;
-          if (isEntryWorker && workerConfig.assets) {
+          if (isEntryWorker && hasClientBuild) {
             const workerOutputDirectory = this.environment.config.build.outDir;
             const clientOutputDirectory = resolvedViteConfig.environments.client?.build.outDir;
-            assert9(
+            assert8(
               clientOutputDirectory,
               "Unexpected error: client output directory is undefined"
             );
-            workerConfig.assets.directory = path7.relative(
-              path7.resolve(resolvedViteConfig.root, workerOutputDirectory),
-              path7.resolve(resolvedViteConfig.root, clientOutputDirectory)
-            );
+            workerConfig.assets = {
+              ...workerConfig.assets,
+              directory: path7.relative(
+                path7.resolve(resolvedViteConfig.root, workerOutputDirectory),
+                path7.resolve(resolvedViteConfig.root, clientOutputDirectory)
+              )
+            };
+          } else {
+            workerConfig.assets = void 0;
           }
           config = workerConfig;
           if (workerConfig.configPath) {
@@ -9335,7 +9406,10 @@ function cloudflare2(pluginConfig = {}) {
           }
         } else if (this.environment.name === "client") {
           const assetsOnlyConfig = resolvedPluginConfig.config;
-          assetsOnlyConfig.assets.directory = ".";
+          assetsOnlyConfig.assets = {
+            ...assetsOnlyConfig.assets,
+            directory: "."
+          };
           const filesToAssetsIgnore = ["wrangler.json", ".dev.vars"];
           this.emitFile({
             type: "asset",
@@ -9348,8 +9422,6 @@ function cloudflare2(pluginConfig = {}) {
         if (!config) {
           return;
         }
-        config.no_bundle = true;
-        config.rules = [{ type: "ESModule", globs: ["**/*.js", "**/*.mjs"] }];
         if (config.unsafe && Object.keys(config.unsafe).length === 0) {
           config.unsafe = void 0;
         }
@@ -9360,6 +9432,9 @@ function cloudflare2(pluginConfig = {}) {
         });
       },
       writeBundle() {
+        if (this.environment.name === "client") {
+          hasClientBuild = true;
+        }
         if (this.environment.name === (resolvedPluginConfig.type === "assets-only" ? "client" : resolvedPluginConfig.entryWorkerEnvironmentName)) {
           writeDeployConfig(resolvedPluginConfig, resolvedViteConfig);
         }
@@ -9376,7 +9451,7 @@ function cloudflare2(pluginConfig = {}) {
         }
       },
       async configureServer(viteDevServer) {
-        assert9(
+        assert8(
           viteDevServer.httpServer,
           "Unexpected error: No Vite HTTP server"
         );
@@ -9384,19 +9459,16 @@ function cloudflare2(pluginConfig = {}) {
           getDevMiniflareOptions(resolvedPluginConfig, viteDevServer)
         );
         await initRunners(resolvedPluginConfig, viteDevServer, miniflare);
-        const entryWorker = await getDevEntryWorker(
-          resolvedPluginConfig,
-          miniflare
-        );
+        const routerWorker = await getRouterWorker(miniflare);
         const middleware = createMiddleware(
           ({ request }) => {
-            return entryWorker.fetch(toMiniflareRequest(request), {
+            return routerWorker.fetch(toMiniflareRequest(request), {
               redirect: "manual"
             });
           },
           { alwaysCallNext: false }
         );
-        handleWebSocket(viteDevServer.httpServer, entryWorker.fetch);
+        handleWebSocket(viteDevServer.httpServer, routerWorker.fetch);
         return () => {
           viteDevServer.middlewares.use((req, res, next) => {
             middleware(req, res, next);
@@ -9404,10 +9476,13 @@ function cloudflare2(pluginConfig = {}) {
         };
       },
       configurePreviewServer(vitePreviewServer) {
+        const workerConfigs = getWorkerConfigs(vitePreviewServer.config.root);
         const miniflare2 = new Miniflare(
           getPreviewMiniflareOptions(
             vitePreviewServer,
-            pluginConfig.persistState ?? true
+            workerConfigs,
+            pluginConfig.persistState ?? true,
+            pluginConfig.inspectorPort
           )
         );
         const middleware = createMiddleware(
@@ -9424,6 +9499,25 @@ function cloudflare2(pluginConfig = {}) {
         });
       }
     },
+    // Plugin to support `.wasm?init` extension
+    {
+      name: "vite-plugin-cloudflare:wasm-helper",
+      enforce: "pre",
+      applyToEnvironment(environment) {
+        return getWorkerConfig2(environment.name) !== void 0;
+      },
+      load(id) {
+        if (!id.endsWith(".wasm?init")) {
+          return;
+        }
+        return `
+					import wasm from "${cleanUrl(id)}";
+					export default function(opts = {}) {
+						return WebAssembly.instantiate(wasm, opts);
+					}
+				`;
+      }
+    },
     // Plugin to support additional modules
     {
       name: "vite-plugin-cloudflare:additional-modules",
@@ -9463,7 +9557,7 @@ function cloudflare2(pluginConfig = {}) {
         for (const match of matches) {
           magicString ??= new MagicString(code);
           const [full, _, modulePath] = match;
-          assert9(
+          assert8(
             modulePath,
             `Unexpected error: module path not found in reference ${full}.`
           );
@@ -9546,7 +9640,7 @@ function cloudflare2(pluginConfig = {}) {
           return this.resolve(source, importer, options);
         }
         if (this.environment.mode === "dev") {
-          assert9(
+          assert8(
             this.environment.depsOptimizer,
             "depsOptimizer is required in dev mode"
           );
@@ -9560,16 +9654,63 @@ function cloudflare2(pluginConfig = {}) {
       },
       async transform(code, id) {
         const workerConfig = getWorkerConfig2(this.environment.name);
-        assert9(workerConfig, "Expected a worker config");
+        assert8(workerConfig, "Expected a worker config");
         const resolvedId = await this.resolve(workerConfig.main);
         if (id === resolvedId?.id) {
           return injectGlobalCode(id, code);
         }
       }
+    },
+    // Plugin that provides an __debug path for debugging the Cloudflare Workers.
+    {
+      name: "vite-plugin-cloudflare:debug",
+      // Note: this plugin needs to run before the main vite-plugin-cloudflare so that
+      //       the preview middleware here can take precedence
+      enforce: "pre",
+      configureServer(viteDevServer) {
+        if (resolvedPluginConfig.type === "workers" && resolvedPluginConfig.inspectorPort !== false) {
+          addDebugToVitePrintUrls(viteDevServer);
+        }
+        const workerNames = resolvedPluginConfig.type === "assets-only" ? [] : Object.values(resolvedPluginConfig.workers).map(
+          (worker) => worker.name
+        );
+        viteDevServer.middlewares.use((req, res, next) => {
+          if (req.url === debuggingPath && resolvedPluginConfig.inspectorPort !== false) {
+            const html = getDebugPathHtml(
+              workerNames,
+              resolvedPluginConfig.inspectorPort
+            );
+            res.setHeader("Content-Type", "text/html");
+            return res.end(html);
+          }
+          next();
+        });
+      },
+      configurePreviewServer(vitePreviewServer) {
+        const workerConfigs = getWorkerConfigs(vitePreviewServer.config.root);
+        if (workerConfigs.length >= 1 && pluginConfig.inspectorPort !== false) {
+          addDebugToVitePrintUrls(vitePreviewServer);
+        }
+        const workerNames = workerConfigs.map((worker) => {
+          assert8(worker.name);
+          return worker.name;
+        });
+        vitePreviewServer.middlewares.use((req, res, next) => {
+          if (req.url === debuggingPath && pluginConfig.inspectorPort !== false) {
+            const html = getDebugPathHtml(
+              workerNames,
+              pluginConfig.inspectorPort ?? DEFAULT_INSPECTOR_PORT
+            );
+            res.setHeader("Content-Type", "text/html");
+            return res.end(html);
+          }
+          next();
+        });
+      }
     }
   ];
   function getWorkerConfig2(environmentName) {
-    assert9(resolvedPluginConfig, "Expected resolvedPluginConfig to be defined");
+    assert8(resolvedPluginConfig, "Expected resolvedPluginConfig to be defined");
     return resolvedPluginConfig.type !== "assets-only" ? resolvedPluginConfig.workers[environmentName] : void 0;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudflare/vite-plugin",
-  "version": "0.0.0-dbbeb23c7",
+  "version": "0.0.0-dee6068af",
   "description": "Cloudflare plugin for Vite",
   "keywords": [
     "cloudflare",
@@ -34,15 +34,16 @@
   ],
   "dependencies": {
     "@hattip/adapter-node": "^0.0.49",
+    "picocolors": "^1.1.1",
     "tinyglobby": "^0.2.12",
     "unenv": "2.0.0-rc.15",
     "ws": "8.18.0",
-    "@cloudflare/unenv-preset": "0.0.0-dbbeb23c7",
-    "miniflare": "0.0.0-dbbeb23c7",
-    "wrangler": "0.0.0-dbbeb23c7"
+    "miniflare": "0.0.0-dee6068af",
+    "wrangler": "0.0.0-dee6068af",
+    "@cloudflare/unenv-preset": "0.0.0-dee6068af"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20250317.0",
+    "@cloudflare/workers-types": "^4.20250319.0",
     "@types/node": "^22.10.1",
     "@types/ws": "^8.5.13",
     "magic-string": "^0.30.12",
@@ -52,9 +53,9 @@
     "undici": "^5.28.5",
     "vite": "^6.1.0",
     "vitest": "~3.0.8",
-    "@cloudflare/workers-shared": "0.0.0-dbbeb23c7",
+    "@cloudflare/mock-npm-registry": "0.0.0",
     "@cloudflare/workers-tsconfig": "0.0.0",
-    "@cloudflare/mock-npm-registry": "0.0.0"
+    "@cloudflare/workers-shared": "0.0.0-dee6068af"
   },
   "peerDependencies": {
     "vite": "^6.1.0",