wrangler 0.0.0-e7a0cd5b → 0.0.0-e87ad068

package/src/pages/projects.tsx

@@ -1,5 +1,4 @@
 import { execSync } from "node:child_process";
-import { render } from "ink";
 import Table from "ink-table";
 import React from "react";
 import { format as timeagoFormat } from "timeago.js";
@@ -10,15 +9,16 @@ import { FatalError } from "../errors";
 import { logger } from "../logger";
 import * as metrics from "../metrics";
 import { requireAuth } from "../user";
+import { renderToString } from "../utils/render";
 import { PAGES_CONFIG_CACHE_FILENAME } from "./constants";
 import { pagesBetaWarning } from "./utils";
+import type {
+	CommonYargsArgv,
+	StrictYargsOptionsToInterface,
+} from "../yargs-types";
 import type { PagesConfigCache, Project } from "./types";
-import type { ArgumentsCamelCase, Argv } from "yargs";
 
-// Empty object, as per eslint
-type ListArgs = Record<string, never>;
-
-export function ListOptions(yargs: Argv): Argv<ListArgs> {
+export function ListOptions(yargs: CommonYargsArgv) {
 	return yargs.epilogue(pagesBetaWarning);
 }
 
@@ -44,10 +44,7 @@ export async function ListHandler() {
 		account_id: accountId,
 	});
 
-	const { unmount } = render(<Table data={data}></Table>, {
-		patchConsole: false,
-	});
-	unmount();
+	logger.log(renderToString(<Table data={data}></Table>));
 	await metrics.sendMetricsEvent("list pages projects");
 }
 
