Rip out react from all non-dev flows (#7065)

cloudflare · Oct 23, 2024 · b219296 · b219296
1 parent 760e43f
commit b219296
Show file tree

Hide file tree

Showing 23 changed files with 119 additions and 214 deletions.
diff --git a/.changeset/rotten-apples-happen.md b/.changeset/rotten-apples-happen.md
@@ -0,0 +1,5 @@
+---
+"wrangler": patch
+---
+
+Internal refactor to remove React/ink from all non-`wrangler dev` flows
diff --git a/packages/wrangler/src/__tests__/d1/create.test.ts b/packages/wrangler/src/__tests__/d1/create.test.ts
@@ -65,9 +65,10 @@ describe("create", () => {
 		Created your new D1 database.
 
 		[[d1_databases]]
-		binding = \\"DB\\" # i.e. available in your Worker on env.DB
+		binding = \\"DB\\"
 		database_name = \\"test\\"
-		database_id = \\"51e7c314-456e-4167-b6c3-869ad188fc23\\""
+		database_id = \\"51e7c314-456e-4167-b6c3-869ad188fc23\\"
+		"
 	`);
 	});
 });
diff --git a/packages/wrangler/src/ai/createFinetune.tsx → packages/wrangler/src/ai/createFinetune.ts b/packages/wrangler/src/ai/createFinetune.tsx → packages/wrangler/src/ai/createFinetune.ts
diff --git a/packages/wrangler/src/ai/listCatalog.tsx → packages/wrangler/src/ai/listCatalog.ts b/packages/wrangler/src/ai/listCatalog.tsx → packages/wrangler/src/ai/listCatalog.ts
diff --git a/packages/wrangler/src/ai/listFinetune.tsx → packages/wrangler/src/ai/listFinetune.ts b/packages/wrangler/src/ai/listFinetune.tsx → packages/wrangler/src/ai/listFinetune.ts
diff --git a/packages/wrangler/src/api/pages/deploy.tsx → packages/wrangler/src/api/pages/deploy.ts b/packages/wrangler/src/api/pages/deploy.tsx → packages/wrangler/src/api/pages/deploy.ts
diff --git a/packages/wrangler/src/d1/backups.tsx → packages/wrangler/src/d1/backups.ts b/packages/wrangler/src/d1/backups.tsx → packages/wrangler/src/d1/backups.ts
@@ -1,12 +1,10 @@
 import fs from "node:fs/promises";
 import * as path from "path";
-import Table from "ink-table";
 import { fetchResult } from "../cfetch";
 import { performApiFetch } from "../cfetch/internal";
 import { withConfig } from "../config";
 import { logger } from "../logger";
 import { requireAuth } from "../user";
-import { renderToString } from "../utils/render";
 import { formatBytes, formatTimeAgo } from "./formatTimeAgo";
 import { Name } from "./options";
 import { getDatabaseByNameOrBinding } from "./utils";
@@ -32,13 +30,13 @@ export const ListHandler = withConfig<ListHandlerOptions>(
 		);
 
 		const backups: Backup[] = await listBackups(accountId, db.uuid);
-		logger.log(
-			renderToString(
-				<Table
-					data={backups}
-					columns={["created_at", "id", "num_tables", "size"]}
-				></Table>
-			)
+		logger.table(
+			backups.map((b) => ({
+				created_at: b.created_at,
+				id: b.id,
+				num_tables: String(b.num_tables),
+				size: b.size ?? "",
+			}))
 		);
 	}
 );
@@ -95,13 +93,13 @@ export const CreateHandler = withConfig<CreateHandlerOptions>(
 		);
 
 		const backup: Backup = await createBackup(accountId, db.uuid);
-		logger.log(
-			renderToString(
-				<Table
-					data={[backup]}
-					columns={["created_at", "id", "num_tables", "size", "state"]}
-				></Table>
-			)
+		logger.table(
+			[backup].map((b) => ({
+				created_at: b.created_at,
+				id: b.id,
+				num_tables: String(b.num_tables),
+				size: b.size ?? "",
+			}))
 		);
 	}
 );

diff --git a/packages/wrangler/src/d1/create.tsx → packages/wrangler/src/d1/create.ts b/packages/wrangler/src/d1/create.tsx → packages/wrangler/src/d1/create.ts
@@ -1,11 +1,10 @@
-import { Box, Text } from "ink";
+import TOML from "@iarna/toml";
 import { printWranglerBanner } from "..";
 import { fetchResult } from "../cfetch";
 import { withConfig } from "../config";
 import { UserError } from "../errors";
 import { logger } from "../logger";
 import { requireAuth } from "../user";
-import { renderToString } from "../utils/render";
 import { LOCATION_CHOICES } from "./constants";
 import type {
 	CommonYargsArgv,
@@ -63,26 +62,21 @@ export const Handler = withConfig<HandlerOptions>(
 		}
 
 		logger.log(
-			renderToString(
-				<Box flexDirection="column">
-					<Text>
-						✅ Successfully created DB &apos;{db.name}&apos;
-						{db.created_in_region
-							? ` in region ${db.created_in_region}`
-							: location
-								? ` using primary location hint ${location}`
-								: ``}
-					</Text>
-					<Text>Created your new D1 database.</Text>
-					<Text>&nbsp;</Text>
-					<Text>[[d1_databases]]</Text>
-					<Text>
-						binding = &quot;DB&quot; # i.e. available in your Worker on env.DB
-					</Text>
-					<Text>database_name = &quot;{db.name}&quot;</Text>
-					<Text>database_id = &quot;{db.uuid}&quot;</Text>
-				</Box>
-			)
+			`✅ Successfully created DB '${db.name}'${
+				db.created_in_region
+					? ` in region ${db.created_in_region}`
+					: location
+						? ` using primary location hint ${location}`
+						: ``
+			}`
+		);
+		logger.log("Created your new D1 database.\n");
+		logger.log(
+			TOML.stringify({
+				d1_databases: [
+					{ binding: "DB", database_name: db.name, database_id: db.uuid },
+				],
+			})
 		);
 	}
 );
diff --git a/packages/wrangler/src/d1/execute.tsx → packages/wrangler/src/d1/execute.ts b/packages/wrangler/src/d1/execute.tsx → packages/wrangler/src/d1/execute.ts
@@ -3,12 +3,10 @@ import assert from "node:assert";
 import path from "node:path";
 import { spinnerWhile } from "@cloudflare/cli/interactive";
 import chalk from "chalk";
-import { Static, Text } from "ink";
-import Table from "ink-table";
 import md5File from "md5-file";
 import { Miniflare } from "miniflare";
 import { fetch } from "undici";
-import { printWranglerBanner } from "../";
+import { printWranglerBanner } from "..";
 import { fetchResult } from "../cfetch";
 import { readConfig } from "../config";
 import { getLocalPersistencePath } from "../dev/get-local-persistence-path";
@@ -18,7 +16,6 @@ import { logger } from "../logger";
 import { APIError, readFileSync } from "../parse";
 import { readableRelative } from "../paths";
 import { requireAuth } from "../user";
-import { renderToString } from "../utils/render";
 import * as options from "./options";
 import splitSqlQuery from "./splitter";
 import { getDatabaseByNameOrBinding, getDatabaseInfoFromConfig } from "./utils";
@@ -144,29 +141,25 @@ export const Handler = async (args: HandlerOptions): Promise<void> => {
 		}
 
 		if (isInteractive && !json) {
-			// Render table if single result
-			logger.log(
-				renderToString(
-					<Static items={response}>
-						{(result) => {
-							// batch results
-							if (!Array.isArray(result)) {
-								const { results, query } = result;
-
-								if (Array.isArray(results) && results.length > 0) {
-									const shortQuery = shorten(query, 48);
-									return (
-										<>
-											{shortQuery ? <Text dimColor>{shortQuery}</Text> : null}
-											<Table data={results}></Table>
-										</>
-									);
-								}
-							}
-						}}
-					</Static>
-				)
-			);
+			for (const result of response) {
+				if (!Array.isArray(result)) {
+					const { results, query } = result;
+
+					if (Array.isArray(results) && results.length > 0) {
+						const shortQuery = shorten(query, 48);
+						if (shortQuery) {
+							logger.log(chalk.dim(shortQuery));
+						}
+						logger.table(
+							results.map((r) =>
+								Object.fromEntries(
+									Object.entries(r).map(([k, v]) => [k, String(v)])
+								)
+							)
+						);
+					}
+				}
+			}
 		} else {
 			// set loggerLevel back to what it was before to actually output the JSON in stdout
 			logger.loggerLevel = existingLogLevel;

diff --git a/packages/wrangler/src/d1/info.tsx → packages/wrangler/src/d1/info.ts b/packages/wrangler/src/d1/info.tsx → packages/wrangler/src/d1/info.ts
@@ -1,11 +1,9 @@
-import Table from "ink-table";
 import prettyBytes from "pretty-bytes";
 import { printWranglerBanner } from "..";
 import { fetchGraphqlResult } from "../cfetch";
 import { withConfig } from "../config";
 import { logger } from "../logger";
 import { requireAuth } from "../user";
-import { renderToString } from "../utils/render";
 import { getDatabaseByNameOrBinding, getDatabaseInfoFromId } from "./utils";
 import type {
 	CommonYargsArgv,
@@ -132,7 +130,7 @@ export const Handler = withConfig<HandlerOptions>(
 				) {
 					value = v.toLocaleString();
 				} else {
-					value = v;
+					value = String(v);
 				}
 				return {
 					[db.binding || ""]: k,
@@ -141,7 +139,7 @@ export const Handler = withConfig<HandlerOptions>(
 			});
 
 			await printWranglerBanner();
-			logger.log(renderToString(<Table data={data} />));
+			logger.table(data);
 		}
 	}
 );
diff --git a/packages/wrangler/src/d1/list.tsx → packages/wrangler/src/d1/list.ts b/packages/wrangler/src/d1/list.tsx → packages/wrangler/src/d1/list.ts
@@ -1,10 +1,8 @@
-import Table from "ink-table";
 import { printWranglerBanner } from "..";
 import { fetchResult } from "../cfetch";
 import { withConfig } from "../config";
 import { logger } from "../logger";
 import { requireAuth } from "../user";
-import { renderToString } from "../utils/render";
 import type {
 	CommonYargsArgv,
 	StrictYargsOptionsToInterface,
@@ -29,7 +27,13 @@ export const Handler = withConfig<HandlerOptions>(
 			logger.log(JSON.stringify(dbs, null, 2));
 		} else {
 			await printWranglerBanner();
-			logger.log(renderToString(<Table data={dbs}></Table>));
+			logger.table(
+				dbs.map((db) =>
+					Object.fromEntries(
+						Object.entries(db).map(([k, v]) => [k, String(v ?? "")])
+					)
+				)
+			);
 		}
 	}
 );

diff --git a/...ages/wrangler/src/d1/migrations/apply.tsx → packages/wrangler/src/d1/migrations/apply.ts b/...ages/wrangler/src/d1/migrations/apply.tsx → packages/wrangler/src/d1/migrations/apply.ts
@@ -1,8 +1,6 @@
 import assert from "node:assert";
 import fs from "node:fs";
 import path from "path";
-import { Box, Text } from "ink";
-import Table from "ink-table";
 import { printWranglerBanner } from "../..";
 import { withConfig } from "../../config";
 import { confirm } from "../../dialogs";
@@ -11,7 +9,6 @@ import { CI } from "../../is-ci";
 import isInteractive from "../../is-interactive";
 import { logger } from "../../logger";
 import { requireAuth } from "../../user";
-import { renderToString } from "../../utils/render";
 import { createBackup } from "../backups";
 import { DEFAULT_MIGRATION_PATH, DEFAULT_MIGRATION_TABLE } from "../constants";
 import { executeSql } from "../execute";
@@ -112,17 +109,12 @@ export const ApplyHandler = withConfig<ApplyHandlerOptions>(
 			});
 
 		if (unappliedMigrations.length === 0) {
-			logger.log(renderToString(<Text>✅ No migrations to apply!</Text>));
+			logger.log("✅ No migrations to apply!");
 			return;
 		}
-		logger.log(
-			renderToString(
-				<Box flexDirection="column">
-					<Text>Migrations to be applied:</Text>
-					<Table data={unappliedMigrations} columns={["name"]}></Table>
-				</Box>
-			)
-		);
+		logger.log("Migrations to be applied:");
+		logger.table(unappliedMigrations.map((m) => ({ name: m.name })));
+
 		const ok = await confirm(
 			`About to apply ${unappliedMigrations.length} migration(s)
 Your database may not be available to serve requests during the migration, continue?`
@@ -140,7 +132,7 @@ Your database may not be available to serve requests during the migration, conti
 			const accountId = await requireAuth(config);
 			const dbInfo = await getDatabaseInfoFromId(accountId, databaseInfo?.uuid);
 			if (dbInfo.version === "alpha") {
-				logger.log(renderToString(<Text>🕒 Creating backup...</Text>));
+				logger.log("🕒 Creating backup...");
 				await createBackup(accountId, databaseInfo.uuid);
 			}
 		}
@@ -202,24 +194,14 @@ Your database may not be available to serve requests during the migration, conti
 
 			migration.status = success ? "✅" : "❌";
 
-			logger.log(
-				renderToString(
-					<Box flexDirection="column">
-						<Table data={unappliedMigrations} columns={["name", "status"]} />
-						{errorNotes.length > 0 && (
-							<Box flexDirection="column">
-								<Text>&nbsp;</Text>
-								<Text>
-									❌ Migration {migration.name}{" "}
-									{errorNotes.length > 0
-										? "failed with the following errors:"
-										: ""}
-								</Text>
-							</Box>
-						)}
-					</Box>
-				)
+			logger.table(
+				unappliedMigrations.map((m) => ({ name: m.name, status: m.status }))
 			);
+			if (errorNotes.length > 0) {
+				logger.error(
+					`Migration ${migration.name} failed with the following errors:`
+				);
+			}
 
 			if (errorNotes.length > 0) {
 				throw new UserError(

diff --git a/...ges/wrangler/src/d1/migrations/create.tsx → ...ages/wrangler/src/d1/migrations/create.ts b/...ges/wrangler/src/d1/migrations/create.tsx → ...ages/wrangler/src/d1/migrations/create.ts
@@ -1,11 +1,9 @@
 import fs from "node:fs";
 import path from "path";
-import { Box, Text } from "ink";
 import { printWranglerBanner } from "../..";
 import { withConfig } from "../../config";
 import { UserError } from "../../errors";
 import { logger } from "../../logger";
-import { renderToString } from "../../utils/render";
 import { DEFAULT_MIGRATION_PATH } from "../constants";
 import { Database } from "../options";
 import { getDatabaseInfoFromConfig } from "../utils";
@@ -55,20 +53,9 @@ export const CreateHandler = withConfig<CreateHandlerOptions>(
 			`-- Migration number: ${nextMigrationNumber} \t ${new Date().toISOString()}\n`
 		);
 
-		logger.log(
-			renderToString(
-				<Box flexDirection="column">
-					<Text>
-						✅ Successfully created Migration &apos;{newMigrationName}&apos;!
-					</Text>
-					<Text>&nbsp;</Text>
-					<Text>The migration is available for editing here</Text>
-					<Text>
-						{migrationsPath}/{newMigrationName}
-					</Text>
-				</Box>
-			)
-		);
+		logger.log(`✅ Successfully created Migration '${newMigrationName}'!\n`);
+		logger.log(`The migration is available for editing here`);
+		logger.log(`${migrationsPath}/{newMigrationName}`);
 	}
 );