Skip to content

Commit 5520852

Browse files
jherrjherr
committed
feat: finalizing 0.4.0 features
1 parent 3d3f4ba commit 5520852

File tree

5 files changed

+150
-38
lines changed

5 files changed

+150
-38
lines changed

‎README.md

Lines changed: 39 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ To help accelerate the migration away from `create-react-app` we created the `cr
88

99
To maintain compatability with `create-react-app` you can build a new application by running:
1010

11-
| Command | Description |
12-
| -------------------------------------------------------------- | --------------------------- |
13-
| `npx create-tsrouter-app@latest my-app` | Create a new app |
14-
| `npx create-tsrouter-app@latest my-app --template file-router` | Create a new file based app |
15-
| `npx create-tsrouter-app@latest my-app --template typescript` | Create a new TypeScript app |
16-
| `npx create-tsrouter-app@latest my-app --template javascript` | Create a new JavaScript app |
17-
| `npx create-tsrouter-app@latest my-app --tailwind` | Add Tailwind CSS support |
11+
| Command | Description |
12+
| -------------------------------------------------------------------------------- | ------------------------------------------------- |
13+
| `npx create-tsrouter-app@latest my-app` | Create a new app |
14+
| `npx create-tsrouter-app@latest my-app --template file-router` | Create a new file based app |
15+
| `npx create-tsrouter-app@latest my-app --template typescript` | Create a new TypeScript app using the Code Router |
16+
| `npx create-tsrouter-app@latest my-app --tailwind` | Add Tailwind CSS support |
17+
| `npx create-tsrouter-app@latest my-app --framework solid` | Create a Solid app |
18+
| `npx create-tsrouter-app@latest my-app --framework solid --template file-router` | Create a Solid app with file-router |
1819

1920
If you don't specify a project name, the CLI will walk you through an interactive setup process:
2021

@@ -45,6 +46,7 @@ Available options:
4546
- `--tailwind`: Enable Tailwind CSS
4647
- `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, `bun`, or `deno`)
4748
- `--no-git`: Do not initialize a git repository
49+
- `--add-ons`: Enable add-on selection or specify add-ons to install
4850

4951
When using flags, the CLI will display which options were provided and only prompt for the remaining choices.
5052

@@ -92,6 +94,36 @@ Choose your preferred package manager (`npm`, `bun`, `yarn`, `pnpm`, or `deno`)
9294

