improve and test vite-plugin-cloudflare .dev.vars files support

the changes here add tests for making sure that the vite plugin correctly
reads secrets from `.dev.vars` files with and without a specified environment

as part of this wragler's `unstable_getMiniflareWorkerOptions` utility needed
to also be updated to accept the environment name as its second parameter

.changeset/orange-camels-hunt_vite-plugin.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/vite-plugin": patch
+---
+
+make sure that `.dev.vars` files work for a specified environment

.changeset/orange-camels-hunt_wrangler.md

@@ -0,0 +1,9 @@
+---
+"wrangler": minor
+---
+
+allow `unstable_getMiniflareWorkerOptions` to always accept an `env` argument
+
+the `unstable_getMiniflareWorkerOptions` utility, when accepting a config object as its first argument,
+doesn't accept an `env` one, the changes here make sure it does since even if a config object is passed
+the `env` one is still relevant for picking up variables from potential `.dev.vars` files

packages/vite-plugin-cloudflare/playground/dev-vars/.dev.vars

@@ -0,0 +1,4 @@
+ENV_NAME = ""
+MY_DEV_VAR_A = "my .dev.vars variable A"
+MY_DEV_VAR_B = "my .dev.vars variable B"
+MY_DEV_VAR_C = "my .dev.vars variable C"

packages/vite-plugin-cloudflare/playground/dev-vars/.dev.vars.staging

@@ -0,0 +1,3 @@
+ENV_NAME = "staging"
+MY_DEV_VAR_A = "my .dev.vars staging variable A"
+MY_DEV_VAR_B = "my .dev.vars staging variable B"

packages/vite-plugin-cloudflare/playground/dev-vars/.gitignore

@@ -0,0 +1 @@
+!.dev.vars

packages/vite-plugin-cloudflare/playground/dev-vars/__tests__/dev-vars-loading.spec.ts

@@ -0,0 +1,19 @@
+import { expect, test } from "vitest";
+import { getJsonResponse, isBuild } from "../../__test-utils__";
+
+// TODO: currently this does not work on previews because after the config redirection
+//       wrangler looses track of the original .dev.vars, we need to somehow address such
+//       use case (so that people are able to preview their workers using secrets)
+
+test.skipIf(isBuild)(
+	"reading variables from a standard .dev.vars file",
+	async () => {
+		expect(await getJsonResponse()).toEqual({
+			"variables present in .dev.vars": {
+				MY_DEV_VAR_A: "my .dev.vars variable A",
+				MY_DEV_VAR_B: "my .dev.vars variable B",
+				MY_DEV_VAR_C: "my .dev.vars variable C",
+			},
+		});
+	}
+);

packages/vite-plugin-cloudflare/playground/dev-vars/__tests__/with-specified-env/dev-vars-loading.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from "vitest";
+import { getJsonResponse, isBuild } from "../../../__test-utils__";
+
+// TODO: currently this does not work on previews because after the config redirection
+//       wrangler looses track of the original .dev.vars, we need to somehow address such
+//       use case (so that people are able to preview their workers using secrets)
+
+test.skipIf(isBuild)(
+	"reading variables from a staging .dev.vars file",
+	async () => {
+		expect(await getJsonResponse()).toEqual({
+			"variables present in .dev.vars.staging": {
+				MY_DEV_VAR_A: "my .dev.vars staging variable A",
+				MY_DEV_VAR_B: "my .dev.vars staging variable B",
+			},
+		});
+	}
+);

packages/vite-plugin-cloudflare/playground/dev-vars/package.json

@@ -0,0 +1,20 @@
+{
+	"name": "@playground/dev-vars",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build --app",
+		"check:types": "tsc --build",
+		"dev": "vite dev",
+		"prepreview": "node ./copy-dev-vars-to-dist.mjs",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@cloudflare/vite-plugin": "workspace:*",
+		"@cloudflare/workers-tsconfig": "workspace:*",
+		"@cloudflare/workers-types": "^4.20241230.0",
+		"typescript": "catalog:vite-plugin",
+		"vite": "catalog:vite-plugin",
+		"wrangler": "catalog:vite-plugin"
+	}
+}