@@ -77,12 +74,7 @@ export const listProjects = async ({
 	return results;
 };
 
-type CreateArgs = {
-	"project-name": string;
-	"production-branch"?: string;
-};
-
-export function CreateOptions(yargs: Argv): Argv<CreateArgs> {
+export function CreateOptions(yargs: CommonYargsArgv) {
 	return yargs
 		.positional("project-name", {
 			type: "string",
@@ -101,7 +93,7 @@ export function CreateOptions(yargs: Argv): Argv<CreateArgs> {
 export async function CreateHandler({
 	productionBranch,
 	projectName,
-}: ArgumentsCamelCase<CreateArgs>) {
+}: StrictYargsOptionsToInterface<typeof CreateOptions>) {
 	const config = getConfigCache<PagesConfigCache>(PAGES_CONFIG_CACHE_FILENAME);
 	const accountId = await requireAuth(config);
 
@@ -132,11 +124,9 @@ export async function CreateHandler({
 			} catch (err) {}
 		}
 
-		productionBranch = await prompt(
-			"Enter the production branch name:",
-			"text",
-			productionBranch ?? "production"
-		);
+		productionBranch = await prompt("Enter the production branch name:", {
+			defaultValue: productionBranch ?? "production",
+		});
 	}
 
 	if (!productionBranch) {

package/src/pages/prompt-select-project.tsx

@@ -0,0 +1,31 @@
+import { render, Text } from "ink";
+import SelectInput from "ink-select-input";
+import React from "react";
+import { listProjects } from "./projects";
+
+export async function promptSelectProject({
+	accountId,
+}: {
+	accountId: string;
+}): Promise<string> {
+	const projects = await listProjects({ accountId });
+
+	return new Promise((resolve) => {
+		const { unmount } = render(
+			<>
+				<Text>Select a project:</Text>
+				<SelectInput
+					items={projects.map((project) => ({
+						key: project.name,
+						label: project.name,
+						value: project,
+					}))}
+					onSelect={async (selected) => {
+						resolve(selected.value.name);
+						unmount();
+					}}
+				/>
+			</>
+		);
+	});
+}

package/src/pages/publish.tsx

@@ -1,12 +1,8 @@
 import { execSync } from "node:child_process";
-import { existsSync, readFileSync } from "node:fs";
-import { tmpdir } from "node:os";
-import { dirname, join } from "node:path";
-import { cwd } from "node:process";
 import { render, Text } from "ink";
 import SelectInput from "ink-select-input";
 import React from "react";
-import { File, FormData } from "undici";
+import { publish } from "../api/pages/publish";
 import { fetchResult } from "../cfetch";
 import { getConfigCache, saveToConfigCache } from "../config-cache";
 import { prompt } from "../dialogs";
@@ -14,24 +10,20 @@ import { FatalError } from "../errors";
 import { logger } from "../logger";
 import * as metrics from "../metrics";
 import { requireAuth } from "../user";
-import { buildFunctions } from "./build";
 import { PAGES_CONFIG_CACHE_FILENAME } from "./constants";
-import { FunctionsNoRoutesError, getFunctionsNoRoutesWarning } from "./errors";
-import { validateRoutes } from "./functions/routes-validation";
 import { listProjects } from "./projects";
-import { upload } from "./upload";
+import { promptSelectProject } from "./prompt-select-project";
 import { pagesBetaWarning } from "./utils";
 import type {
-	Deployment,
-	PagesConfigCache,
-	Project,
-	YargsOptionsToInterface,
-} from "./types";
-import type { Argv } from "yargs";
+	CommonYargsArgv,
+	StrictYargsOptionsToInterface,
+} from "../yargs-types";
+import type { PagesConfigCache } from "./types";
+import type { Project } from "@cloudflare/types";
 
-type PublishArgs = YargsOptionsToInterface<typeof Options>;
+type PublishArgs = StrictYargsOptionsToInterface<typeof Options>;
 
-export function Options(yargs: Argv) {
+export function Options(yargs: CommonYargsArgv) {
 	return yargs
 		.positional("directory", {
 			type: "string",
@@ -60,6 +52,20 @@ export function Options(yargs: Argv) {
 				description:
 					"Whether or not the workspace should be considered dirty for this deployment",
 			},
+			"skip-caching": {
+				type: "boolean",
+				description: "Skip asset caching which speeds up builds",
+			},
+			bundle: {
+				type: "boolean",
+				default: undefined,
+				hidden: true,
+			},
+			"no-bundle": {
+				type: "boolean",
+				default: false,
+				description: "Whether to run bundling on `_worker.js` before deploying",
+			},
 			config: {
 				describe: "Pages does not support wrangler.toml",
 				type: "string",
@@ -76,6 +82,9 @@ export const Handler = async ({
 	commitHash,
 	commitMessage,
 	commitDirty,
+	skipCaching,
+	bundle,
+	noBundle,
 	config: wranglerConfig,
 }: PublishArgs) => {
 	if (wranglerConfig) {
@@ -132,24 +141,7 @@ export const Handler = async ({
 
 		switch (existingOrNew) {
 			case "existing": {
-				projectName = await new Promise((resolve) => {
-					const { unmount } = render(
-						<>
-							<Text>Select a project:</Text>
-							<SelectInput
-								items={projects.map((project) => ({
-									key: project.name,
-									label: project.name,
-									value: project,
-								}))}
-								onSelect={async (selected) => {
-									resolve(selected.value.name);
-									unmount();
-								}}
-							/>
-						</>
-					);
-				});
+				projectName = await promptSelectProject({ accountId });
 				break;
 			}
 			case "new": {
@@ -170,10 +162,11 @@ export const Handler = async ({
 
 				const productionBranch = await prompt(
 					"Enter the production branch name:",
-					"text",
-					isGitDir
-						? execSync(`git rev-parse --abbrev-ref HEAD`).toString().trim()
-						: "production"
+					{
+						defaultValue: isGitDir
+							? execSync(`git rev-parse --abbrev-ref HEAD`).toString().trim()
+							: "production",
+					}
 				);
 
 				if (!productionBranch) {
@@ -248,181 +241,19 @@ export const Handler = async ({
 		}
 	}
 
-	let _headers: string | undefined,
-		_redirects: string | undefined,
-		_routesGenerated: string | undefined,
-		_routesCustom: string | undefined,
-		_workerJS: string | undefined;
-
-	try {
-		_headers = readFileSync(join(directory, "_headers"), "utf-8");
-	} catch {}
-
-	try {
-		_redirects = readFileSync(join(directory, "_redirects"), "utf-8");
-	} catch {}
-
-	try {
-		/**
-		 * Developers can specify a custom _routes.json file, for projects with Pages
-		 * Functions or projects in Advanced Mode
-		 */
-		_routesCustom = readFileSync(join(directory, "_routes.json"), "utf-8");
-	} catch {}
-
-	try {
-		_workerJS = readFileSync(join(directory, "_worker.js"), "utf-8");
-	} catch {}
-
-	/**
-	 * 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
-	 * Functions first and exit if it failed
-	 */
-	let builtFunctions: string | undefined = undefined;
-	const functionsDirectory = join(cwd(), "functions");
-	const routesOutputPath = !existsSync(join(directory, "_routes.json"))
-		? join(tmpdir(), `_routes-${Math.random()}.json`)
-		: undefined;
-
-	if (!_workerJS && existsSync(functionsDirectory)) {
-		const outfile = join(tmpdir(), `./functionsWorker-${Math.random()}.js`);
-		try {
-			await buildFunctions({
-				outfile,
-				functionsDirectory,
-				onEnd: () => {},
-				buildOutputDirectory: dirname(outfile),
-				routesOutputPath,
-			});
-
-			builtFunctions = readFileSync(outfile, "utf-8");
-		} catch (e) {
-			if (e instanceof FunctionsNoRoutesError) {
-				logger.warn(
-					getFunctionsNoRoutesWarning(functionsDirectory, "skipping")
-				);
-			} else {
-				throw e;
-			}
-		}
-	}
-
-	const manifest = await upload({ directory, accountId, projectName });
-
-	const formData = new FormData();
-
-	formData.append("manifest", JSON.stringify(manifest));
-
-	if (branch) {
-		formData.append("branch", branch);
-	}
-
-	if (commitMessage) {
-		formData.append("commit_message", commitMessage);
-	}
-
-	if (commitHash) {
-		formData.append("commit_hash", commitHash);
-	}
-
-	if (commitDirty !== undefined) {
-		formData.append("commit_dirty", commitDirty);
-	}
-
-	if (_headers) {
-		formData.append("_headers", new File([_headers], "_headers"));
-		logger.log(`✨ Uploading _headers`);
-	}
-
-	if (_redirects) {
-		formData.append("_redirects", new File([_redirects], "_redirects"));
-		logger.log(`✨ Uploading _redirects`);
-	}
-
-	/**
-	 * Advanced Mode
-	 * https://developers.cloudflare.com/pages/platform/functions/#advanced-mode
-	 *
-	 * When using a _worker.js file, the entire /functions directory is ignored
-	 * – this includes its routing and middleware characteristics.
-	 */
-	if (_workerJS) {
-		formData.append("_worker.js", new File([_workerJS], "_worker.js"));
-		logger.log(`✨ Uploading _worker.js`);
-
-		if (_routesCustom) {
-			// user provided a custom _routes.json file
-			try {
-				const routesCustomJSON = JSON.parse(_routesCustom);
-				validateRoutes(routesCustomJSON, join(directory, "_routes.json"));
-
-				formData.append(
-					"_routes.json",
-					new File([_routesCustom], "_routes.json")
-				);
-				logger.log(`✨ Uploading _routes.json`);
-				logger.warn(
-					`_routes.json is an experimental feature and is subject to change. Please use with care.`
-				);
-			} catch (err) {
-				if (err instanceof FatalError) {
-					throw err;
-				}
-			}
-		}
-	}
-
-	/**
-	 * Pages Functions
-	 * https://developers.cloudflare.com/pages/platform/functions/
-	 */
-	if (builtFunctions && !_workerJS) {
-		// if Functions were build successfully, proceed to uploading the build file
-		formData.append("_worker.js", new File([builtFunctions], "_worker.js"));
-		logger.log(`✨ Uploading Functions`);
-
-		if (_routesCustom) {
-			// user provided a custom _routes.json file
-			try {
-				const routesCustomJSON = JSON.parse(_routesCustom);
-				validateRoutes(routesCustomJSON, join(directory, "_routes.json"));
-
-				formData.append(
-					"_routes.json",
-					new File([_routesCustom], "_routes.json")
-				);
-				logger.log(`✨ Uploading _routes.json`);
-				logger.warn(
-					`_routes.json is an experimental feature and is subject to change. Please use with care.`
-				);
-			} catch (err) {
-				if (err instanceof FatalError) {
-					throw err;
-				}
-			}
-		} else if (routesOutputPath) {
-			// no custom _routes.json file found, so fallback to the generated one
-			try {
-				_routesGenerated = readFileSync(routesOutputPath, "utf-8");
-
-				if (_routesGenerated) {
-					formData.append(
-						"_routes.json",
-						new File([_routesGenerated], "_routes.json")
-					);
-				}
-			} catch {}
-		}
-	}
-
-	const deploymentResponse = await fetchResult<Deployment>(
-		`/accounts/${accountId}/pages/projects/${projectName}/deployments`,
-		{
-			method: "POST",
-			body: formData,
-		}
-	);
+	const deploymentResponse = await publish({
+		directory,
+		accountId,
+		projectName,
+		branch,
+		skipCaching,
+		commitMessage,
+		commitHash,
+		commitDirty,
+		// TODO: Here lies a known bug. If you specify both `--bundle` and `--no-bundle`, this behavior is undefined and you will get unexpected results.
+		// There is no sane way to get the true value out of yargs, so here we are.
+		bundle: bundle ?? !noBundle,
+	});
 
 	saveToConfigCache<PagesConfigCache>(PAGES_CONFIG_CACHE_FILENAME, {
 		account_id: accountId,

package/src/pages/types.ts

@@ -1,12 +1,3 @@
-import type { ArgumentsCamelCase, Argv } from "yargs";
-
-/**
- * Given some Yargs Options function factory, extract the interface
- * that corresponds to the yargs arguments
- */
-export type YargsOptionsToInterface<T extends (yargs: Argv) => Argv> =
-	T extends (yargs: Argv) => Argv<infer P> ? ArgumentsCamelCase<P> : never;
-
 export type Project = {
 	name: string;
 	subdomain: string;
@@ -19,9 +10,15 @@ export type Project = {
 	};
 	created_on: string;
 	production_branch: string;
+	deployment_configs?: {
+		production?: {
+			d1_databases?: Record<string, { id: string }>;
+		};
+	};
 };
 export type Deployment = {
 	id: string;
+	created_on: string;
 	environment: string;
 	deployment_trigger: {
 		metadata: {

package/src/pages/upload.tsx

@@ -22,12 +22,15 @@ import {
 } from "./constants";
 import { hashFile } from "./hash";
 import { pagesBetaWarning } from "./utils";
-import type { UploadPayloadFile, YargsOptionsToInterface } from "./types";
-import type { Argv } from "yargs";
+import type {
+	CommonYargsArgv,
+	StrictYargsOptionsToInterface,
+} from "../yargs-types";
+import type { UploadPayloadFile } from "./types";
 
-type UploadArgs = YargsOptionsToInterface<typeof Options>;
+type UploadArgs = StrictYargsOptionsToInterface<typeof Options>;
 
-export function Options(yargs: Argv) {
+export function Options(yargs: CommonYargsArgv) {
 	return yargs
 		.positional("directory", {
 			type: "string",
@@ -39,6 +42,10 @@ export function Options(yargs: Argv) {
 				type: "string",
 				description: "The name of the project you want to deploy to",
 			},
+			"skip-caching": {
+				type: "boolean",
+				description: "Skip asset caching which speeds up builds",
+			},
 		})
 		.epilogue(pagesBetaWarning);
 }
@@ -46,6 +53,7 @@ export function Options(yargs: Argv) {
 export const Handler = async ({
 	directory,
 	outputManifestPath,
+	skipCaching,
 }: UploadArgs) => {
 	if (!directory) {
 		throw new FatalError("Must specify a directory.", 1);
@@ -58,6 +66,7 @@ export const Handler = async ({
 	const manifest = await upload({
 		directory,
 		jwt: process.env.CF_PAGES_UPLOAD_JWT,
+		skipCaching: skipCaching ?? false,
 	});
 
 	if (outputManifestPath) {
@@ -73,8 +82,14 @@ export const upload = async (
 		| {
 				directory: string;
 				jwt: string;
+				skipCaching: boolean;
+		  }
+		| {
+				directory: string;
+				accountId: string;
+				projectName: string;
+				skipCaching: boolean;
 		  }
-		| { directory: string; accountId: string; projectName: string }
 ) => {
 	async function fetchJwt(): Promise<string> {
 		if ("jwt" in args) {
@@ -183,7 +198,12 @@ export const upload = async (
 	const start = Date.now();
 
 	let attempts = 0;
-	const getMissingHashes = async (): Promise<string[]> => {
+	const getMissingHashes = async (skipCaching: boolean): Promise<string[]> => {
+		if (skipCaching) {
+			logger.debug("Force skipping cache");
+			return files.map(({ hash }) => hash);
+		}
+
 		try {
 			return await fetchResult<string[]>(`/pages/assets/check-missing`, {
 				method: "POST",
@@ -206,13 +226,13 @@ export const upload = async (
 					// Looks like the JWT expired, fetch another one
 					jwt = await fetchJwt();
 				}
-				return getMissingHashes();
+				return getMissingHashes(skipCaching);
 			} else {
 				throw e;
 			}
 		}
 	};
-	const missingHashes = await getMissingHashes();
+	const missingHashes = await getMissingHashes(args.skipCaching);
 
 	const sortedFiles = files
 		.filter((file) => missingHashes.includes(file.hash))
@@ -256,9 +276,7 @@ export const upload = async (
 	}
 
 	let counter = fileMap.size - sortedFiles.length;
-	const { rerender, unmount } = render(
-		<Progress done={counter} total={fileMap.size} />
-	);
+	const { rerender, unmount } = renderProgress(counter, fileMap.size);
 
 	const queue = new PQueue({ concurrency: BULK_UPLOAD_CONCURRENCY });
 
@@ -282,7 +300,8 @@ export const upload = async (
 			);
 
 			try {
-				return await fetchResult(`/pages/assets/upload`, {
+				logger.debug("POST /pages/assets/upload");
+				const res = await fetchResult(`/pages/assets/upload`, {
 					method: "POST",
 					headers: {
 						"Content-Type": "application/json",
@@ -290,8 +309,10 @@ export const upload = async (
 					},
 					body: JSON.stringify(payload),
 				});
+				logger.debug("result:", res);
 			} catch (e) {
 				if (attempts < MAX_UPLOAD_ATTEMPTS) {
+					logger.debug("failed:", e, "retrying...");
 					// Exponential backoff, 1 second first time, then 2 second, then 4 second etc.
 					await new Promise((resolvePromise) =>
 						setTimeout(resolvePromise, Math.pow(2, attempts++) * 1000)
@@ -303,16 +324,17 @@ export const upload = async (
 					}
 					return doUpload();
 				} else {
+					logger.debug("failed:", e);
 					throw e;
 				}
 			}
 		};
 
-		queue.add(() =>
+		void queue.add(() =>
 			doUpload().then(
 				() => {
 					counter += bucket.files.length;
-					rerender(<Progress done={counter} total={fileMap.size} />);
+					rerender(counter, fileMap.size);
 				},
 				(error) => {
 					return Promise.reject(
@@ -413,6 +435,28 @@ function formatTime(duration: number) {
 	return `(${(duration / 1000).toFixed(2)} sec)`;
 }
 
+function renderProgress(done: number, total: number) {
+	if (isInteractive()) {
+		const { rerender, unmount } = render(
+			<Progress done={done} total={total} />
+		);
+		return {
+			// eslint-disable-next-line no-shadow
+			rerender(done: number, total: number) {
+				rerender(<Progress done={done} total={total} />);
+			},
+			unmount,
+		};
+	} else {
+		// eslint-disable-next-line no-shadow
+		const rerender = (done: number, total: number) => {
+			logger.log(`Uploading... (${done}/${total})`);
+		};
+		rerender(done, total);
+		return { rerender, unmount() {} };
+	}
+}
+
 function Progress({ done, total }: { done: number; total: number }) {
 	return (
 		<>

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 = () => {
@@ -9,4 +9,15 @@ export const CLEANUP = () => {
 };
 
 export const pagesBetaWarning =
-	"🚧 'wrangler pages <command>' is a beta command. Please report any issues to https://github.com/cloudflare/wrangler2/issues/new/choose";
+	"🚧 'wrangler pages <command>' is a beta command. Please report any issues to https://github.com/cloudflare/workers-sdk/issues/new/choose";
+
+export function isUrl(maybeUrl?: string): maybeUrl is string {
+	if (!maybeUrl) return false;
+
+	try {
+		new URL(maybeUrl);
+		return true;
+	} catch (e) {
+		return false;
+	}
+}

package/src/parse.ts

@@ -2,8 +2,12 @@ import * as fs from "node:fs";
 import { resolve } from "node:path";
 import TOML from "@iarna/toml";
 import { formatMessagesSync } from "esbuild";
+import {
+	parse as jsoncParse,
+	printParseErrorCode,
+	type ParseError as JsoncParseError,
+} from "jsonc-parser";
 import { logger } from "./logger";
-
 export type Message = {
 	text: string;
 	location?: Location;
@@ -139,6 +143,24 @@ export function parseJSON<T>(input: string, file?: string): T {
 	}
 }
 
+/**
+ * A wrapper around `JSONC.parse` that throws a `ParseError`.
+ */
+export function parseJSONC<T>(input: string, file?: string): T {
+	const errors: JsoncParseError[] = [];
+	const data = jsoncParse(input, errors);
+	if (errors.length) {
+		throw new ParseError({
+			text: printParseErrorCode(errors[0].error),
+			location: {
+				...indexLocation({ file, fileText: input }, errors[0].offset + 1),
+				length: errors[0].length,
+			},
+		});
+	}
+	return data;
+}
+
 /**
  * Reads a file into a node Buffer.
  */

package/src/paths.ts

@@ -59,7 +59,7 @@ export function readableRelative(to: string) {
 declare const __RELATIVE_PACKAGE_PATH__: string;
 
 /**
- * Use this function (rather than node.js constants like `__dirname`) to specify
+ * Use this function (rather than Node.js constants like `__dirname`) to specify
  * paths that are relative to the base path of the Wrangler package.
  *
  * It is important to use this function because it reliably maps to the root of the package