wrangler 0.0.0-e88a54e → 0.0.0-e8e684c7

package/src/pages/functions/routes-transformation.ts

@@ -0,0 +1,122 @@
+import { join as pathJoin } from "node:path";
+import { toUrlPath } from "../../paths";
+import { MAX_FUNCTIONS_ROUTES_RULES, ROUTES_SPEC_VERSION } from "../constants";
+import { consolidateRoutes } from "./routes-consolidation";
+import type { RouteConfig } from "./routes";
+
+/** Interface for _routes.json */
+interface RoutesJSONSpec {
+	version: typeof ROUTES_SPEC_VERSION;
+	include: string[];
+	exclude: string[];
+}
+
+type RoutesJSONRouteInput = Pick<RouteConfig, "routePath" | "middleware">[];
+
+export function convertRoutesToGlobPatterns(
+	routes: RoutesJSONRouteInput
+): string[] {
+	const convertedRoutes = routes.map(({ routePath, middleware }) => {
+		const globbedRoutePath: string = routePath.replace(/:\w+\*?.*/, "*");
+
+		// Middleware mountings need to end in glob so that they can handle their
+		// own sub-path routes
+		if (
+			typeof middleware === "string" ||
+			(Array.isArray(middleware) && middleware.length > 0)
+		) {
+			if (!globbedRoutePath.endsWith("*")) {
+				return toUrlPath(pathJoin(globbedRoutePath, "*"));
+			}
+		}
+
+		return toUrlPath(globbedRoutePath);
+	});
+
+	return Array.from(new Set(convertedRoutes));
+}
+
+/**
+ * Converts Functions routes like /foo/:bar to a Routing object that's used
+ * to determine if a request should run in the Functions user-worker.
+ * Also consolidates redundant routes such as [/foo/bar, /foo/:bar] -> /foo/*
+ *
+ * @returns RoutesJSONSpec to be written to _routes.json
+ */
+export function convertRoutesToRoutesJSONSpec(
+	routes: RoutesJSONRouteInput
+): RoutesJSONSpec {
+	// The initial routes coming in are sorted most-specific to least-specific.
+	// The order doesn't have any affect on the output of this function, but
+	// it should speed up route consolidation with less-specific routes being first.
+	const reversedRoutes = [...routes].reverse();
+	const include = convertRoutesToGlobPatterns(reversedRoutes);
+	return optimizeRoutesJSONSpec({
+		version: ROUTES_SPEC_VERSION,
+		include,
+		exclude: [],
+	});
+}
+
+/**
+ * Optimizes and returns a new Routes JSON Spec instance performing
+ * de-duping, consolidation, truncation, and sorting
+ */
+export function optimizeRoutesJSONSpec(spec: RoutesJSONSpec): RoutesJSONSpec {
+	const optimizedSpec = { ...spec };
+
+	let consolidatedRoutes = consolidateRoutes(optimizedSpec.include);
+	if (consolidatedRoutes.length > MAX_FUNCTIONS_ROUTES_RULES) {
+		consolidatedRoutes = ["/*"];
+	}
+	// Sort so that least-specific routes are first
+	consolidatedRoutes.sort((a, b) => compareRoutes(b, a));
+
+	optimizedSpec.include = consolidatedRoutes;
+
+	return optimizedSpec;
+}
+
+/**
+ * Simplified routes comparison (copied from the one in filepath-routing.)
+ * This version will sort most-specific to least-specific, but the input is simplified
+ * routes like /foo/*, /foo, etc
+ */
+export function compareRoutes(routeA: string, routeB: string) {
+	function parseRoutePath(routePath: string): string[] {
+		return routePath.slice(1).split("/").filter(Boolean);
+	}
+
+	const segmentsA = parseRoutePath(routeA);
+	const segmentsB = parseRoutePath(routeB);
+
+	// sort routes with fewer segments after those with more segments
+	if (segmentsA.length !== segmentsB.length) {
+		return segmentsB.length - segmentsA.length;
+	}
+
+	for (let i = 0; i < segmentsA.length; i++) {
+		const isWildcardA = segmentsA[i].includes("*");
+		const isWildcardB = segmentsB[i].includes("*");
+
+		// sort wildcard segments after non-wildcard segments
+		if (isWildcardA && !isWildcardB) return 1;
+		if (!isWildcardA && isWildcardB) return -1;
+	}
+
+	// all else equal, just sort the paths lexicographically
+	return routeA.localeCompare(routeB);
+}
+
+export function isRoutesJSONSpec(data: unknown): data is RoutesJSONSpec {
+	return (
+		(typeof data === "object" &&
+			data &&
+			"version" in data &&
+			typeof (data as RoutesJSONSpec).version === "number" &&
+			(data as RoutesJSONSpec).version === ROUTES_SPEC_VERSION &&
+			Array.isArray((data as RoutesJSONSpec).include) &&
+			Array.isArray((data as RoutesJSONSpec).exclude)) ||
+		false
+	);
+}

