use shell-quote.quote(args) instead of args.join(" ") (#4215)

* override shell-quote.quote to allow non-string args
which will be stringified

* update snapshots
something weird is going on with jest snapshot encoding
- double backslash \\ is changed into a forward slash /
- this doesn't effect real usage \\@ is what is actually returned from shell-quote and that works

.changeset/cold-parrots-deliver.md

@@ -0,0 +1,6 @@
+---
+"create-cloudflare": patch
+"wrangler": patch
+---
+
+fix various logging of shell commands to correctly quote args when needed

packages/create-cloudflare/src/cli.ts

@@ -8,6 +8,7 @@ import { detectPackageManager } from "helpers/packages";
 import semver from "semver";
 import { version } from "../package.json";
 import { validateProjectDirectory } from "./common";
+import * as shellquote from "./helpers/shell-quote";
 import { templateMap } from "./templateMap";
 import type { C3Args } from "types";
 
@@ -55,7 +56,9 @@ export const runLatest = async () => {
 	// the parsing logic of `npm create` requires `--` to be supplied
 	// before any flags intended for the target command.
 	const argString =
-		npm === "npm" ? `-- ${args.join(" ")}` : `${args.join(" ")}`;
+		npm === "npm"
+			? `-- ${shellquote.quote(args)}`
+			: `${shellquote.quote(args)}`;
 
 	await runCommand(`${npm} create cloudflare@latest ${argString}`);
 };

packages/create-cloudflare/src/helpers/shell-quote.ts

@@ -1,6 +1,10 @@
 import shellquote from "shell-quote";
 
-export const quote = shellquote.quote;
+export const quote = function (args: (string | number | boolean)[]) {
+	const stringArgs = args.map((arg) => String(arg));
+
+	return shellquote.quote(stringArgs);
+};
 
 export function parse(cmd: string, env?: Record<string, string>): string[] {
 	// This is a workaround for a bug in shell-quote on Windows

packages/create-cloudflare/src/pages.ts

@@ -19,6 +19,7 @@ import {
 	runDeploy,
 	setupProjectDirectory,
 } from "./common";
+import * as shellquote from "./helpers/shell-quote";
 import type { C3Args, PagesGeneratorContext } from "types";
 
 /** How many times to retry the create project command before failing. */
@@ -162,7 +163,9 @@ const createProject = async (ctx: PagesGeneratorContext) => {
 	const CLOUDFLARE_ACCOUNT_ID = ctx.account.id;
 
 	try {
-		const compatFlags = ctx.framework?.config.compatibilityFlags?.join(" ");
+		const compatFlags = shellquote.quote(
+			ctx.framework?.config.compatibilityFlags ?? []
+		);
 		const compatFlagsArg = compatFlags
 			? `--compatibility-flags ${compatFlags}`
 			: "";

packages/wrangler/src/__tests__/generate.test.ts

@@ -43,7 +43,7 @@ describe("generate", () => {
 				`"✨ Created no-template/wrangler.toml"`
 			);
 			expect(std.warn).toMatchInlineSnapshot(`
-			"[33m▲ [43;33m[[43;30mWARNING[43;33m][0m [1mThe \`init\` command is no longer supported. Please use \`mockpm create cloudflare@2 no-template\` instead.[0m
+			"[33m▲ [43;33m[[43;30mWARNING[43;33m][0m [1mThe \`init\` command is no longer supported. Please use \`mockpm create cloudflare/@2 no-template\` instead.[0m
 
 			  The \`init\` command will be removed in a future version.
 

packages/wrangler/src/init.ts

@@ -256,8 +256,8 @@ export async function initHandler(args: InitArgs) {
 			c3Arguments.unshift(...shellquote.parse(getC3CommandFromEnv()));
 
 			// Deprecate the `init --from-dash` command
-			const replacementC3Command = `\`${packageManager.type} ${c3Arguments.join(
-				" "
+			const replacementC3Command = `\`${packageManager.type} ${shellquote.quote(
+				c3Arguments
 			)}\``;
 
 			logger.warn(

packages/wrangler/src/pages/dev.ts

@@ -11,6 +11,7 @@ import { FatalError } from "../errors";
 import { logger } from "../logger";
 import * as metrics from "../metrics";
 import { getBasePath } from "../paths";
+import * as shellquote from "../utils/shell-quote";
 import { buildFunctions } from "./buildFunctions";
 import { ROUTES_SPEC_VERSION, SECONDS_TO_WAIT_FOR_PROXY } from "./constants";
 import {
@@ -797,7 +798,7 @@ async function spawnProxyProcess({
 		);
 	}
 
-	logger.log(`Running ${command.join(" ")}...`);
+	logger.log(`Running ${shellquote.quote(command)}...`);
 	const proxy = spawn(
 		command[0].toString(),
 		command.slice(1).map((value) => value.toString()),

packages/wrangler/src/utils/shell-quote.ts

@@ -1,6 +1,10 @@
 import shellquote from "shell-quote";
 
-export const quote = shellquote.quote;
+export const quote = function (args: (string | number | boolean)[]) {
+	const stringArgs = args.map((arg) => String(arg));
+
+	return shellquote.quote(stringArgs);
+};
 
 export function parse(cmd: string, env?: Record<string, string>): string[] {
 	// This is a workaround for a bug in shell-quote on Windows