9395
Extensive documentation on using the TanStack Router, migrating to a File Base Routing approach, as well as integrating [@tanstack/react-query](https://tanstack.com/query/latest) and [@tanstack/store](https://tanstack.com/store/latest) can be found in the generated `README.md` for your project.
9496

97+
## Add-ons (experimental)
98+
99+
You can enable add-on selection:
100+
101+
```bash
102+
npx create-tsrouter-app@latest --add-ons
103+
```
104+
105+
This will prompt you to select the add-ons you want to enable during application creation.
106+
107+
You can enable specific add-ons directly by adding a comma separated list of add-on names to the `--add-ons` flag. For example:
108+
109+
```bash
110+
npx create-tsrouter-app@latest my-app --add-ons shadcn,tanstack-query
111+
```
112+
113+
You can get a list of all available add-ons by running:
114+
115+
```bash
116+
npx create-tsrouter-app@latest --list-add-ons
117+
```
118+
119+
This will display a list of all available add-ons for React that are compatible with the Code Router.
120+
121+
```bash
122+
npx create-tsrouter-app@latest --list-add-ons --framework solid --template file-router
123+
```
124+
125+
Will get you a list of all available add-ons for Solid that are compatible with the File Router.
126+
95127
# Contributing
96128

97129
Check out the [Contributing](CONTRIBUTING.md) guide.

‎src/cli.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import { Command, InvalidArgumentError } from 'commander'
22
import { intro, log } from '@clack/prompts'
3-
import chalk from 'chalk'
43

54
import { createApp } from './create-app.js'
65
import { normalizeOptions, promptForOptions } from './options.js'
76
import { SUPPORTED_PACKAGE_MANAGERS } from './package-manager.js'
87

9-
import { getAllAddOns, listAddOns } from './add-ons.js'
8+
import runServer from './mcp.js'
9+
import { listAddOns } from './add-ons.js'
1010
import { DEFAULT_FRAMEWORK, SUPPORTED_FRAMEWORKS } from './constants.js'
11+
1112
import type { PackageManager } from './package-manager.js'
1213
import type { CliOptions, Framework } from './types.js'
13-
import runServer from './mcp.js'
1414

1515
export function cli() {
1616
const program = new Command()

‎src/mcp.ts

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const tanStackReactAddOns = [
5050
},
5151
]
5252

53-
server.tool('listTanStackReactAddOns', {}, async () => {
53+
server.tool('listTanStackReactAddOns', {}, () => {
5454
return {
5555
content: [{ type: 'text', text: JSON.stringify(tanStackReactAddOns) }],
5656
}
@@ -119,6 +119,86 @@ server.tool(
119119
},
120120
)
121121

122+
const tanStackSolidAddOns = [
123+
{
124+
id: 'solid-ui',
125+
description: 'Enable integration of the Solid UI component library',
126+
},
127+
{
128+
id: 'form',
129+
description: 'Form handling library',
130+
},
131+
{
132+
id: 'sentry',
133+
description: 'Enable Sentry error tracking',
134+
},
135+
{
136+
id: 'store',
137+
description: 'Enable the TanStack Store state management library',
138+
},
139+
{
140+
id: 'tanstack-query',
141+
description: 'Enable TanStack Query for data fetching',
142+
},
143+
]
144+
145+
server.tool('listTanStackSolidAddOns', {}, () => {
146+
return {
147+
content: [{ type: 'text', text: JSON.stringify(tanStackSolidAddOns) }],
148+
}
149+
})
150+
151+
server.tool(
152+
'createTanStackSolidApplication',
153+
{
154+
projectName: z
155+
.string()
156+
.describe(
157+
'The package.json module name of the application (will also be the directory name)',
158+
),
159+
cwd: z.string().describe('The directory to create the application in'),
160+
addOns: z
161+
.array(z.enum(['solid-ui', 'form', 'sentry', 'store', 'tanstack-query']))
162+
.describe('The IDs of the add-ons to install'),
163+
},
164+
async ({ projectName, addOns, cwd }) => {
165+
try {
166+
process.chdir(cwd)
167+
const chosenAddOns = await finalizeAddOns(
168+
'solid',
169+
'file-router',
170+
addOns as unknown as Array<string>,
171+
)
172+
await createApp(
173+
{
174+
projectName: projectName.replace(/^\//, './'),
175+
framework: 'solid',
176+
typescript: true,
177+
tailwind: true,
178+
packageManager: 'pnpm',
179+
mode: 'file-router',
180+
addOns: true,
181+
chosenAddOns,
182+
git: true,
183+
variableValues: {},
184+
},
185+
{
186+
silent: true,
187+
},
188+
)
189+
return {
190+
content: [{ type: 'text', text: 'Application created successfully' }],
191+
}
192+
} catch (error) {
193+
return {
194+
content: [
195+
{ type: 'text', text: `Error creating application: ${error}` },
196+
],
197+
}
198+
}
199+
},
200+
)
201+
122202
export default async function runServer() {
123203
const transport = new StdioServerTransport()
124204
await server.connect(transport)

‎src/options.ts

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ export async function normalizeOptions(
2828
cliOptions.template === 'file-router' ||
2929
cliOptions.framework === 'solid'
3030

31-
let tailwind =
32-
cliOptions.tailwind === undefined
33-
? cliOptions.framework === 'solid'
34-
: cliOptions.tailwind
31+
let tailwind = !!cliOptions.tailwind
32+
if (cliOptions.framework === 'solid') {
33+
tailwind = true
34+
}
3535

3636
let addOns = false
3737
let chosenAddOns: Array<AddOn> = []
@@ -250,25 +250,25 @@ export async function promptForOptions(
250250
}
251251

252252
// Select any examples
253-
const examples = allAddOns.filter((addOn) => addOn.type === 'example')
254-
let selectedExamples: Array<string> = []
255-
if (options.typescript && examples.length > 0) {
256-
const value = await multiselect({
257-
message: 'Would you like any examples?',
258-
options: examples.map((addOn) => ({
259-
value: addOn.id,
260-
label: addOn.name,
261-
hint: addOn.description,
262-
})),
263-
required: false,
264-
})
253+
const selectedExamples: Array<string> = []
254+
// const examples = allAddOns.filter((addOn) => addOn.type === 'example')
255+
// if (options.typescript && examples.length > 0) {
256+
// const value = await multiselect({
257+
// message: 'Would you like any examples?',
258+
// options: examples.map((addOn) => ({
259+
// value: addOn.id,
260+
// label: addOn.name,
261+
// hint: addOn.description,
262+
// })),
263+
// required: false,
264+
// })
265265

266-
if (isCancel(value)) {
267-
cancel('Operation cancelled.')
268-
process.exit(0)
269-
}
270-
selectedExamples = value
271-
}
266+
// if (isCancel(value)) {
267+
// cancel('Operation cancelled.')
268+
// process.exit(0)
269+
// }
270+
// selectedExamples = value
271+
// }
272272

273273
if (selectedAddOns.length > 0 || selectedExamples.length > 0) {
274274
options.chosenAddOns = await finalizeAddOns(

‎templates/solid/file-router/src/routes/__root.tsx.ejs

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,11 @@ import { Outlet, createRootRouteWithContext } from '@tanstack/solid-router'
22
// import { TanStackRouterDevtools } from '@tanstack/router-devtools'<% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider')) { %>
33
import <%= integration.name %> from "../<%= integration.path %>";
44
<% } %>
5-
65
<% if (addOnEnabled['solid-ui']) { %>
76
import "@fontsource/inter"
87
<% } %>
9-
10-
import Header from '../components/Header'
11-
8+
<% if (addOns.length) { %>import Header from '../components/Header'
9+
<% } %>
1210
<% for(const addOn of addOns) {
1311
for(const init of addOn.main?.initialize || []) { %>
1412
<%- init %>
@@ -25,7 +23,9 @@ function RootComponent() {
2523
<<%= integration.name %>>
2624
<% } %>
2725
28-
<Header />
26+
<% if (addOns.length) { %>
27+
<Header />
28+
<% } %>
2929
<Outlet />
3030
{/* <TanStackRouterDevtools /> */}
3131

0 commit comments

Comments
 (0)