package/src/pages/functions/routes.ts

@@ -0,0 +1,151 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { isValidIdentifier, normalizeIdentifier } from "./identifiers";
+import type { UrlPath } from "../../paths";
+
+export const HTTP_METHODS = [
+	"HEAD",
+	"OPTIONS",
+	"GET",
+	"POST",
+	"PUT",
+	"PATCH",
+	"DELETE",
+] as const;
+export type HTTPMethod = typeof HTTP_METHODS[number];
+
+export type RoutesCollection = Array<{
+	routePath: UrlPath;
+	mountPath: UrlPath;
+	method?: HTTPMethod;
+	modules: string[];
+	middlewares: string[];
+}>;
+
+export type Config = {
+	routes?: RouteConfig[];
+	schedules?: unknown;
+};
+
+export type RouteConfig = {
+	routePath: UrlPath;
+	mountPath: UrlPath;
+	method?: HTTPMethod;
+	middleware?: string | string[];
+	module?: string | string[];
+};
+
+type ImportMap = Map<
+	string,
+	{
+		filepath: string;
+		name: string;
+		identifier: string;
+	}
+>;
+
+type Arguments = {
+	config: Config;
+	outfile: string;
+	srcDir: string;
+};
+
+export async function writeRoutesModule({
+	config,
+	srcDir,
+	outfile = "_routes.js",
+}: Arguments) {
+	const { importMap, routes } = parseConfig(config, srcDir);
+	const routesModule = generateRoutesModule(importMap, routes);
+
+	await fs.writeFile(outfile, routesModule);
+
+	return outfile;
+}
+
+export function parseConfig(config: Config, baseDir: string) {
+	const routes: RoutesCollection = [];
+	const importMap: ImportMap = new Map();
+	const identifierCount = new Map<string, number>(); // to keep track of identifier collisions
+
+	function parseModuleIdentifiers(paths: string | string[] | undefined) {
+		if (typeof paths === "undefined") {
+			paths = [];
+		}
+
+		if (typeof paths === "string") {
+			paths = [paths];
+		}
+
+		return paths.map((modulePath) => {
+			const [filepath, name = "default"] = modulePath.split(":");
+			let { identifier } = importMap.get(modulePath) ?? {};
+
+			const resolvedPath = path.resolve(baseDir, filepath);
+
+			// ensure the filepath isn't attempting to resolve to anything outside of the project
+			if (path.relative(baseDir, resolvedPath).startsWith("..")) {
+				throw new Error(`Invalid module path "${filepath}"`);
+			}
+
+			// ensure the module name (if provided) is a valid identifier to guard against injection attacks
+			if (name !== "default" && !isValidIdentifier(name)) {
+				throw new Error(`Invalid module identifier "${name}"`);
+			}
+
+			if (!identifier) {
+				identifier = normalizeIdentifier(`__${filepath}_${name}`);
+
+				let count = identifierCount.get(identifier) ?? 0;
+				identifierCount.set(identifier, ++count);
+
+				if (count > 1) {
+					identifier += `_${count}`;
+				}
+
+				importMap.set(modulePath, { filepath: resolvedPath, name, identifier });
+			}
+
+			return identifier;
+		});
+	}
+
+	for (const { routePath, mountPath, method, ...props } of config.routes ??
+		[]) {
+		routes.push({
+			routePath,
+			mountPath,
+			method,
+			middlewares: parseModuleIdentifiers(props.middleware),
+			modules: parseModuleIdentifiers(props.module),
+		});
+	}
+
+	return { routes, importMap };
+}
+
+export function generateRoutesModule(
+	importMap: ImportMap,
+	routes: RoutesCollection
+) {
+	return `${[...importMap.values()]
+		.map(
+			({ filepath, name, identifier }) =>
+				`import { ${name} as ${identifier} } from ${JSON.stringify(filepath)}`
+		)
+		.join("\n")}
+
+export const routes = [
+  ${routes
+		.map(
+			(route) => `  {
+      routePath: "${route.routePath}",
+      mountPath: "${route.mountPath}",
+      method: "${route.method}",
+      middlewares: [${route.middlewares.join(", ")}],
+      modules: [${route.modules.join(", ")}],
+    },`
+		)
+		.join("\n")}
+  ]`;
+}

