Skip to content

Commit b219296

Browse files
authored
Rip out react from all non-dev flows (#7065)
1 parent 760e43f commit b219296

23 files changed

+119
-214
lines changed

.changeset/rotten-apples-happen.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"wrangler": patch
3+
---
4+
5+
Internal refactor to remove React/ink from all non-`wrangler dev` flows

packages/wrangler/src/__tests__/d1/create.test.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,10 @@ describe("create", () => {
6565
Created your new D1 database.
6666
6767
[[d1_databases]]
68-
binding = \\"DB\\" # i.e. available in your Worker on env.DB
68+
binding = \\"DB\\"
6969
database_name = \\"test\\"
70-
database_id = \\"51e7c314-456e-4167-b6c3-869ad188fc23\\""
70+
database_id = \\"51e7c314-456e-4167-b6c3-869ad188fc23\\"
71+
"
7172
`);
7273
});
7374
});

packages/wrangler/src/d1/backups.tsx renamed to packages/wrangler/src/d1/backups.ts

+14-16
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import fs from "node:fs/promises";
22
import * as path from "path";
3-
import Table from "ink-table";
43
import { fetchResult } from "../cfetch";
54
import { performApiFetch } from "../cfetch/internal";
65
import { withConfig } from "../config";
76
import { logger } from "../logger";
87
import { requireAuth } from "../user";
9-
import { renderToString } from "../utils/render";
108
import { formatBytes, formatTimeAgo } from "./formatTimeAgo";
119
import { Name } from "./options";
1210
import { getDatabaseByNameOrBinding } from "./utils";
@@ -32,13 +30,13 @@ export const ListHandler = withConfig<ListHandlerOptions>(
3230
);
3331

3432
const backups: Backup[] = await listBackups(accountId, db.uuid);
35-
logger.log(
36-
renderToString(
37-
<Table
38-
data={backups}
39-
columns={["created_at", "id", "num_tables", "size"]}
40-
></Table>
41-
)
33+
logger.table(
34+
backups.map((b) => ({
35+
created_at: b.created_at,
36+
id: b.id,
37+
num_tables: String(b.num_tables),
38+
size: b.size ?? "",
39+
}))
4240
);
4341
}
4442
);
@@ -95,13 +93,13 @@ export const CreateHandler = withConfig<CreateHandlerOptions>(
9593
);
9694

9795
const backup: Backup = await createBackup(accountId, db.uuid);
98-
logger.log(
99-
renderToString(
100-
<Table
101-
data={[backup]}
102-
columns={["created_at", "id", "num_tables", "size", "state"]}
103-
></Table>
104-
)
96+
logger.table(
97+
[backup].map((b) => ({
98+
created_at: b.created_at,
99+
id: b.id,
100+
num_tables: String(b.num_tables),
101+
size: b.size ?? "",
102+
}))
105103
);
106104
}
107105
);

packages/wrangler/src/d1/create.tsx renamed to packages/wrangler/src/d1/create.ts

+16-22
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import { Box, Text } from "ink";
1+
import TOML from "@iarna/toml";
22
import { printWranglerBanner } from "..";
33
import { fetchResult } from "../cfetch";
44
import { withConfig } from "../config";
55
import { UserError } from "../errors";
66
import { logger } from "../logger";
77
import { requireAuth } from "../user";
8-
import { renderToString } from "../utils/render";
98
import { LOCATION_CHOICES } from "./constants";
109
import type {
1110
CommonYargsArgv,
@@ -63,26 +62,21 @@ export const Handler = withConfig<HandlerOptions>(
6362
}
6463

6564
logger.log(
66-
renderToString(
67-
<Box flexDirection="column">
68-
<Text>
69-
✅ Successfully created DB &apos;{db.name}&apos;
70-
{db.created_in_region
71-
? ` in region ${db.created_in_region}`
72-
: location
73-
? ` using primary location hint ${location}`
74-
: ``}
75-
</Text>
76-
<Text>Created your new D1 database.</Text>
77-
<Text>&nbsp;</Text>
78-
<Text>[[d1_databases]]</Text>
79-
<Text>
80-
binding = &quot;DB&quot; # i.e. available in your Worker on env.DB
81-
</Text>
82-
<Text>database_name = &quot;{db.name}&quot;</Text>
83-
<Text>database_id = &quot;{db.uuid}&quot;</Text>
84-
</Box>
85-
)
65+
`✅ Successfully created DB '${db.name}'${
66+
db.created_in_region
67+
? ` in region ${db.created_in_region}`
68+
: location
69+
? ` using primary location hint ${location}`
70+
: ``
71+
}`
72+
);
73+
logger.log("Created your new D1 database.\n");
74+
logger.log(
75+
TOML.stringify({
76+
d1_databases: [
77+
{ binding: "DB", database_name: db.name, database_id: db.uuid },
78+
],
79+
})
8680
);
8781
}
8882
);

packages/wrangler/src/d1/execute.tsx renamed to packages/wrangler/src/d1/execute.ts

+20-27
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,10 @@ import assert from "node:assert";
33
import path from "node:path";
44
import { spinnerWhile } from "@cloudflare/cli/interactive";
55
import chalk from "chalk";
6-
import { Static, Text } from "ink";
7-
import Table from "ink-table";
86
import md5File from "md5-file";
97
import { Miniflare } from "miniflare";
108
import { fetch } from "undici";
11-
import { printWranglerBanner } from "../";
9+
import { printWranglerBanner } from "..";
1210
import { fetchResult } from "../cfetch";
1311
import { readConfig } from "../config";
1412
import { getLocalPersistencePath } from "../dev/get-local-persistence-path";
@@ -18,7 +16,6 @@ import { logger } from "../logger";
1816
import { APIError, readFileSync } from "../parse";
1917
import { readableRelative } from "../paths";
2018
import { requireAuth } from "../user";
21-
import { renderToString } from "../utils/render";
2219
import * as options from "./options";
2320
import splitSqlQuery from "./splitter";
2421
import { getDatabaseByNameOrBinding, getDatabaseInfoFromConfig } from "./utils";
@@ -144,29 +141,25 @@ export const Handler = async (args: HandlerOptions): Promise<void> => {
144141
}
145142

146143
if (isInteractive && !json) {
147-
// Render table if single result
148-
logger.log(
149-
renderToString(
150-
<Static items={response}>
151-
{(result) => {
152-
// batch results
153-
if (!Array.isArray(result)) {
154-
const { results, query } = result;
155-
156-
if (Array.isArray(results) && results.length > 0) {
157-
const shortQuery = shorten(query, 48);
158-
return (
159-
<>
160-
{shortQuery ? <Text dimColor>{shortQuery}</Text> : null}
161-
<Table data={results}></Table>
162-
</>
163-
);
164-
}
165-
}
166-
}}
167-
</Static>
168-
)
169-
);
144+
for (const result of response) {
145+
if (!Array.isArray(result)) {
146+
const { results, query } = result;
147+
148+
if (Array.isArray(results) && results.length > 0) {
149+
const shortQuery = shorten(query, 48);
150+
if (shortQuery) {
151+
logger.log(chalk.dim(shortQuery));
152+
}
153+
logger.table(
154+
results.map((r) =>
155+
Object.fromEntries(
156+
Object.entries(r).map(([k, v]) => [k, String(v)])
157+
)
158+
)
159+
);
160+
}
161+
}
162+
}
170163
} else {
171164
// set loggerLevel back to what it was before to actually output the JSON in stdout
172165
logger.loggerLevel = existingLogLevel;

packages/wrangler/src/d1/info.tsx renamed to packages/wrangler/src/d1/info.ts

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import Table from "ink-table";
21
import prettyBytes from "pretty-bytes";
32
import { printWranglerBanner } from "..";
43
import { fetchGraphqlResult } from "../cfetch";
54
import { withConfig } from "../config";
65
import { logger } from "../logger";
76
import { requireAuth } from "../user";
8-
import { renderToString } from "../utils/render";
97
import { getDatabaseByNameOrBinding, getDatabaseInfoFromId } from "./utils";
108
import type {
119
CommonYargsArgv,
@@ -132,7 +130,7 @@ export const Handler = withConfig<HandlerOptions>(
132130
) {
133131
value = v.toLocaleString();
134132
} else {
135-
value = v;
133+
value = String(v);
136134
}
137135
return {
138136
[db.binding || ""]: k,
@@ -141,7 +139,7 @@ export const Handler = withConfig<HandlerOptions>(
141139
});
142140

143141
await printWranglerBanner();
144-
logger.log(renderToString(<Table data={data} />));
142+
logger.table(data);
145143
}
146144
}
147145
);

packages/wrangler/src/d1/list.tsx renamed to packages/wrangler/src/d1/list.ts

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import Table from "ink-table";
21
import { printWranglerBanner } from "..";
32
import { fetchResult } from "../cfetch";
43
import { withConfig } from "../config";
54
import { logger } from "../logger";
65
import { requireAuth } from "../user";
7-
import { renderToString } from "../utils/render";
86
import type {
97
CommonYargsArgv,
108
StrictYargsOptionsToInterface,
@@ -29,7 +27,13 @@ export const Handler = withConfig<HandlerOptions>(
2927
logger.log(JSON.stringify(dbs, null, 2));
3028
} else {
3129
await printWranglerBanner();
32-
logger.log(renderToString(<Table data={dbs}></Table>));
30+
logger.table(
31+
dbs.map((db) =>
32+
Object.fromEntries(
33+
Object.entries(db).map(([k, v]) => [k, String(v ?? "")])
34+
)
35+
)
36+
);
3337
}
3438
}
3539
);

packages/wrangler/src/d1/migrations/apply.tsx renamed to packages/wrangler/src/d1/migrations/apply.ts

+12-30
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import assert from "node:assert";
22
import fs from "node:fs";
33
import path from "path";
4-
import { Box, Text } from "ink";
5-
import Table from "ink-table";
64
import { printWranglerBanner } from "../..";
75
import { withConfig } from "../../config";
86
import { confirm } from "../../dialogs";
@@ -11,7 +9,6 @@ import { CI } from "../../is-ci";
119
import isInteractive from "../../is-interactive";
1210
import { logger } from "../../logger";
1311
import { requireAuth } from "../../user";
14-
import { renderToString } from "../../utils/render";
1512
import { createBackup } from "../backups";
1613
import { DEFAULT_MIGRATION_PATH, DEFAULT_MIGRATION_TABLE } from "../constants";
1714
import { executeSql } from "../execute";
@@ -112,17 +109,12 @@ export const ApplyHandler = withConfig<ApplyHandlerOptions>(
112109
});
113110

114111
if (unappliedMigrations.length === 0) {
115-
logger.log(renderToString(<Text>✅ No migrations to apply!</Text>));
112+
logger.log("✅ No migrations to apply!");
116113
return;
117114
}
118-
logger.log(
119-
renderToString(
120-
<Box flexDirection="column">
121-
<Text>Migrations to be applied:</Text>
122-
<Table data={unappliedMigrations} columns={["name"]}></Table>
123-
</Box>
124-
)
125-
);
115+
logger.log("Migrations to be applied:");
116+
logger.table(unappliedMigrations.map((m) => ({ name: m.name })));
117+
126118
const ok = await confirm(
127119
`About to apply ${unappliedMigrations.length} migration(s)
128120
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
140132
const accountId = await requireAuth(config);
141133
const dbInfo = await getDatabaseInfoFromId(accountId, databaseInfo?.uuid);
142134
if (dbInfo.version === "alpha") {
143-
logger.log(renderToString(<Text>🕒 Creating backup...</Text>));
135+
logger.log("🕒 Creating backup...");
144136
await createBackup(accountId, databaseInfo.uuid);
145137
}
146138
}
@@ -202,24 +194,14 @@ Your database may not be available to serve requests during the migration, conti
202194

203195
migration.status = success ? "✅" : "❌";
204196

205-
logger.log(
206-
renderToString(
207-
<Box flexDirection="column">
208-
<Table data={unappliedMigrations} columns={["name", "status"]} />
209-
{errorNotes.length > 0 && (
210-
<Box flexDirection="column">
211-
<Text>&nbsp;</Text>
212-
<Text>
213-
❌ Migration {migration.name}{" "}
214-
{errorNotes.length > 0
215-
? "failed with the following errors:"
216-
: ""}
217-
</Text>
218-
</Box>
219-
)}
220-
</Box>
221-
)
197+
logger.table(
198+
unappliedMigrations.map((m) => ({ name: m.name, status: m.status }))
222199
);
200+
if (errorNotes.length > 0) {
201+
logger.error(
202+
`Migration ${migration.name} failed with the following errors:`
203+
);
204+
}
223205

224206
if (errorNotes.length > 0) {
225207
throw new UserError(

packages/wrangler/src/d1/migrations/create.tsx renamed to packages/wrangler/src/d1/migrations/create.ts

+3-16
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import fs from "node:fs";
22
import path from "path";
3-
import { Box, Text } from "ink";
43
import { printWranglerBanner } from "../..";
54
import { withConfig } from "../../config";
65
import { UserError } from "../../errors";
76
import { logger } from "../../logger";
8-
import { renderToString } from "../../utils/render";
97
import { DEFAULT_MIGRATION_PATH } from "../constants";
108
import { Database } from "../options";
119
import { getDatabaseInfoFromConfig } from "../utils";
@@ -55,20 +53,9 @@ export const CreateHandler = withConfig<CreateHandlerOptions>(
5553
`-- Migration number: ${nextMigrationNumber} \t ${new Date().toISOString()}\n`
5654
);
5755

58-
logger.log(
59-
renderToString(
60-
<Box flexDirection="column">
61-
<Text>
62-
✅ Successfully created Migration &apos;{newMigrationName}&apos;!
63-
</Text>
64-
<Text>&nbsp;</Text>
65-
<Text>The migration is available for editing here</Text>
66-
<Text>
67-
{migrationsPath}/{newMigrationName}
68-
</Text>
69-
</Box>
70-
)
71-
);
56+
logger.log(`✅ Successfully created Migration '${newMigrationName}'!\n`);
57+
logger.log(`The migration is available for editing here`);
58+
logger.log(`${migrationsPath}/{newMigrationName}`);
7259
}
7360
);
7461

0 commit comments

Comments
 (0)