packages/vite-plugin-cloudflare/playground/dev-vars/src/index.ts

@@ -0,0 +1,10 @@
+export default {
+	async fetch(_req, env) {
+		const { ENV_NAME, MY_DEV_VAR_A, MY_DEV_VAR_B, MY_DEV_VAR_C } = env;
+		const dotDevDotVarsVariables = { MY_DEV_VAR_A, MY_DEV_VAR_B, MY_DEV_VAR_C };
+		const extension = ENV_NAME ? `.${ENV_NAME}` : "";
+		return Response.json({
+			[`variables present in .dev.vars${extension}`]: dotDevDotVarsVariables,
+		});
+	},
+} satisfies ExportedHandler<Env>;

packages/vite-plugin-cloudflare/playground/dev-vars/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.node.json" },
+		{ "path": "./tsconfig.worker.json" }
+	]
+}

packages/vite-plugin-cloudflare/playground/dev-vars/tsconfig.node.json

@@ -0,0 +1,4 @@
+{
+	"extends": ["@cloudflare/workers-tsconfig/base.json"],
+	"include": ["vite.config.ts", "__tests__"]
+}

packages/vite-plugin-cloudflare/playground/dev-vars/tsconfig.worker.json

@@ -0,0 +1,4 @@
+{
+	"extends": ["@cloudflare/workers-tsconfig/worker.json"],
+	"include": ["src", "worker-configuration.d.ts"]
+}

packages/vite-plugin-cloudflare/playground/dev-vars/turbo.json

@@ -0,0 +1,9 @@
+{
+	"$schema": "http://turbo.build/schema.json",
+	"extends": ["//"],
+	"tasks": {
+		"build": {
+			"outputs": ["dist/**"]
+		}
+	}
+}

packages/vite-plugin-cloudflare/playground/dev-vars/vite.config.ts

@@ -0,0 +1,6 @@
+import { cloudflare } from "@cloudflare/vite-plugin";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [cloudflare({ persistState: false })],
+});

packages/vite-plugin-cloudflare/playground/dev-vars/vite.config.with-specified-env.ts

@@ -0,0 +1,8 @@
+import { cloudflare } from "@cloudflare/vite-plugin";
+import { defineConfig } from "vite";
+
+process.env.CLOUDFLARE_ENV = "staging";
+
+export default defineConfig({
+	plugins: [cloudflare({ persistState: false })],
+});

packages/vite-plugin-cloudflare/playground/dev-vars/worker-configuration.d.ts

@@ -0,0 +1,8 @@
+// Generated by Wrangler by running `wrangler types`
+
+interface Env {
+	ENV_NAME: string;
+	MY_DEV_VAR_A: string;
+	MY_DEV_VAR_B: string;
+	MY_DEV_VAR_C: string;
+}

packages/vite-plugin-cloudflare/playground/dev-vars/wrangler.toml

@@ -0,0 +1,5 @@
+name = "worker"
+main = "./src/index.ts"
+compatibility_date = "2024-12-30"
+
+[env.staging]

packages/vite-plugin-cloudflare/src/index.ts

