Skip to content

Commit 2aa401c

Browse files
jherrjherr
committed
chore: ui updates for progress
1 parent 8bda400 commit 2aa401c

File tree

17 files changed

+427
-166
lines changed

17 files changed

+427
-166
lines changed

‎frameworks/react-cra/add-ons/start/info.json

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"link": "https://tanstack.com/start/latest",
66
"modes": ["file-router"],
77
"type": "add-on",
8-
"warning": "TanStack Start is not yet at 1.0 and may change significantly or not be compatible with other add-ons.",
8+
"warning": "TanStack Start is not yet at 1.0 and may change significantly or not be compatible with other add-ons.\nMigrating to Start might require deleting node_modules and re-installing.",
99
"routes": [
1010
{
1111
"url": "/demo/start/server-funcs",
@@ -20,5 +20,11 @@
2020
"jsName": "StartApiRequestDemo"
2121
}
2222
],
23-
"deletedFiles": ["./vite.config.js", "./vite.config.ts", "./index.html"]
23+
"deletedFiles": [
24+
"./vite.config.js",
25+
"./vite.config.ts",
26+
"./index.html",
27+
"./src/main.tsx",
28+
"./src/App.css"
29+
]
2430
}

‎packages/cta-engine/src/add-to-app.ts

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,11 @@ export async function writeFiles(
121121
}
122122
}
123123

124-
environment.startStep('Writing files...')
124+
environment.startStep({
125+
id: 'write-files',
126+
type: 'file',
127+
message: 'Writing add-on files...',
128+
})
125129

126130
for (const file of [...changedFiles, ...overwrittenFiles]) {
127131
const fName = basename(file)
@@ -144,7 +148,7 @@ export async function writeFiles(
144148
}
145149
}
146150

147-
environment.finishStep('Files written')
151+
environment.finishStep('write-files', 'Add-on files written')
148152
}
149153

150154
export async function runNewCommands(
@@ -169,11 +173,13 @@ export async function runNewCommands(
169173
for (const command of output.commands) {
170174
const commandString = [command.command, ...command.args].join(' ')
171175
if (!originalCommands.has(commandString)) {
172-
environment.startStep(
173-
`Running ${formatCommand({ command: command.command, args: command.args })}...`,
174-
)
176+
environment.startStep({
177+
id: 'run-commands',
178+
type: 'command',
179+
message: `Running ${formatCommand({ command: command.command, args: command.args })}...`,
180+
})
175181
await environment.execute(command.command, command.args, cwd)
176-
environment.finishStep(`${command.command} complete`)
182+
environment.finishStep('run-commands', 'Setup commands complete')
177183
}
178184
}
179185
}
@@ -200,7 +206,11 @@ export async function addToApp(
200206
}
201207

202208
environment.intro(`Adding ${addOns.join(', ')} to the project...`)
203-
environment.startStep('Processing new app setup...')
209+
environment.startStep({
210+
id: 'processing-new-app-setup',
211+
type: 'file',
212+
message: 'Processing new app setup...',
213+
})
204214

205215
const newOptions = await createOptions(persistedOptions, addOns, cwd)
206216

@@ -211,13 +221,18 @@ export async function addToApp(
211221

212222
await writeFiles(environment, cwd, output, !!options?.forced)
213223

214-
environment.finishStep('App setup processed')
224+
environment.finishStep(
225+
'processing-new-app-setup',
226+
'Application files written',
227+
)
215228

216229
// Install dependencies
217230

218-
environment.startStep(
219-
`Installing dependencies via ${newOptions.packageManager}...`,
220-
)
231+
environment.startStep({
232+
id: 'install-dependencies',
233+
type: 'package-manager',
234+
message: `Installing dependencies via ${newOptions.packageManager}...`,
235+
})
221236
const s = environment.spinner()
222237
s.start(`Installing dependencies via ${newOptions.packageManager}...`)
223238
await packageManagerInstall(
@@ -226,15 +241,19 @@ export async function addToApp(
226241
newOptions.packageManager,
227242
)
228243
s.stop(`Installed dependencies`)
229-
environment.finishStep('Installed dependencies')
244+
environment.finishStep('install-dependencies', 'Dependencies installed')
230245

231246
// Handle new commands
232247

233248
await runNewCommands(environment, persistedOptions, cwd, output)
234249

235-
environment.startStep('Writing config file...')
250+
environment.startStep({
251+
id: 'write-config-file',
252+
type: 'file',
253+
message: 'Writing config file...',
254+
})
236255
writeConfigFileToEnvironment(environment, newOptions)
237-
environment.finishStep('Config file written')
256+
environment.finishStep('write-config-file', 'Config file written')
238257

239258
environment.outro('Add-ons added successfully!')
240259
}

‎packages/cta-engine/src/create-app.ts

Lines changed: 72 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -38,38 +38,62 @@ async function writeFiles(environment: Environment, options: Options) {
3838
}
3939
}
4040

41-
environment.startStep('Writing framework files...')
41+
environment.startStep({
42+
id: 'write-framework-files',
43+
type: 'file',
44+
message: 'Writing framework files...',
45+
})
4246
await writeFileBundle(options.framework)
43-
environment.finishStep('Framework files written')
47+
environment.finishStep('write-framework-files', 'Framework files written')
4448

49+
let wroteAddonFiles = false
4550
for (const type of ['add-on', 'example', 'toolchain']) {
4651
for (const phase of ['setup', 'add-on', 'example']) {
4752
for (const addOn of options.chosenAddOns.filter(
4853
(addOn) => addOn.phase === phase && addOn.type === type,
4954
)) {
50-
environment.startStep(`Writing ${addOn.name} files...`)
55+
environment.startStep({
56+
id: 'write-addon-files',
57+
type: 'file',
58+
message: `Writing ${addOn.name} files...`,
59+
})
5160
await writeFileBundle(addOn)
52-
environment.finishStep(`${addOn.name} files written`)
61+
wroteAddonFiles = true
5362
}
5463
}
5564
}
65+
if (wroteAddonFiles) {
66+
environment.finishStep('write-addon-files', 'Add-on files written')
67+
}
5668

5769
if (options.starter) {
58-
environment.startStep(`Writing starter files...`)
70+
environment.startStep({
71+
id: 'write-starter-files',
72+
type: 'file',
73+
message: 'Writing starter files...',
74+
})
5975
await writeFileBundle(options.starter)
60-
environment.finishStep(`Starter files written`)
76+
environment.finishStep('write-starter-files', 'Starter files written')
6177
}
6278

63-
environment.startStep(`Writing package.json...`)
79+
environment.startStep({
80+
id: 'write-package-json',
81+
type: 'file',
82+
message: 'Writing package.json...',
83+
})
6484
await environment.writeFile(
6585
resolve(options.targetDir, './package.json'),
6686
JSON.stringify(createPackageJSON(options), null, 2),
6787
)
68-
environment.finishStep(`package.json written`)
88+
environment.finishStep('write-package-json', 'Package.json written')
6989

70-
environment.startStep(`Writing config file...`)
90+
environment.startStep({
91+
id: 'write-config-file',
92+
type: 'file',
93+
message: 'Writing config file...',
94+
})
7195
await writeConfigFileToEnvironment(environment, options)
72-
environment.finishStep(`Config file written`)
96+
environment.finishStep('write-config-file', 'Config file written')
7397
}
7498

