wrangler 2.1.15 → 2.2.1

package/src/pages/dev.tsx

@@ -256,6 +256,8 @@ export const Handler = async ({
 				await esbuild.build({
 					entryPoints: [scriptPath],
 					write: false,
+					// we need it to be bundled so that any imports that are used are affected by the blocker plugin
+					bundle: true,
 					plugins: [blockWorkerJsImports],
 				});
 			} catch {}
@@ -270,7 +272,7 @@ export const Handler = async ({
 		});
 	} else if (usingFunctions) {
 		// Try to use Functions
-		const outfile = join(tmpdir(), `./functionsWorker-${Math.random()}.js`);
+		const outfile = join(tmpdir(), `./functionsWorker-${Math.random()}.mjs`);
 		scriptPath = outfile;
 
 		if (nodeCompat) {
@@ -290,6 +292,8 @@ export const Handler = async ({
 				onEnd,
 				buildOutputDirectory: directory,
 				nodeCompat,
+				local: true,
+				d1Databases: d1s.map((binding) => binding.toString()),
 			});
 			await metrics.sendMetricsEvent("build pages functions");
 
@@ -307,6 +311,8 @@ export const Handler = async ({
 						onEnd,
 						buildOutputDirectory: directory,
 						nodeCompat,
+						local: true,
+						d1Databases: d1s.map((binding) => binding.toString()),
 					});
 					await metrics.sendMetricsEvent("build pages functions");
 				} catch (e) {
@@ -477,8 +483,8 @@ export const Handler = async ({
 					.map((binding) => binding.toString().split("="))
 					.map(([key, ...values]) => [key, values.join("=")])
 			),
-			kv: kvs.map((val) => ({
-				binding: val.toString(),
+			kv: kvs.map((binding) => ({
+				binding: binding.toString(),
 				id: "",
 			})),
 			durableObjects: durableObjects
@@ -520,7 +526,7 @@ export const Handler = async ({
 			persist,
 			persistTo,
 			showInteractiveDevSession: undefined,
-			inspect: true,
+			inspect: undefined,
 			logPrefix: "pages",
 			logLevel: logLevel ?? "warn",
 		},
@@ -680,14 +686,23 @@ async function spawnProxyProcess({
 	return port;
 }
 
+// TODO: Kill this once we have https://github.com/cloudflare/wrangler2/issues/2153
 const blockWorkerJsImports: esbuild.Plugin = {
 	name: "block-worker-js-imports",
-	setup(build: esbuild.PluginBuild) {
-		build.onResolve({ filter: /.*/g }, (_args) => {
+	setup(build) {
+		build.onResolve({ filter: /.*/g }, (args) => {
+			// If it's the entrypoint, let it be as is
+			if (args.kind === "entry-point") {
+				return {
+					path: args.path,
+				};
+			}
+			// Otherwise, block any imports that the file is requesting
 			logger.error(
 				`_worker.js is importing from another file. This will throw an error if deployed.\nYou should bundle your Worker or remove the import if it is unused.`
 			);
-			return null;
+			// Miniflare will error with this briefly down the line -- there's no point in continuing.
+			process.exit(1);
 		});
 	},
 };

package/src/pages/functions/buildPlugin.ts

@@ -1,19 +1,11 @@
 import { access, lstat } from "node:fs/promises";
 import { dirname, relative, resolve } from "node:path";
-import NodeGlobalsPolyfills from "@esbuild-plugins/node-globals-polyfill";
-import NodeModulesPolyfills from "@esbuild-plugins/node-modules-polyfill";
-import { build } from "esbuild";
+import { bundleWorker } from "../../bundle";
 import { getBasePath } from "../../paths";
+import { D1_BETA_PREFIX } from "../../worker";
+import type { Options as WorkerOptions } from "./buildWorker";
 
-type Options = {
-	routesModule: string;
-	outfile: string;
-	minify?: boolean;
-	sourcemap?: boolean;
-	watch?: boolean;
-	nodeCompat?: boolean;
-	onEnd?: () => void;
-};
+type Options = Omit<WorkerOptions, "fallbackService" | "buildOutputDirectory">;
 
 export function buildPlugin({
 	routesModule,
@@ -21,90 +13,94 @@ export function buildPlugin({
 	minify = false,
 	sourcemap = false,
 	watch = false,
-	nodeCompat,
 	onEnd = () => {},
+	nodeCompat,
+	functionsDirectory,
+	local,
+	betaD1Shims,
 }: Options) {
-	return build({
-		entryPoints: [resolve(getBasePath(), "templates/pages-template-plugin.ts")],
-		inject: [routesModule],
-		bundle: true,
-		format: "esm",
-		target: "esnext",
-		loader: {
-			".html": "text",
-			".txt": "text",
+	return bundleWorker(
+		{
+			file: resolve(getBasePath(), "templates/pages-template-plugin.ts"),
+			directory: functionsDirectory,
+			format: "modules",
 		},
-		outfile,
-		minify,
-		sourcemap,
-		watch,
-		allowOverwrite: true,
-		define: { ...(nodeCompat ? { global: "globalThis" } : {}) },
-		plugins: [
-			{
-				name: "wrangler notifier and monitor",
-				setup(pluginBuild) {
-					pluginBuild.onEnd((result) => {
-						if (result.errors.length > 0) {
-							console.error(
-								`${result.errors.length} error(s) and ${result.warnings.length} warning(s) when compiling Worker.`
-							);
-						} else if (result.warnings.length > 0) {
-							console.warn(
-								`${result.warnings.length} warning(s) when compiling Worker.`
-							);
-							onEnd();
-						} else {
-							console.log("Compiled Worker successfully.");
-							onEnd();
-						}
-					});
+		resolve(outfile),
+		{
+			inject: [routesModule],
+			minify,
+			sourcemap,
+			watch,
+			nodeCompat,
+			define: {},
+			betaD1Shims: (betaD1Shims || []).map(
+				(binding) => `${D1_BETA_PREFIX}${binding}`
+			),
+			plugins: [
+				{
+					name: "wrangler notifier and monitor",
+					setup(pluginBuild) {
+						pluginBuild.onEnd((result) => {
+							if (result.errors.length > 0) {
+								console.error(
+									`${result.errors.length} error(s) and ${result.warnings.length} warning(s) when compiling Worker.`
+								);
+							} else if (result.warnings.length > 0) {
+								console.warn(
+									`${result.warnings.length} warning(s) when compiling Worker.`
+								);
+								onEnd();
+							} else {
+								console.log("Compiled Worker successfully.");
+								onEnd();
+							}
+						});
+					},
 				},
-			},
-			{
-				name: "Assets",
-				setup(pluginBuild) {
-					if (pluginBuild.initialOptions.outfile) {
-						const outdir = dirname(pluginBuild.initialOptions.outfile);
+				{
+					name: "Assets",
+					setup(pluginBuild) {
+						if (pluginBuild.initialOptions.outfile) {
+							const outdir = dirname(pluginBuild.initialOptions.outfile);
 
-						pluginBuild.onResolve({ filter: /^assets:/ }, async (args) => {
-							const directory = resolve(
-								args.resolveDir,
-								args.path.slice("assets:".length)
-							);
+							pluginBuild.onResolve({ filter: /^assets:/ }, async (args) => {
+								const directory = resolve(
+									args.resolveDir,
+									args.path.slice("assets:".length)
+								);
 
-							const exists = await access(directory)
-								.then(() => true)
-								.catch(() => false);
+								const exists = await access(directory)
+									.then(() => true)
+									.catch(() => false);
 
-							const isDirectory =
-								exists && (await lstat(directory)).isDirectory();
+								const isDirectory =
+									exists && (await lstat(directory)).isDirectory();
 
-							if (!isDirectory) {
-								return {
-									errors: [
-										{
-											text: `'${directory}' does not exist or is not a directory.`,
-										},
-									],
-								};
-							}
+								if (!isDirectory) {
+									return {
+										errors: [
+											{
+												text: `'${directory}' does not exist or is not a directory.`,
+											},
+										],
+									};
+								}
 
-							const path = `assets:./${relative(outdir, directory)}`;
+								const path = `assets:./${relative(outdir, directory)}`;
 
-							return { path, external: true, namespace: "assets" };
-						});
-					}
+								return { path, external: true, namespace: "assets" };
+							});
+						}
+					},
 				},
-			},
-			...(nodeCompat
-				? [
-						NodeGlobalsPolyfills({
-							buffer: true,
-						}),
-						NodeModulesPolyfills(),
-				  ]
-				: []),
-		],
-	});
+			],
+			isOutfile: true,
+			serveAssetsFromWorker: false,
+			disableModuleCollection: true,
+			rules: [],
+			checkFetch: local,
+			targetConsumer: local ? "dev" : "publish",
+			local,
+		}
+	);
 }

package/src/pages/functions/buildWorker.ts

@@ -1,12 +1,11 @@
 import { access, cp, lstat, rm } from "node:fs/promises";
 import { join, resolve } from "node:path";
-import NodeGlobalsPolyfills from "@esbuild-plugins/node-globals-polyfill";
-import NodeModulesPolyfills from "@esbuild-plugins/node-modules-polyfill";
-import { build } from "esbuild";
 import { nanoid } from "nanoid";
+import { bundleWorker } from "../../bundle";
 import { getBasePath } from "../../paths";
+import { D1_BETA_PREFIX } from "../../worker";
 
-type Options = {
+export type Options = {
 	routesModule: string;
 	outfile: string;
 	minify?: boolean;
@@ -16,6 +15,9 @@ type Options = {
 	onEnd?: () => void;
 	buildOutputDirectory?: string;
 	nodeCompat?: boolean;
+	functionsDirectory: string;
+	local: boolean;
+	betaD1Shims?: string[];
 };
 
 export function buildWorker({
@@ -28,129 +30,136 @@ export function buildWorker({
 	onEnd = () => {},
 	buildOutputDirectory,
 	nodeCompat,
+	functionsDirectory,
+	local,
+	betaD1Shims,
 }: Options) {
-	return build({
-		entryPoints: [resolve(getBasePath(), "templates/pages-template-worker.ts")],
-		inject: [routesModule],
-		bundle: true,
-		format: "esm",
-		target: "esnext",
-		loader: {
-			".html": "text",
-			".txt": "text",
+	return bundleWorker(
+		{
+			file: resolve(getBasePath(), "templates/pages-template-worker.ts"),
+			directory: functionsDirectory,
+			format: "modules",
 		},
-		outfile,
-		minify,
-		sourcemap,
-		watch,
-		allowOverwrite: true,
-		define: {
-			__FALLBACK_SERVICE__: JSON.stringify(fallbackService),
-			...(nodeCompat ? { global: "globalThis" } : {}),
-		},
-		plugins: [
-			{
-				name: "wrangler notifier and monitor",
-				setup(pluginBuild) {
-					pluginBuild.onEnd((result) => {
-						if (result.errors.length > 0) {
-							console.error(
-								`${result.errors.length} error(s) and ${result.warnings.length} warning(s) when compiling Worker.`
-							);
-						} else if (result.warnings.length > 0) {
-							console.warn(
-								`${result.warnings.length} warning(s) when compiling Worker.`
-							);
-							onEnd();
-						} else {
-							console.log("Compiled Worker successfully.");
-							onEnd();
-						}
-					});
-				},
+		resolve(outfile),
+		{
+			inject: [routesModule],
+			minify,
+			sourcemap,
+			watch,
+			nodeCompat,
+			loader: {
+				".txt": "text",
+				".html": "text",
+			},
+			define: {
+				__FALLBACK_SERVICE__: JSON.stringify(fallbackService),
 			},
-			{
-				name: "Assets",
-				setup(pluginBuild) {
-					const identifiers = new Map<string, string>();
+			betaD1Shims: (betaD1Shims || []).map(
+				(binding) => `${D1_BETA_PREFIX}${binding}`
+			),
+			plugins: [
+				{
+					name: "wrangler notifier and monitor",
+					setup(pluginBuild) {
+						pluginBuild.onEnd((result) => {
+							if (result.errors.length > 0) {
+								console.error(
+									`${result.errors.length} error(s) and ${result.warnings.length} warning(s) when compiling Worker.`
+								);
+							} else if (result.warnings.length > 0) {
+								console.warn(
+									`${result.warnings.length} warning(s) when compiling Worker.`
+								);
+								onEnd();
+							} else {
+								console.log("Compiled Worker successfully.");
+								onEnd();
+							}
+						});
+					},
+				},
+				{
+					name: "Assets",
+					setup(pluginBuild) {
+						const identifiers = new Map<string, string>();
 
-					pluginBuild.onResolve({ filter: /^assets:/ }, async (args) => {
-						const directory = resolve(
-							args.resolveDir,
-							args.path.slice("assets:".length)
-						);
+						pluginBuild.onResolve({ filter: /^assets:/ }, async (args) => {
+							const directory = resolve(
+								args.resolveDir,
+								args.path.slice("assets:".length)
+							);
 
-						const exists = await access(directory)
-							.then(() => true)
-							.catch(() => false);
+							const exists = await access(directory)
+								.then(() => true)
+								.catch(() => false);
 
-						const isDirectory =
-							exists && (await lstat(directory)).isDirectory();
+							const isDirectory =
+								exists && (await lstat(directory)).isDirectory();
 
-						if (!isDirectory) {
-							return {
-								errors: [
-									{
-										text: `'${directory}' does not exist or is not a directory.`,
-									},
-								],
-							};
-						}
+							if (!isDirectory) {
+								return {
+									errors: [
+										{
+											text: `'${directory}' does not exist or is not a directory.`,
+										},
+									],
+								};
+							}
 
-						// TODO: Consider hashing the contents rather than using a unique identifier every time?
-						identifiers.set(directory, nanoid());
-						if (!buildOutputDirectory) {
-							console.warn(
-								"You're attempting to import static assets as part of your Pages Functions, but have not specified a directory in which to put them. You must use 'wrangler pages dev <directory>' rather than 'wrangler pages dev -- <command>' to import static assets in Functions."
-							);
-						}
-						return { path: directory, namespace: "assets" };
-					});
+							// TODO: Consider hashing the contents rather than using a unique identifier every time?
+							identifiers.set(directory, nanoid());
+							if (!buildOutputDirectory) {
+								console.warn(
+									"You're attempting to import static assets as part of your Pages Functions, but have not specified a directory in which to put them. You must use 'wrangler pages dev <directory>' rather than 'wrangler pages dev -- <command>' to import static assets in Functions."
+								);
+							}
+							return { path: directory, namespace: "assets" };
+						});
 
-					pluginBuild.onLoad(
-						{ filter: /.*/, namespace: "assets" },
-						async (args) => {
-							const identifier = identifiers.get(args.path);
+						pluginBuild.onLoad(
+							{ filter: /.*/, namespace: "assets" },
+							async (args) => {
+								const identifier = identifiers.get(args.path);
 
-							if (buildOutputDirectory) {
-								const staticAssetsOutputDirectory = join(
-									buildOutputDirectory,
-									"cdn-cgi",
-									"pages-plugins",
-									identifier as string
-								);
-								await rm(staticAssetsOutputDirectory, {
-									force: true,
-									recursive: true,
-								});
-								await cp(args.path, staticAssetsOutputDirectory, {
-									force: true,
-									recursive: true,
-								});
+								if (buildOutputDirectory) {
+									const staticAssetsOutputDirectory = join(
+										buildOutputDirectory,
+										"cdn-cgi",
+										"pages-plugins",
+										identifier as string
+									);
+									await rm(staticAssetsOutputDirectory, {
+										force: true,
+										recursive: true,
+									});
+									await cp(args.path, staticAssetsOutputDirectory, {
+										force: true,
+										recursive: true,
+									});
 
-								return {
-									// TODO: Watch args.path for changes and re-copy when updated
-									contents: `export const onRequest = ({ request, env, functionPath }) => {
+									return {
+										// TODO: Watch args.path for changes and re-copy when updated
+										contents: `export const onRequest = ({ request, env, functionPath }) => {
                     const url = new URL(request.url)
                     const relativePathname = \`/\${url.pathname.split(functionPath)[1] || ''}\`.replace(/^\\/\\//, '/');
                     url.pathname = '/cdn-cgi/pages-plugins/${identifier}' + relativePathname
                     request = new Request(url.toString(), request)
                     return env.ASSETS.fetch(request)
                   }`,
-								};
+									};
+								}
 							}
-						}
-					);
+						);
+					},
 				},
-			},
-			...(nodeCompat
-				? [
-						NodeGlobalsPolyfills({
-							buffer: true,
-						}),
-						NodeModulesPolyfills(),
-				  ]
-				: []),
-		],
-	});
+			],
+			isOutfile: true,
+			serveAssetsFromWorker: false,
+			disableModuleCollection: true,
+			rules: [],
+			checkFetch: local,
+			targetConsumer: local ? "dev" : "publish",
+			local,
+		}
+	);
 }

package/src/pages/publish.tsx

@@ -21,12 +21,8 @@ import { validateRoutes } from "./functions/routes-validation";
 import { listProjects } from "./projects";
 import { upload } from "./upload";
 import { pagesBetaWarning } from "./utils";
-import type {
-	Deployment,
-	PagesConfigCache,
-	Project,
-	YargsOptionsToInterface,
-} from "./types";
+import type { PagesConfigCache, YargsOptionsToInterface } from "./types";
+import type { Project, Deployment } from "@cloudflare/types";
 import type { Argv } from "yargs";
 
 type PublishArgs = YargsOptionsToInterface<typeof Options>;
@@ -274,6 +270,15 @@ export const Handler = async ({
 		_workerJS = readFileSync(join(directory, "_worker.js"), "utf-8");
 	} catch {}
 
+	// Grab the bindings from the API, we need these for shims and other such hacky inserts
+	const project = await fetchResult<Project>(
+		`/accounts/${accountId}/pages/projects/${projectName}`
+	);
+	let isProduction = true;
+	if (branch) {
+		isProduction = project.production_branch === branch;
+	}
+
 	/**
 	 * Evaluate if this is an Advanced Mode or Pages Functions project. If Advanced Mode, we'll
 	 * go ahead and upload `_worker.js` as is, but if Pages Functions, we need to attempt to build
@@ -294,6 +299,11 @@ export const Handler = async ({
 				onEnd: () => {},
 				buildOutputDirectory: dirname(outfile),
 				routesOutputPath,
+				local: false,
+				d1Databases: Object.keys(
+					project.deployment_configs[isProduction ? "production" : "preview"]
+						.d1_databases ?? {}
+				),
 			});
 
 			builtFunctions = readFileSync(outfile, "utf-8");

package/src/pages/upload.tsx

@@ -297,7 +297,7 @@ export const upload = async (
 						setTimeout(resolvePromise, Math.pow(2, attempts++) * 1000)
 					);
 
-					if ((e as { code: number }).code === 8000013) {
+					if ((e as { code: number }).code === 8000013 || isJwtExpired(jwt)) {
 						// Looks like the JWT expired, fetch another one
 						jwt = await fetchJwt();
 					}
@@ -358,7 +358,7 @@ export const upload = async (
 		} catch (e) {
 			await new Promise((resolvePromise) => setTimeout(resolvePromise, 1000));
 
-			if ((e as { code: number }).code === 8000013) {
+			if ((e as { code: number }).code === 8000013 || isJwtExpired(jwt)) {
 				// Looks like the JWT expired, fetch another one
 				jwt = await fetchJwt();
 			}
@@ -392,6 +392,23 @@ export const upload = async (
 	);
 };
 
+// Decode and check that the current JWT has not expired
+function isJwtExpired(token: string): boolean | undefined {
+	try {
+		const decodedJwt = JSON.parse(
+			Buffer.from(token.split(".")[1], "base64").toString()
+		);
+
+		const dateNow = new Date().getTime() / 1000;
+
+		return decodedJwt.exp <= dateNow;
+	} catch (e) {
+		if (e instanceof Error) {
+			throw new Error(`Invalid token: ${e.message}`);
+		}
+	}
+}
+
 function formatTime(duration: number) {
 	return `(${(duration / 1000).toFixed(2)} sec)`;
 }

package/src/pages/utils.ts

@@ -1,6 +1,6 @@
-import type { BuildResult } from "esbuild";
+import type { BundleResult } from "../bundle";
 
-export const RUNNING_BUILDERS: BuildResult[] = [];
+export const RUNNING_BUILDERS: BundleResult[] = [];
 
 export const CLEANUP_CALLBACKS: (() => void)[] = [];
 export const CLEANUP = () => {