@@ -273,7 +273,8 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin {
 			const miniflare = new Miniflare(
 				getPreviewMiniflareOptions(
 					vitePreviewServer,
-					pluginConfig.persistState ?? true
+					pluginConfig.persistState ?? true,
+					resolvedPluginConfig
 				)
 			);
 

packages/vite-plugin-cloudflare/src/miniflare-options.ts

@@ -280,10 +280,13 @@ export function getDevMiniflareOptions(
 		resolvedPluginConfig.type === "workers"
 			? Object.entries(resolvedPluginConfig.workers).map(
 					([environmentName, workerConfig]) => {
-						const miniflareWorkerOptions = unstable_getMiniflareWorkerOptions({
-							...workerConfig,
-							assets: undefined,
-						});
+						const miniflareWorkerOptions = unstable_getMiniflareWorkerOptions(
+							{
+								...workerConfig,
+								assets: undefined,
+							},
+							resolvedPluginConfig.cloudflareEnv
+						);
 
 						const { ratelimits, ...workerOptions } =
 							miniflareWorkerOptions.workerOptions;
@@ -443,7 +446,8 @@ export function getDevMiniflareOptions(
 
 export function getPreviewMiniflareOptions(
 	vitePreviewServer: vite.PreviewServer,
-	persistState: PersistState
+	persistState: PersistState,
+	resolvedPluginConfig: ResolvedPluginConfig
 ): MiniflareOptions {
 	const resolvedViteConfig = vitePreviewServer.config;
 	const configPaths = getWorkerConfigPaths(resolvedViteConfig.root);
@@ -452,7 +456,10 @@ export function getPreviewMiniflareOptions(
 	);
 
 	const workers: Array<WorkerOptions> = workerConfigs.map((config) => {
-		const miniflareWorkerOptions = unstable_getMiniflareWorkerOptions(config);
+		const miniflareWorkerOptions = unstable_getMiniflareWorkerOptions(
+			config,
+			resolvedPluginConfig.cloudflareEnv
+		);
 
 		const { ratelimits, ...workerOptions } =
 			miniflareWorkerOptions.workerOptions;

packages/vite-plugin-cloudflare/src/plugin-config.ts

@@ -47,6 +47,7 @@ export interface WorkerConfig extends BaseConfig {
 interface BasePluginConfig {
 	configPaths: Set<string>;
 	persistState: PersistState;
+	cloudflareEnv?: string;
 }
 
 interface AssetsOnlyPluginConfig extends BasePluginConfig {
@@ -82,7 +83,11 @@ export function resolvePluginConfig(
 	const configPaths = new Set<string>();
 	const persistState = pluginConfig.persistState ?? true;
 	const root = userConfig.root ? path.resolve(userConfig.root) : process.cwd();
-	const { CLOUDFLARE_ENV } = vite.loadEnv(viteEnv.mode, root, "");
+	const { CLOUDFLARE_ENV: cloudflareEnv } = vite.loadEnv(
+		viteEnv.mode,
+		root,
+		""
+	);
 
 	const configPath = pluginConfig.configPath
 		? path.resolve(root, pluginConfig.configPath)
@@ -93,14 +98,10 @@ export function resolvePluginConfig(
 		`Config not found. Have you created a wrangler.json(c) or wrangler.toml file?`
 	);
 
-	const entryWorkerResolvedConfig = getWorkerConfig(
-		configPath,
-		CLOUDFLARE_ENV,
-		{
-			visitedConfigPaths: configPaths,
-			isEntryWorker: true,
-		}
-	);
+	const entryWorkerResolvedConfig = getWorkerConfig(configPath, cloudflareEnv, {
+		visitedConfigPaths: configPaths,
+		isEntryWorker: true,
+	});
 
 	if (entryWorkerResolvedConfig.type === "assets-only") {
 		return {
@@ -129,7 +130,7 @@ export function resolvePluginConfig(
 	for (const auxiliaryWorker of pluginConfig.auxiliaryWorkers ?? []) {
 		const workerResolvedConfig = getWorkerConfig(
 			path.resolve(root, auxiliaryWorker.configPath),
-			CLOUDFLARE_ENV,
+			cloudflareEnv,
 			{
 				visitedConfigPaths: configPaths,
 			}
@@ -167,5 +168,6 @@ export function resolvePluginConfig(
 			entryWorker: entryWorkerResolvedConfig,
 			auxiliaryWorkers: auxiliaryWorkersResolvedConfigs,
 		},
+		cloudflareEnv,
 	};
 }

packages/wrangler/src/api/integrations/platform/index.ts

@@ -258,7 +258,8 @@ export function unstable_getMiniflareWorkerOptions(
 	env?: string
 ): Unstable_MiniflareWorkerOptions;
 export function unstable_getMiniflareWorkerOptions(
-	config: Config
+	config: Config,
+	env?: string
 ): Unstable_MiniflareWorkerOptions;
 export function unstable_getMiniflareWorkerOptions(
 	configOrConfigPath: string | Config,