7599
async function runCommandsAndInstallDependencies(
@@ -81,41 +105,58 @@ async function runCommandsAndInstallDependencies(
81105
// Setup git
82106
if (options.git) {
83107
s.start(`Initializing git repository...`)
84-
environment.startStep(`Initializing git repository...`)
108+
environment.startStep({
109+
id: 'initialize-git-repository',
110+
type: 'command',
111+
message: 'Initializing git repository...',
112+
})
85113

86114
await setupGit(environment, options.targetDir)
87115

88-
environment.finishStep(`Initialized git repository`)
116+
environment.finishStep(
117+
'initialize-git-repository',
118+
'Initialized git repository',
119+
)
89120
s.stop(`Initialized git repository`)
90121
}
91122

92123
// Install dependencies
93124
s.start(`Installing dependencies via ${options.packageManager}...`)
94-
environment.startStep(
95-
`Installing dependencies via ${options.packageManager}...`,
96-
)
125+
environment.startStep({
126+
id: 'install-dependencies',
127+
type: 'package-manager',
128+
message: `Installing dependencies via ${options.packageManager}...`,
129+
})
97130
await packageManagerInstall(
98131
environment,
99132
options.targetDir,
100133
options.packageManager,
101134
)
102-
environment.finishStep(`Installed dependencies`)
135+
environment.finishStep('install-dependencies', 'Installed dependencies')
103136
s.stop(`Installed dependencies`)
104137

105138
for (const phase of ['setup', 'add-on', 'example']) {
106139
for (const addOn of options.chosenAddOns.filter(
107140
(addOn) =>
108141
addOn.phase === phase && addOn.command && addOn.command.command,
109142
)) {
110-
s.start(`Setting up ${addOn.name}...`)
111-
environment.startStep(`Setting up ${addOn.name}...`)
143+
s.start(`Running commands for ${addOn.name}...`)
144+
const cmd = formatCommand({
145+
command: addOn.command!.command,
146+
args: addOn.command!.args || [],
147+
})
148+
environment.startStep({
149+
id: 'run-commands',
150+
type: 'command',
151+
message: cmd,
152+
})
112153
await environment.execute(
113154
addOn.command!.command,
114155
addOn.command!.args || [],
115156
options.targetDir,
116157
)
117-
environment.finishStep(`${addOn.name} setup complete`)
118-
s.stop(`${addOn.name} setup complete`)
158+
environment.finishStep('run-commands', 'Setup commands complete')
159+
s.stop(`${addOn.name} commands complete`)
119160
}
120161
}
121162

@@ -126,16 +167,24 @@ async function runCommandsAndInstallDependencies(
126167
options.starter.command.command
127168
) {
128169
s.start(`Setting up starter ${options.starter.name}...`)
129-
environment.startStep(`Setting up starter ${options.starter.name}...`)
170+
const cmd = formatCommand({
171+
command: options.starter.command.command,
172+
args: options.starter.command.args || [],
173+
})
174+
environment.startStep({
175+
id: 'run-starter-command',
176+
type: 'command',
177+
message: cmd,
178+
})
130179

131180
await environment.execute(
132181
options.starter.command.command,
133182
options.starter.command.args || [],
134183
options.targetDir,
135184
)
136185

137-
environment.finishStep(`Starter ${options.starter.name} setup complete`)
138-
s.stop(`Starter ${options.starter.name} setup complete`)
186+
environment.finishStep('run-starter-command', 'Starter command complete')
187+
s.stop(`${options.starter.name} commands complete`)
139188
}
140189

141190
await installShadcnComponents(environment, options.targetDir, options)

‎packages/cta-engine/src/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@ export { createSerializedOptions } from './options.js'
5353

5454
export {
5555
StarterCompiledSchema,
56+
StatusEvent,
57+
StatusStepType,
58+
StopEvent,
5659
AddOnCompiledSchema,
5760
AddOnInfoSchema,
5861
IntegrationSchema,

‎packages/cta-engine/src/integrations/shadcn.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,11 @@ export async function installShadcnComponents(
3030
s.start(
3131
`Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`,
3232
)
33-
environment.startStep(
34-
`Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`,
35-
)
33+
environment.startStep({
34+
id: 'install-shadcn-components',
35+
type: 'command',
36+
message: `Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`,
37+
})
3638

3739
await packageManagerExecute(
3840
environment,
@@ -42,7 +44,10 @@ export async function installShadcnComponents(
4244
['add', '--silent', '--yes', ...Array.from(shadcnComponents)],
4345
)
4446

45-
environment.finishStep(`Installed additional shadcn components`)
47+
environment.finishStep(
48+
'install-shadcn-components',
49+
'Shadcn components installed',
50+
)
4651
s.stop(`Installed additional shadcn components`)
4752
}
4853
}

‎packages/cta-engine/src/types.ts

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@ import type { PackageManager } from './package-manager.js'
55

66
export type Mode = typeof CODE_ROUTER | typeof FILE_ROUTER
77

8+
export type StatusStepType =
9+
| 'file'
10+
| 'command'
11+
| 'info'
12+
| 'package-manager'
13+
| 'other'
14+
815
export const AddOnBaseSchema = z.object({
916
id: z.string(),
1017
name: z.string(),
@@ -166,11 +173,24 @@ type FileEnvironment = {
166173
readdir: (path: string) => Promise<Array<string>>
167174
}
168175

176+
export type StatusEvent = {
177+
id: string
178+
type: StatusStepType
179+
message: string
180+
}
181+
export type StopEvent = {
182+
id: string
183+
}
184+
169185
type UIEnvironment = {
170186
appName: string
171187

172-
startStep: (message: string) => void
173-
finishStep: (message: string) => void
188+
startStep: (info: {
189+
id: string
190+
type: StatusStepType
191+
message: string
192+
}) => void
193+
finishStep: (id: string, finalMessage: string) => void
174194

175195
intro: (message: string) => void
176196
outro: (message: string) => void

‎packages/cta-ui/src/components/StatusList.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { StreamItem } from '@/types'
2+
3+
export default function StatusList({
4+
streamItems,
5+
finished,
6+
}: {
7+
streamItems: Array<StreamItem>
8+
finished: boolean
9+
}) {
10+
return (
11+
<div className="flex flex-col gap-2">
12+
{streamItems.map((item, index) => (
13+
<div key={item.id} className="flex items-center gap-2">
14+
<item.icon
15+
className={`w-4 h-4 ${index === streamItems.length - 1 && !finished ? 'text-green-500 animate-spin' : ''}`}
16+
/>
17+
{item.message}
18+
</div>
19+
))}
20+
</div>
21+
)
22+
}

0 commit comments

Comments
 (0)