feat: add-ons from the command line

jherr · jherr · commit 8c8dd83a83f3 · 2025-02-24T17:15:09.000-08:00
diff --git a/src/add-ons.ts b/src/add-ons.ts
@@ -2,8 +2,10 @@ import { readFile } from 'node:fs/promises'
 import { existsSync, readdirSync, statSync } from 'node:fs'
 import { resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
+import chalk from 'chalk'
 
-import type { Framework } from './types.js'
+import { DEFAULT_FRAMEWORK } from './constants.js'
+import type { CliOptions, Framework } from './types.js'
 
 type BooleanVariable = {
   name: string
@@ -140,3 +142,15 @@ export async function finalizeAddOns(
 
   return [...finalAddOnIDs].map((id) => addOns.find((a) => a.id === id)!)
 }
+
+export async function listAddOns(options: CliOptions) {
+  const mode =
+    options.template === 'file-router' ? 'file-router' : 'code-router'
+  const addOns = await getAllAddOns(
+    options.framework || DEFAULT_FRAMEWORK,
+    mode,
+  )
+  for (const addOn of addOns) {
+    console.log(`${chalk.bold(addOn.id)}: ${addOn.description}`)
+  }
+}
diff --git a/src/cli.ts b/src/cli.ts
@@ -1,10 +1,12 @@
 import { Command, InvalidArgumentError } from 'commander'
 import { intro, log } from '@clack/prompts'
+import chalk from 'chalk'
 
 import { createApp } from './create-app.js'
 import { normalizeOptions, promptForOptions } from './options.js'
 import { SUPPORTED_PACKAGE_MANAGERS } from './package-manager.js'
 
+import { getAllAddOns, listAddOns } from './add-ons.js'
 import { DEFAULT_FRAMEWORK, SUPPORTED_FRAMEWORKS } from './constants.js'
 import type { PackageManager } from './package-manager.js'
 import type { CliOptions, Framework } from './types.js'
@@ -63,26 +65,44 @@ export function cli() {
       },
     )
     .option('--tailwind', 'add Tailwind CSS', false)
-    .option('--add-ons', 'pick from a list of available add-ons', false)
+    .option<Array<string> | boolean>(
+      '--add-ons [...add-ons]',
+      'pick from a list of available add-ons (comma separated list)',
+      (value: string) => {
+        let addOns: Array<string> | boolean = !!value
+        if (typeof value === 'string') {
+          addOns = value.split(',').map((addon) => addon.trim())
+        }
+        return addOns
+      },
+    )
+    .option('--list-add-ons', 'list all available add-ons', false)
     .action(async (projectName: string, options: CliOptions) => {
-      try {
-        const cliOptions = {
-          projectName,
-          ...options,
-        } as CliOptions
-        let finalOptions = normalizeOptions(cliOptions)
-        if (finalOptions) {
-          intro(`Creating a new TanStack app in ${projectName}...`)
-        } else {
-          intro("Let's configure your TanStack application")
-          finalOptions = await promptForOptions(cliOptions)
+      if (options.listAddOns) {
+        await listAddOns(options)
+      } else {
+        try {
+          const cliOptions = {
+            projectName,
+            ...options,
+          } as CliOptions
+
+          let finalOptions = await normalizeOptions(cliOptions)
+          if (finalOptions) {
+            intro(`Creating a new TanStack app in ${projectName}...`)
+          } else {
+            intro("Let's configure your TanStack application")
+            finalOptions = await promptForOptions(cliOptions)
+          }
+          await createApp(finalOptions)
+        } catch (error) {
+          log.error(
+            error instanceof Error
+              ? error.message
+              : 'An unknown error occurred',
+          )
+          process.exit(1)
         }
-        await createApp(finalOptions)
-      } catch (error) {
-        log.error(
-          error instanceof Error ? error.message : 'An unknown error occurred',
-        )
-        process.exit(1)
       }
     })
 
diff --git a/src/create-app.ts b/src/create-app.ts
@@ -268,8 +268,6 @@ export async function createApp(options: Required<Options>) {
   const isAddOnEnabled = (id: string) =>
     options.chosenAddOns.find((a) => a.id === id)
 
-  log.info(`Creating a new TanStack app in '${basename(targetDir)}'...`)
-
   // Make the root directory
   await mkdir(targetDir, { recursive: true })
 
@@ -478,7 +476,7 @@ export async function createApp(options: Required<Options>) {
     } else {
       await templateFile(
         templateDirRouter,
-        './src/main.jsx.ejs',
+        './src/main.tsx.ejs',
         './src/main.jsx',
         {
           routes,
diff --git a/src/options.ts b/src/options.ts
@@ -14,35 +14,47 @@ import {
 } from './package-manager.js'
 import { CODE_ROUTER, DEFAULT_FRAMEWORK, FILE_ROUTER } from './constants.js'
 import { finalizeAddOns, getAllAddOns } from './add-ons.js'
-import type { Variable } from './add-ons.js'
+import type { AddOn, Variable } from './add-ons.js'
 
 import type { CliOptions, Options } from './types.js'
 
 // If all CLI options are provided, use them directly
-export function normalizeOptions(
+export async function normalizeOptions(
   cliOptions: CliOptions,
-): Required<Options> | undefined {
+): Promise<Required<Options> | undefined> {
   if (cliOptions.projectName) {
     const typescript =
       cliOptions.template === 'typescript' ||
       cliOptions.template === 'file-router' ||
       cliOptions.framework === 'solid'
 
-    const tailwind =
+    let tailwind =
       cliOptions.tailwind === undefined
         ? cliOptions.framework === 'solid'
         : cliOptions.tailwind
 
+    let addOns = false
+    let chosenAddOns: Array<AddOn> = []
+    if (Array.isArray(cliOptions.addOns)) {
+      addOns = true
+      chosenAddOns = await finalizeAddOns(
+        cliOptions.framework || DEFAULT_FRAMEWORK,
+        cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
+        cliOptions.addOns,
+      )
+      tailwind = true
+    }
+
     return {
       framework: cliOptions.framework || 'react',
       projectName: cliOptions.projectName,
       typescript,
-      tailwind: !!tailwind,
+      tailwind,
       packageManager: cliOptions.packageManager || DEFAULT_PACKAGE_MANAGER,
       mode: cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
       git: !!cliOptions.git,
-      addOns: !!cliOptions.addOns,
-      chosenAddOns: [],
+      addOns,
+      chosenAddOns,
       variableValues: {},
     }
   }
@@ -206,58 +218,66 @@ export async function promptForOptions(
     options.packageManager = cliOptions.packageManager
   }
 
-  // Select any add-ons
-  const allAddOns = await getAllAddOns(options.framework, options.mode)
-  const addOns = allAddOns.filter((addOn) => addOn.type === 'add-on')
-  let selectedAddOns: Array<string> = []
-  if (options.typescript && cliOptions.addOns && addOns.length > 0) {
-    const value = await multiselect({
-      message: 'What add-ons would you like for your project:',
-      options: addOns.map((addOn) => ({
-        value: addOn.id,
-        label: addOn.name,
-        hint: addOn.description,
-      })),
-      required: false,
-    })
+  options.chosenAddOns = []
+  if (Array.isArray(cliOptions.addOns)) {
+    options.chosenAddOns = await finalizeAddOns(
+      options.framework,
+      options.mode,
+      cliOptions.addOns,
+    )
+    options.tailwind = true
+  } else if (cliOptions.addOns) {
+    // Select any add-ons
+    const allAddOns = await getAllAddOns(options.framework, options.mode)
+    const addOns = allAddOns.filter((addOn) => addOn.type === 'add-on')
+    let selectedAddOns: Array<string> = []
+    if (options.typescript && addOns.length > 0) {
+      const value = await multiselect({
+        message: 'What add-ons would you like for your project:',
+        options: addOns.map((addOn) => ({
+          value: addOn.id,
+          label: addOn.name,
+          hint: addOn.description,
+        })),
+        required: false,
+      })
 
-    if (isCancel(value)) {
-      cancel('Operation cancelled.')
-      process.exit(0)
+      if (isCancel(value)) {
+        cancel('Operation cancelled.')
+        process.exit(0)
+      }
+      selectedAddOns = value
     }
-    selectedAddOns = value
-  }
 
-  // Select any examples
-  const examples = allAddOns.filter((addOn) => addOn.type === 'example')
-  let selectedExamples: Array<string> = []
-  if (options.typescript && cliOptions.addOns && examples.length > 0) {
-    const value = await multiselect({
-      message: 'Would you like any examples?',
-      options: examples.map((addOn) => ({
-        value: addOn.id,
-        label: addOn.name,
-        hint: addOn.description,
-      })),
-      required: false,
-    })
+    // Select any examples
+    const examples = allAddOns.filter((addOn) => addOn.type === 'example')
+    let selectedExamples: Array<string> = []
+    if (options.typescript && examples.length > 0) {
+      const value = await multiselect({
+        message: 'Would you like any examples?',
+        options: examples.map((addOn) => ({
+          value: addOn.id,
+          label: addOn.name,
+          hint: addOn.description,
+        })),
+        required: false,
+      })
 
-    if (isCancel(value)) {
-      cancel('Operation cancelled.')
-      process.exit(0)
+      if (isCancel(value)) {
+        cancel('Operation cancelled.')
+        process.exit(0)
+      }
+      selectedExamples = value
     }
-    selectedExamples = value
-  }
 
-  if (selectedAddOns.length > 0 || selectedExamples.length > 0) {
-    options.chosenAddOns = await finalizeAddOns(
-      options.framework,
-      options.mode,
-      [...selectedAddOns, ...selectedExamples],
-    )
-    options.tailwind = true
-  } else {
-    options.chosenAddOns = []
+    if (selectedAddOns.length > 0 || selectedExamples.length > 0) {
+      options.chosenAddOns = await finalizeAddOns(
+        options.framework,
+        options.mode,
+        [...selectedAddOns, ...selectedExamples],
+      )
+      options.tailwind = true
+    }
   }
 
   // Collect variables
diff --git a/src/types.ts b/src/types.ts
@@ -24,5 +24,6 @@ export interface CliOptions {
   packageManager?: PackageManager
   projectName?: string
   git?: boolean
-  addOns?: boolean
+  addOns?: Array<string> | boolean
+  listAddOns?: boolean
 }
diff --git a/templates/react/file-router/src/routes/__root.tsx.ejs b/templates/react/file-router/src/routes/__root.tsx.ejs
@@ -1,7 +1,7 @@
 import { createRootRoute, Outlet<% if (addOnEnabled.start) { %>
 ,HeadContent, Scripts<% } %> } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-<% if (tailwind) { %>
+<% if (addOns.length) { %>
 import Header from '../components/Header'
 <% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider')) { %>
 import <%= integration.name %> from "../<%= integration.path %>";
@@ -39,7 +39,9 @@ export const Route = createRootRoute({
   <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
     <<%= integration.name %>>
   <% } %>
+  <% if (addOns.length) { %>
     <Header />  
+  <% } %>
       <Outlet />
       <TanStackRouterDevtools />
       <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>

Original file line number	Diff line number	Diff line change
`@@ -24,5 +24,6 @@ export interface CliOptions {`
`24`	`24`	`packageManager?: PackageManager`
`25`	`25`	`projectName?: string`
`26`	`26`	`git?: boolean`
`27`		`- addOns?: boolean`
	`27`	`+ addOns?: Array<string> \| boolean`
	`28`	`+ listAddOns?: boolean`
`28`	`29`	`}`