package/src/pages/functions.tsx

@@ -0,0 +1,96 @@
+import { existsSync, lstatSync, readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { FatalError } from "../errors";
+import { logger } from "../logger";
+import { isInPagesCI, ROUTES_SPEC_VERSION } from "./constants";
+import {
+	isRoutesJSONSpec,
+	optimizeRoutesJSONSpec,
+} from "./functions/routes-transformation";
+import { pagesBetaWarning } from "./utils";
+import type { YargsOptionsToInterface } from "./types";
+import type { Argv } from "yargs";
+
+type OptimizeRoutesArgs = YargsOptionsToInterface<typeof OptimizeRoutesOptions>;
+
+export function OptimizeRoutesOptions(yargs: Argv) {
+	return yargs
+		.options({
+			"routes-path": {
+				type: "string",
+				demandOption: true,
+				description: "The location of the _routes.json file",
+			},
+		})
+		.options({
+			"output-routes-path": {
+				type: "string",
+				demandOption: true,
+				description: "The location of the optimized output routes file",
+			},
+		});
+}
+
+export async function OptimizeRoutesHandler({
+	routesPath,
+	outputRoutesPath,
+}: OptimizeRoutesArgs) {
+	if (!isInPagesCI) {
+		// Beta message for `wrangler pages <commands>` usage
+		logger.log(pagesBetaWarning);
+	}
+
+	let routesFileContents: string;
+	const routesOutputDirectory = path.dirname(outputRoutesPath);
+
+	if (!existsSync(routesPath)) {
+		throw new FatalError(
+			`Oops! File ${routesPath} does not exist. Please make sure --routes-path is a valid file path (for example "/public/_routes.json").`,
+			1
+		);
+	}
+
+	if (
+		!existsSync(routesOutputDirectory) ||
+		!lstatSync(routesOutputDirectory).isDirectory()
+	) {
+		throw new FatalError(
+			`Oops! Folder ${routesOutputDirectory} does not exist. Please make sure --output-routes-path is a valid file path (for example "/public/_routes.json").`,
+			1
+		);
+	}
+
+	try {
+		routesFileContents = readFileSync(routesPath, "utf-8");
+	} catch (err) {
+		throw new FatalError(`Error while reading ${routesPath} file: ${err}`);
+	}
+
+	const routes = JSON.parse(routesFileContents);
+
+	if (!isRoutesJSONSpec(routes)) {
+		throw new FatalError(
+			`
+      Invalid _routes.json file found at: ${routesPath}. Please make sure the JSON object has the following format:
+      {
+        version: ${ROUTES_SPEC_VERSION};
+        include: string[];
+        exclude: string[];
+      }
+      `,
+			1
+		);
+	}
+
+	const optimizedRoutes = optimizeRoutesJSONSpec(routes);
+	const optimizedRoutesContents = JSON.stringify(optimizedRoutes);
+
+	try {
+		writeFileSync(outputRoutesPath, optimizedRoutesContents);
+	} catch (err) {
+		throw new FatalError(
+			`Error writing to ${outputRoutesPath} file: ${err}`,
+			1
+		);
+	}
+}

package/src/pages/index.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable no-shadow */
+
+import * as Build from "./build";
+import * as Deployments from "./deployments";
+import * as Dev from "./dev";
+import * as Functions from "./functions";
+import * as Projects from "./projects";
+import * as Publish from "./publish";
+import * as Upload from "./upload";
+import { CLEANUP, pagesBetaWarning } from "./utils";
+import type { BuilderCallback } from "yargs";
+
+process.on("SIGINT", () => {
+	CLEANUP();
+	process.exit();
+});
+process.on("SIGTERM", () => {
+	CLEANUP();
+	process.exit();
+});
+
+export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
+	return (
+		yargs
+			.command(
+				"dev [directory] [-- command..]",
+				"🧑‍💻 Develop your full-stack Pages application locally",
+				Dev.Options,
+				Dev.Handler
+			)
+			/**
+			 * `wrangler pages functions` is meant for internal use only for now,
+			 * so let's hide this command from the help output
+			 */
+			.command("functions", false, (yargs) =>
+				yargs
+					.command(
+						"build [directory]",
+						"Compile a folder of Cloudflare Pages Functions into a single Worker",
+						Build.Options,
+						Build.Handler
+					)
+					.command(
+						"optimize-routes [routesPath] [outputRoutesPath]",
+						"Consolidate and optimize the route paths declared in _routes.json",
+						Functions.OptimizeRoutesOptions,
+						Functions.OptimizeRoutesHandler
+					)
+			)
+			.command("project", "⚡️ Interact with your Pages projects", (yargs) =>
+				yargs
+					.command(
+						"list",
+						"List your Cloudflare Pages projects",
+						Projects.ListOptions,
+						Projects.ListHandler
+					)
+					.command(
+						"create [project-name]",
+						"Create a new Cloudflare Pages project",
+						Projects.CreateOptions,
+						Projects.CreateHandler
+					)
+					.command("upload [directory]", false, Upload.Options, Upload.Handler)
+					.epilogue(pagesBetaWarning)
+			)
+			.command(
+				"deployment",
+				"🚀 Interact with the deployments of a project",
+				(yargs) =>
+					yargs
+						.command(
+							"list",
+							"List deployments in your Cloudflare Pages project",
+							Deployments.ListOptions,
+							Deployments.ListHandler
+						)
+						.command(
+							"create [directory]",
+							"🆙 Publish a directory of static assets as a Pages deployment",
+							Publish.Options,
+							Publish.Handler
+						)
+						.epilogue(pagesBetaWarning)
+			)
+			.command(
+				"publish [directory]",
+				"🆙 Publish a directory of static assets as a Pages deployment",
+				Publish.Options,
+				Publish.Handler
+			)
+			.epilogue(pagesBetaWarning)
+	);
+};

