Refactoring the mega file

Author: jherr

.gitignore

@@ -6,6 +6,5 @@ app-js-tw
 app-ts-tw
 app-fr
 app-fr-tw
+my-app
 .DS_Store
-# Local Netlify folder
-.netlify

README.md

@@ -1,46 +1,96 @@
 # Create React App for TanStack Router
 
-This CLI applications builds Tanstack Start applications that are the functional equivalent of [Create React App](https://create-react-app.dev/).
+This CLI applications builds Tanstack Router applications that are the functional equivalent of [Create React App](https://create-react-app.dev/).
 
 To help accelerate the migration away from `create-react-app` we created the `create-tsrouter-app` CLI which is a plug-n-play replacement for CRA.
 
-Instead of:
+## Quick Start
+
+To maintain compatability with `create-react-app` you can build a new application by running:
+
+| Command                                                        | Description                 |
+| -------------------------------------------------------------- | --------------------------- |
+| `npx create-tsrouter-app@latest my-app`                        | Create a new app            |
+| `npx create-tsrouter-app@latest my-app --template file-router` | Create a new file based app |
+| `npx create-tsrouter-app@latest my-app --template typescript`  | Create a new TypeScript app |
+| `npx create-tsrouter-app@latest my-app --template javascript`  | Create a new JavaScript app |
+| `npx create-tsrouter-app@latest my-app --tailwind`             | Add Tailwind CSS support    |
+
+If you don't specify a project name, the CLI will walk you through an interactive setup process:
 
 ```bash
-npx create-react-app my-app
+npx create-tsrouter-app@latest
 ```
 
-You can now run:
+This will start an interactive CLI that guides you through the setup process, allowing you to choose:
+
+- Project Name
+- Router Type (File-based or Code-based routing)
+- TypeScript support
+- Tailwind CSS integration
+- Package manager
+- Git initialization
+
+## Command Line Options
+
+You can also use command line flags to specify your preferences directly:
 
 ```bash
-npx create-tsrouter-app@latest my-app
+npx create-tsrouter-app@latest my-app --template file-router --tailwind --package-manager pnpm
 ```
 
-Instead of using:
+Available options:
+
+- `--template <type>`: Choose between `file-router`, `typescript`, or `javascript`
+- `--tailwind`: Enable Tailwind CSS
+- `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, or `bun`)
+- `--no-git`: Do not initialize a git repository
+
+When using flags, the CLI will display which options were provided and only prompt for the remaining choices.
+
+## Features
+
+What you'll get is a Vite application that uses TanStack Router. All the files will still be in the same place as in CRA, but you'll get a fully functional Router setup under in `app/main.tsx`.
+
+`create-tsrouter-app` is everything you loved about CRA but implemented with modern tools and best practices, on top of the popular TanStack set of libraries. Which includes [@tanstack/react-query](https://tanstack.com/query/latest) and [@tanstack/react-router](https://tanstack.com/router/latest).
+
+## Routing Options
+
+### File Based Routing (Recommended)
+
+File Based Routing is the default option when using the interactive CLI. The location of the home page will be `app/routes/index.tsx`. This approach provides a more intuitive and maintainable way to structure your routes.
+
+To explicitly choose File Based Routing, use:
 
 ```bash
-npx create-react-app my-app --template typescript
+npx create-tsrouter-app@latest my-app --template file-router
 ```
 
-To create a SPA application using TypeScript. You can now run:
+### Code Based Routing
+
+If you prefer traditional code-based routing, you can select it in the interactive CLI or specify it by using either the `typescript` or `javascript` template:
 
 ```bash
 npx create-tsrouter-app@latest my-app --template typescript
 ```
 
-What you'll get is a Vite application that uses TanStack Router. All the files will still be in the same place as in CRA, but you'll get a fully functional Router setup under in `app/main.tsx`.
+## Additional Configuration
 
-`create-tsrouter-app` is everything you loved about CRA but implemented with modern tools and best practices, on top of the popular TanStack set of libraries. Which includes [@tanstack/react-query](https://tanstack.com/query/latest) and [@tanstack/react-router](https://tanstack.com/router/latest).
+### TypeScript
+
+- File Based Routing always uses TypeScript
+- For Code Based Routing, you can choose between TypeScript and JavaScript
+- Enable TypeScript explicitly with `--template typescript`
 
-If you want Tailwind then just add `--tailwind` and that will automatically configure [Tailwind V4](https://tailwindcss.com/).
+### Tailwind CSS
 
-You can also specify your preferred package manager with `--package-manager` such as `npm`, `bun`, `yarn`, or `pnpm`.
+Enable Tailwind CSS either through the interactive CLI or by adding the `--tailwind` flag. This will automatically configure [Tailwind V4](https://tailwindcss.com/).
 
-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) be found in the generated `README.md` for your project.
+### Package Manager
 
-## File Based Routing
+Choose your preferred package manager (`npm`, `bun`, `yarn`, or `pnpm`) either through the interactive CLI or using the `--package-manager` flag.
 
-By default `create-tsrouter-app` will create a Code Based Routing application. If you want to use File Based Routing then you can specify `--template file-router`. The location of the home page will be `app/routes/index.tsx`.
+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.
 
 # Contributing
 

package.json

@@ -1,13 +1,13 @@
 {
   "name": "create-tsrouter-app",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",
   "scripts": {
     "build": "tsc",
     "start": "tsc && node dist/index.js",
-    "test": "echo \"Error: no test specified\" && exit 0",
+    "test": "npm run test:lint",
     "cipublish": "node scripts/publish.js",
     "test:lint": "eslint ./src"
   },

src/add-ons.ts

@@ -0,0 +1,85 @@
+import { readFile } from 'node:fs/promises'
+import { existsSync, readdirSync, statSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+export type AddOn = {
+  id: string
+  name: string
+  description: string
+  link: string
+  main?: Array<{
+    imports: Array<string>
+    initialize: Array<string>
+    providers: Array<{
+      open: string
+      close: string
+    }>
+  }>
+  layout?: {
+    imports: Array<string>
+    jsx: string
+  }
+  routes: Array<{
+    url: string
+    name: string
+  }>
+  userUi?: {
+    import: string
+    jsx: string
+  }
+  directory: string
+  packageAdditions: {
+    dependencies?: Record<string, string>
+    devDependencies?: Record<string, string>
+    scripts?: Record<string, string>
+  }
+  command?: {
+    command: string
+    args?: Array<string>
+  }
+  readme?: string
+  phase: 'setup' | 'add-on'
+  shadcnComponents?: Array<string>
+  warning?: string
+}
+
+function isDirectory(path: string): boolean {
+  return statSync(path).isDirectory()
+}
+
+export async function getAllAddOns(): Promise<Array<AddOn>> {
+  const addOnsBase = fileURLToPath(
+    new URL('../templates/add-ons', import.meta.url),
+  )
+
+  const addOns: Array<AddOn> = []
+
+  for (const dir of await readdirSync(addOnsBase).filter((file) =>
+    isDirectory(resolve(addOnsBase, file)),
+  )) {
+    const filePath = resolve(addOnsBase, dir, 'info.json')
+    const fileContent = await readFile(filePath, 'utf-8')
+
+    let packageAdditions: Record<string, string> = {}
+    if (existsSync(resolve(addOnsBase, dir, 'package.json'))) {
+      packageAdditions = JSON.parse(
+        await readFile(resolve(addOnsBase, dir, 'package.json'), 'utf-8'),
+      )
+    }
+
+    let readme: string | undefined
+    if (existsSync(resolve(addOnsBase, dir, 'README.md'))) {
+      readme = await readFile(resolve(addOnsBase, dir, 'README.md'), 'utf-8')
+    }
+
+    addOns.push({
+      id: dir,
+      ...JSON.parse(fileContent),
+      directory: resolve(addOnsBase, dir),
+      packageAdditions,
+      readme,
+    })
+  }
+  return addOns
+}

src/cli.ts

@@ -0,0 +1,71 @@
+import { Command, InvalidArgumentError } from 'commander'
+import { log } from '@clack/prompts'
+
+import { createApp } from './create-app.js'
+import { normalizeOptions, promptForOptions } from './options.js'
+import { SUPPORTED_PACKAGE_MANAGERS } from './package-manager.js'
+
+import type { PackageManager } from './package-manager.js'
+import type { CliOptions } from './types.js'
+
+export function cli() {
+  const program = new Command()
+
+  program
+    .name('create-tsrouter-app')
+    .description('CLI to create a new TanStack application')
+    .argument('[project-name]', 'name of the project')
+    .option('--no-git', 'do not create a git repository')
+    .option<'typescript' | 'javascript' | 'file-router'>(
+      '--template <type>',
+      'project template (typescript, javascript, file-router)',
+      (value) => {
+        if (
+          value !== 'typescript' &&
+          value !== 'javascript' &&
+          value !== 'file-router'
+        ) {
+          throw new InvalidArgumentError(
+            `Invalid template: ${value}. Only the following are allowed: typescript, javascript, file-router`,
+          )
+        }
+        return value
+      },
+    )
+    .option<PackageManager>(
+      `--package-manager <${SUPPORTED_PACKAGE_MANAGERS.join('|')}>`,
+      `Explicitly tell the CLI to use this package manager`,
+      (value) => {
+        if (!SUPPORTED_PACKAGE_MANAGERS.includes(value as PackageManager)) {
+          throw new InvalidArgumentError(
+            `Invalid package manager: ${value}. Only the following are allowed: ${SUPPORTED_PACKAGE_MANAGERS.join(
+              ', ',
+            )}`,
+          )
+        }
+        return value as PackageManager
+      },
+    )
+    .option('--tailwind', 'add Tailwind CSS', false)
+    .option('--add-ons', 'pick from a list of available add-ons', false)
+    .action(async (projectName: string, options: CliOptions) => {
+      try {
+        const cliOptions = {
+          projectName,
+          ...options,
+        } as CliOptions
+        let finalOptions = normalizeOptions(cliOptions)
+        if (!finalOptions) {
+          finalOptions = await promptForOptions(cliOptions)
+        }
+        await createApp(finalOptions)
+      } catch (error) {
+        log.error(
+          error instanceof Error ? error.message : 'An unknown error occurred',
+        )
+        process.exit(1)
+      }
+    })
+
+  program.parse()
+}

src/constants.ts

@@ -0,0 +1,2 @@
+export const CODE_ROUTER = 'code-router'
+export const FILE_ROUTER = 'file-router'