@cloudflare/vite-plugin 0.0.0-9b86dba81 → 0.0.0-9c844f771

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/asset-workers/asset-worker.js

@@ -2487,6 +2487,13 @@ var CustomAssetWorker = class extends fr {
     const exists = await response.json();
     return exists ? pathname : null;
   }
+  async unstable_canFetch(request) {
+    const secFetchMode = request.headers.get("X-Mf-Sec-Fetch-Mode");
+    if (secFetchMode) {
+      request.headers.set("Sec-Fetch-Mode", secFetchMode);
+    }
+    return await super.unstable_canFetch(request);
+  }
 };
 export {
   CustomAssetWorker as default

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 assert7 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 = [
@@ -8154,6 +8155,10 @@ function getRouterWorker(miniflare) {
   return miniflare.getWorker(ROUTER_WORKER_NAME);
 }
 function toMiniflareRequest(request) {
+  const secFetchMode = request.headers.get("Sec-Fetch-Mode");
+  if (secFetchMode) {
+    request.headers.set("X-Mf-Sec-Fetch-Mode", secFetchMode);
+  }
   return new MiniflareRequest(request.url, {
     method: request.method,
     headers: [["accept-encoding", "identity"], ...request.headers],
@@ -8341,15 +8346,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")
@@ -8357,9 +8412,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(
@@ -8373,7 +8432,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"
     );
@@ -8391,7 +8450,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`
       );
@@ -8406,7 +8465,7 @@ function writeDeployConfig(resolvedPluginConfig, resolvedViteConfig) {
         auxiliaryWorkers.push({ configPath });
       }
     }
-    assert4(
+    assert5(
       entryWorkerConfigPath,
       `Unexpected error: entryWorkerConfigPath is undefined`
     );
@@ -8419,7 +8478,7 @@ function writeDeployConfig(resolvedPluginConfig, resolvedViteConfig) {
 }
 
 // src/miniflare-options.ts
-import assert5 from "node:assert";
+import assert6 from "node:assert";
 import * as fs3 from "node:fs";
 import * as fsp from "node:fs/promises";
 import * as path4 from "node:path";
@@ -8433,8 +8492,7 @@ import {
 import { globSync } from "tinyglobby";
 import "vite";
 import {
-  unstable_getMiniflareWorkerOptions,
-  unstable_readConfig
+  unstable_getMiniflareWorkerOptions
 } from "wrangler";
 function getPersistence(root, persistState) {
   if (persistState === false) {
@@ -8467,7 +8525,7 @@ function getWorkerToWorkerEntrypointNamesMap(workers) {
       if (typeof value === "object" && "name" in value && value.entrypoint !== void 0 && value.entrypoint !== "default") {
         const targetWorkerName = value.name === kCurrentWorker ? worker.name : value.name;
         const entrypointNames = workerToWorkerEntrypointNamesMap.get(targetWorkerName);
-        assert5(entrypointNames, missingWorkerErrorMessage(targetWorkerName));
+        assert6(entrypointNames, missingWorkerErrorMessage(targetWorkerName));
         entrypointNames.add(value.entrypoint);
       }
     }
@@ -8482,20 +8540,20 @@ function getWorkerToDurableObjectClassNamesMap(workers) {
     for (const value of Object.values(worker.durableObjects ?? {})) {
       if (typeof value === "string") {
         const classNames = workerToDurableObjectClassNamesMap.get(worker.name);
-        assert5(classNames, missingWorkerErrorMessage(worker.name));
+        assert6(classNames, missingWorkerErrorMessage(worker.name));
         classNames.add(value);
       } else if (typeof value === "object") {
         if (value.scriptName) {
           const classNames = workerToDurableObjectClassNamesMap.get(
             value.scriptName
           );
-          assert5(classNames, missingWorkerErrorMessage(value.scriptName));
+          assert6(classNames, missingWorkerErrorMessage(value.scriptName));
           classNames.add(value.className);
         } else {
           const classNames = workerToDurableObjectClassNamesMap.get(
             worker.name
           );
-          assert5(classNames, missingWorkerErrorMessage(worker.name));
+          assert6(classNames, missingWorkerErrorMessage(worker.name));
           classNames.add(value.className);
         }
       }
@@ -8513,13 +8571,13 @@ function getWorkerToWorkflowEntrypointClassNamesMap(workers) {
         const classNames = workerToWorkflowEntrypointClassNamesMap.get(
           value.scriptName
         );
-        assert5(classNames, missingWorkerErrorMessage(value.scriptName));
+        assert6(classNames, missingWorkerErrorMessage(value.scriptName));
         classNames.add(value.className);
       } else {
         const classNames = workerToWorkflowEntrypointClassNamesMap.get(
           worker.name
         );
-        assert5(classNames, missingWorkerErrorMessage(worker.name));
+        assert6(classNames, missingWorkerErrorMessage(worker.name));
         classNames.add(value.className);
       }
     }
@@ -8541,6 +8599,13 @@ function getDevMiniflareOptions(resolvedPluginConfig, viteDevServer) {
   const resolvedViteConfig = viteDevServer.config;
   const entryWorkerConfig = getEntryWorkerConfig(resolvedPluginConfig);
   const assetsConfig = resolvedPluginConfig.type === "assets-only" ? resolvedPluginConfig.config.assets : entryWorkerConfig?.assets;
+  const compatibilityOptions = resolvedPluginConfig.type === "assets-only" ? {
+    compatibility_date: resolvedPluginConfig.config.compatibility_date,
+    compatibility_flags: resolvedPluginConfig.config.compatibility_flags
+  } : {
+    ...entryWorkerConfig?.compatibility_date ? { compatibility_date: entryWorkerConfig?.compatibility_date } : {},
+    ...entryWorkerConfig?.compatibility_flags ? { compatibility_flags: entryWorkerConfig?.compatibility_flags } : {}
+  };
   const assetWorkers = [
     {
       name: ROUTER_WORKER_NAME,
@@ -8580,6 +8645,7 @@ function getDevMiniflareOptions(resolvedPluginConfig, viteDevServer) {
       ],
       bindings: {
         CONFIG: {
+          ...compatibilityOptions,
           ...assetsConfig?.html_handling ? { html_handling: assetsConfig.html_handling } : {},
           ...assetsConfig?.not_found_handling ? { not_found_handling: assetsConfig.not_found_handling } : {}
         }
@@ -8628,6 +8694,7 @@ function getDevMiniflareOptions(resolvedPluginConfig, viteDevServer) {
         worker: {
           ...workerOptions,
           name: workerOptions.name ?? workerConfig.name,
+          unsafeInspectorProxy: resolvedPluginConfig.inspectorPort !== false,
           modulesRoot: miniflareModulesRoot,
           unsafeEvalBinding: "__VITE_UNSAFE_EVAL__",
           serviceBindings: {
@@ -8638,7 +8705,7 @@ function getDevMiniflareOptions(resolvedPluginConfig, viteDevServer) {
             __VITE_INVOKE_MODULE__: async (request) => {
               const payload = await request.json();
               const invokePayloadData = payload.data;
-              assert5(
+              assert6(
                 invokePayloadData.name === "fetchModule",
                 `Invalid invoke event: ${invokePayloadData.name}`
               );
@@ -8669,6 +8736,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)));
@@ -8691,7 +8760,7 @@ function getDevMiniflareOptions(resolvedPluginConfig, viteDevServer) {
         const workerEntrypointNames = workerToWorkerEntrypointNamesMap.get(
           workerOptions.name
         );
-        assert5(
+        assert6(
           workerEntrypointNames,
           `WorkerEntrypoint names not found for worker ${workerOptions.name}`
         );
@@ -8703,7 +8772,7 @@ function getDevMiniflareOptions(resolvedPluginConfig, viteDevServer) {
         const durableObjectClassNames = workerToDurableObjectClassNamesMap.get(
           workerOptions.name
         );
-        assert5(
+        assert6(
           durableObjectClassNames,
           `DurableObject class names not found for worker ${workerOptions.name}`
         );
@@ -8713,7 +8782,7 @@ function getDevMiniflareOptions(resolvedPluginConfig, viteDevServer) {
           );
         }
         const workflowEntrypointClassNames = workerToWorkflowEntrypointClassNamesMap.get(workerOptions.name);
-        assert5(
+        assert6(
           workflowEntrypointClassNames,
           `WorkflowEntrypoint class names not found for worker: ${workerOptions.name}`
         );
@@ -8745,18 +8814,18 @@ function getDevMiniflareOptions(resolvedPluginConfig, viteDevServer) {
     async unsafeModuleFallbackService(request) {
       const url = new URL(request.url);
       const rawSpecifier = url.searchParams.get("rawSpecifier");
-      assert5(
+      assert6(
         rawSpecifier,
         `Unexpected error: no specifier in request to module fallback service.`
       );
       const match = additionalModuleRE.exec(rawSpecifier);
-      assert5(match, `Unexpected error: no match for module: ${rawSpecifier}.`);
+      assert6(match, `Unexpected error: no match for module: ${rawSpecifier}.`);
       const [full, moduleType, modulePath] = match;
-      assert5(
+      assert6(
         moduleType,
         `Unexpected error: module type not found in reference: ${full}.`
       );
-      assert5(
+      assert6(
         modulePath,
         `Unexpected error: module path not found in reference: ${full}.`
       );
@@ -8786,7 +8855,7 @@ function getDevMiniflareOptions(resolvedPluginConfig, viteDevServer) {
   };
 }
 function getPreviewModules(main, modulesRules) {
-  assert5(modulesRules, `Unexpected error: 'modulesRules' is undefined`);
+  assert6(modulesRules, `Unexpected error: 'modulesRules' is undefined`);
   const rootPath = path4.dirname(main);
   const entryPath = path4.basename(main);
   return {
@@ -8805,12 +8874,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;
@@ -8819,6 +8884,7 @@ function getPreviewMiniflareOptions(vitePreviewServer, persistState) {
       {
         ...workerOptions,
         name: workerOptions.name ?? config.name,
+        unsafeInspectorProxy: inspectorPort !== false,
         ...miniflareWorkerOptions.main ? getPreviewModules(miniflareWorkerOptions.main, modulesRules) : { modules: true, script: "" }
       },
       ...externalWorkers
@@ -8827,6 +8893,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)));
@@ -8872,14 +8940,14 @@ function miniflareLogLevelFromViteLogLevel(level = "info") {
 }
 
 // src/plugin-config.ts
-import assert6 from "node:assert";
+import assert7 from "node:assert";
 import * as path6 from "node:path";
 import * as vite5 from "vite";
 
 // src/workers-configs.ts
 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
@@ -8930,7 +8998,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) {
@@ -9101,6 +9169,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,
@@ -9123,6 +9192,7 @@ function resolvePluginConfig(pluginConfig, userConfig, viteEnv) {
       type: "assets-only",
       config: entryWorkerResolvedConfig.config,
       configPaths,
+      inspectorPort,
       persistState,
       rawConfigs: {
         entryWorker: entryWorkerResolvedConfig
@@ -9145,7 +9215,7 @@ function resolvePluginConfig(pluginConfig, userConfig, viteEnv) {
       }
     );
     auxiliaryWorkersResolvedConfigs.push(workerResolvedConfig);
-    assert6(
+    assert7(
       workerResolvedConfig.type === "worker",
       "Unexpected error: received AssetsOnlyResult with auxiliary workers."
     );
@@ -9162,6 +9232,7 @@ function resolvePluginConfig(pluginConfig, userConfig, viteEnv) {
     type: "workers",
     configPaths,
     persistState,
+    inspectorPort,
     workers,
     entryWorkerEnvironmentName,
     rawConfigs: {
@@ -9276,7 +9347,7 @@ function cloudflare2(pluginConfig = {}) {
                   resolvedPluginConfig.workers
                 ).map((environmentName) => {
                   const environment = builder.environments[environmentName];
-                  assert7(
+                  assert8(
                     environment,
                     `${environmentName} environment not found`
                   );
@@ -9317,7 +9388,7 @@ function cloudflare2(pluginConfig = {}) {
           if (isEntryWorker && hasClientBuild) {
             const workerOutputDirectory = this.environment.config.build.outDir;
             const clientOutputDirectory = resolvedViteConfig.environments.client?.build.outDir;
-            assert7(
+            assert8(
               clientOutputDirectory,
               "Unexpected error: client output directory is undefined"
             );
@@ -9392,7 +9463,7 @@ function cloudflare2(pluginConfig = {}) {
         }
       },
       async configureServer(viteDevServer) {
-        assert7(
+        assert8(
           viteDevServer.httpServer,
           "Unexpected error: No Vite HTTP server"
         );
@@ -9417,10 +9488,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(
@@ -9437,6 +9511,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",
@@ -9476,7 +9569,7 @@ function cloudflare2(pluginConfig = {}) {
         for (const match of matches) {
           magicString ??= new MagicString(code);
           const [full, _, modulePath] = match;
-          assert7(
+          assert8(
             modulePath,
             `Unexpected error: module path not found in reference ${full}.`
           );
@@ -9559,7 +9652,7 @@ function cloudflare2(pluginConfig = {}) {
           return this.resolve(source, importer, options);
         }
         if (this.environment.mode === "dev") {
-          assert7(
+          assert8(
             this.environment.depsOptimizer,
             "depsOptimizer is required in dev mode"
           );
@@ -9573,16 +9666,63 @@ function cloudflare2(pluginConfig = {}) {
       },
       async transform(code, id) {
         const workerConfig = getWorkerConfig2(this.environment.name);
-        assert7(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) {
-    assert7(resolvedPluginConfig, "Expected resolvedPluginConfig to be defined");
+    assert8(resolvedPluginConfig, "Expected resolvedPluginConfig to be defined");
     return resolvedPluginConfig.type !== "assets-only" ? resolvedPluginConfig.workers[environmentName] : void 0;
   }
 }

package/dist/runner-worker/index.js

@@ -1417,6 +1417,15 @@ async function createModuleRunner(env, webSocket, viteRoot) {
         }
       },
       async runExternalModule(filepath) {
+        if (filepath === "cloudflare:workers") {
+          const originalCloudflareWorkersModule = await import("cloudflare:workers");
+          return Object.seal({
+            ...originalCloudflareWorkersModule,
+            env: stripInternalEnv(
+              originalCloudflareWorkersModule.env
+            )
+          });
+        }
         if (!additionalModuleRE.test(filepath) && filepath.includes("/node_modules") && !filepath.includes("/node_modules/.vite")) {
           throw new Error(
             `[Error] Trying to import non-prebundled module (only prebundled modules are allowed): ${filepath}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudflare/vite-plugin",
-  "version": "0.0.0-9b86dba81",
+  "version": "0.0.0-9c844f771",
   "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-9b86dba81",
-    "miniflare": "0.0.0-9b86dba81",
-    "wrangler": "0.0.0-9b86dba81"
+    "@cloudflare/unenv-preset": "0.0.0-9c844f771",
+    "miniflare": "0.0.0-9c844f771",
+    "wrangler": "0.0.0-9c844f771"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20250319.0",
+    "@cloudflare/workers-types": "^4.20250321.0",
     "@types/node": "^22.10.1",
     "@types/ws": "^8.5.13",
     "magic-string": "^0.30.12",
@@ -52,8 +53,8 @@
     "undici": "^5.28.5",
     "vite": "^6.1.0",
     "vitest": "~3.0.8",
+    "@cloudflare/workers-shared": "0.0.0-9c844f771",
     "@cloudflare/mock-npm-registry": "0.0.0",
-    "@cloudflare/workers-shared": "0.0.0-9b86dba81",
     "@cloudflare/workers-tsconfig": "0.0.0"
   },
   "peerDependencies": {