package/src/pages/projects.tsx

@@ -0,0 +1,169 @@
+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";
+import { fetchResult } from "../cfetch";
+import { getConfigCache, saveToConfigCache } from "../config-cache";
+import { prompt } from "../dialogs";
+import { FatalError } from "../errors";
+import { logger } from "../logger";
+import * as metrics from "../metrics";
+import { requireAuth } from "../user";
+import { PAGES_CONFIG_CACHE_FILENAME } from "./constants";
+import { pagesBetaWarning } from "./utils";
+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> {
+	return yargs.epilogue(pagesBetaWarning);
+}
+
+export async function ListHandler() {
+	const config = getConfigCache<PagesConfigCache>(PAGES_CONFIG_CACHE_FILENAME);
+
+	const accountId = await requireAuth(config);
+
+	const projects: Array<Project> = await listProjects({ accountId });
+
+	const data = projects.map((project) => {
+		return {
+			"Project Name": project.name,
+			"Project Domains": `${project.domains.join(", ")}`,
+			"Git Provider": project.source ? "Yes" : "No",
+			"Last Modified": project.latest_deployment
+				? timeagoFormat(project.latest_deployment.modified_on)
+				: timeagoFormat(project.created_on),
+		};
+	});
+
+	saveToConfigCache<PagesConfigCache>(PAGES_CONFIG_CACHE_FILENAME, {
+		account_id: accountId,
+	});
+
+	const { unmount } = render(<Table data={data}></Table>, {
+		patchConsole: false,
+	});
+	unmount();
+	await metrics.sendMetricsEvent("list pages projects");
+}
+
+export const listProjects = async ({
+	accountId,
+}: {
+	accountId: string;
+}): Promise<Array<Project>> => {
+	const pageSize = 10;
+	let page = 1;
+	const results = [];
+	while (results.length % pageSize === 0) {
+		const json: Array<Project> = await fetchResult(
+			`/accounts/${accountId}/pages/projects`,
+			{},
+			new URLSearchParams({
+				per_page: pageSize.toString(),
+				page: page.toString(),
+			})
+		);
+		page++;
+		results.push(...json);
+		if (json.length < pageSize) {
+			break;
+		}
+	}
+	return results;
+};
+
+type CreateArgs = {
+	"project-name": string;
+	"production-branch"?: string;
+};
+
+export function CreateOptions(yargs: Argv): Argv<CreateArgs> {
+	return yargs
+		.positional("project-name", {
+			type: "string",
+			demandOption: true,
+			description: "The name of your Pages project",
+		})
+		.options({
+			"production-branch": {
+				type: "string",
+				description: "The name of the production branch of your project",
+			},
+		})
+		.epilogue(pagesBetaWarning);
+}
+
+export async function CreateHandler({
+	productionBranch,
+	projectName,
+}: ArgumentsCamelCase<CreateArgs>) {
+	const config = getConfigCache<PagesConfigCache>(PAGES_CONFIG_CACHE_FILENAME);
+	const accountId = await requireAuth(config);
+
+	const isInteractive = process.stdin.isTTY;
+	if (!projectName && isInteractive) {
+		projectName = await prompt("Enter the name of your new project:");
+	}
+
+	if (!projectName) {
+		throw new FatalError("Must specify a project name.", 1);
+	}
+
+	if (!productionBranch && isInteractive) {
+		let isGitDir = true;
+		try {
+			execSync(`git rev-parse --is-inside-work-tree`, {
+				stdio: "ignore",
+			});
+		} catch (err) {
+			isGitDir = false;
+		}
+
+		if (isGitDir) {
+			try {
+				productionBranch = execSync(`git rev-parse --abbrev-ref HEAD`)
+					.toString()
+					.trim();
+			} catch (err) {}
+		}
+
+		productionBranch = await prompt(
+			"Enter the production branch name:",
+			"text",
+			productionBranch ?? "production"
+		);
+	}
+
+	if (!productionBranch) {
+		throw new FatalError("Must specify a production branch.", 1);
+	}
+
+	const { subdomain } = await fetchResult<Project>(
+		`/accounts/${accountId}/pages/projects`,
+		{
+			method: "POST",
+			body: JSON.stringify({
+				name: projectName,
+				production_branch: productionBranch,
+			}),
+		}
+	);
+
+	saveToConfigCache<PagesConfigCache>(PAGES_CONFIG_CACHE_FILENAME, {
+		account_id: accountId,
+		project_name: projectName,
+	});
+
+	logger.log(
+		`✨ Successfully created the '${projectName}' project. It will be available at https://${subdomain}/ once you create your first deployment.`
+	);
+	logger.log(
+		`To deploy a folder of assets, run 'wrangler pages publish [directory]'.`
+	);
+	await metrics.sendMetricsEvent("create pages project");
+}