adding solid support

Author: jherr

.gitignore

@@ -1,10 +1,5 @@
 node_modules
 dist
-app-js
-app-ts
-app-js-tw
-app-ts-tw
-app-fr
-app-fr-tw
+app-*
 my-app
 .DS_Store

src/add-ons.ts

@@ -3,6 +3,8 @@ import { existsSync, readdirSync, statSync } from 'node:fs'
 import { resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
+import type { Framework } from './types.js'
+
 type BooleanVariable = {
   name: string
   default: boolean
@@ -74,12 +76,14 @@ function isDirectory(path: string): boolean {
   return statSync(path).isDirectory()
 }
 
-export async function getAllAddOns(): Promise<Array<AddOn>> {
+export async function getAllAddOns(
+  framework: Framework,
+): Promise<Array<AddOn>> {
   const addOns: Array<AddOn> = []
 
   for (const type of ['add-on', 'example']) {
     const addOnsBase = fileURLToPath(
-      new URL(`../templates/${type}`, import.meta.url),
+      new URL(`../templates/${framework}/${type}`, import.meta.url),
     )
 
     for (const dir of await readdirSync(addOnsBase).filter((file) =>
@@ -116,11 +120,12 @@ export async function getAllAddOns(): Promise<Array<AddOn>> {
 
 // Turn the list of chosen add-on IDs into a final list of add-ons by resolving dependencies
 export async function finalizeAddOns(
+  framework: Framework,
   chosenAddOnIDs: Array<string>,
 ): Promise<Array<AddOn>> {
   const finalAddOnIDs = new Set(chosenAddOnIDs)
 
-  const addOns = await getAllAddOns()
+  const addOns = await getAllAddOns(framework)
 
   for (const addOnID of finalAddOnIDs) {
     const addOn = addOns.find((a) => a.id === addOnID)

src/cli.ts

@@ -5,8 +5,9 @@ import { createApp } from './create-app.js'
 import { normalizeOptions, promptForOptions } from './options.js'
 import { SUPPORTED_PACKAGE_MANAGERS } from './package-manager.js'
 
+import { DEFAULT_FRAMEWORK, SUPPORTED_FRAMEWORKS } from './constants.js'
 import type { PackageManager } from './package-manager.js'
-import type { CliOptions } from './types.js'
+import type { CliOptions, Framework } from './types.js'
 
 export function cli() {
   const program = new Command()
@@ -16,6 +17,21 @@ export function cli() {
     .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<Framework>(
+      '--framework <type>',
+      'project framework (solid, react)',
+      (value) => {
+        if (!SUPPORTED_FRAMEWORKS.includes(value as Framework)) {
+          throw new InvalidArgumentError(
+            `Invalid framework: ${value}. Only the following are allowed: ${SUPPORTED_FRAMEWORKS.join(
+              ', ',
+            )}`,
+          )
+        }
+        return value as Framework
+      },
+      DEFAULT_FRAMEWORK,
+    )
     .option<'typescript' | 'javascript' | 'file-router'>(
       '--template <type>',
       'project template (typescript, javascript, file-router)',

src/constants.ts

@@ -1,2 +1,7 @@
+import type { Framework } from './types.js'
+
 export const CODE_ROUTER = 'code-router'
 export const FILE_ROUTER = 'file-router'
+
+export const SUPPORTED_FRAMEWORKS: Array<Framework> = ['solid', 'react']
+export const DEFAULT_FRAMEWORK: Framework = 'react'

src/create-app.ts

@@ -219,10 +219,13 @@ async function copyFilesRecursively(
 
 export async function createApp(options: Required<Options>) {
   const templateDirBase = fileURLToPath(
-    new URL('../templates/base', import.meta.url),
+    new URL(`../templates/${options.framework}/base`, import.meta.url),
   )
   const templateDirRouter = fileURLToPath(
-    new URL(`../templates/${options.mode}`, import.meta.url),
+    new URL(
+      `../templates/${options.framework}/${options.mode}`,
+      import.meta.url,
+    ),
   )
   const targetDir = resolve(process.cwd(), options.projectName)
 
@@ -302,11 +305,13 @@ export async function createApp(options: Required<Options>) {
       './src/App.tsx.ejs',
       options.typescript ? undefined : './src/App.jsx',
     )
-    await templateFile(
-      templateDirBase,
-      './src/App.test.tsx.ejs',
-      options.typescript ? undefined : './src/App.test.jsx',
-    )
+    if (options.framework === 'react') {
+      await templateFile(
+        templateDirBase,
+        './src/App.test.tsx.ejs',
+        options.typescript ? undefined : './src/App.test.jsx',
+      )
+    }
   }
 
   // Create the main entry point
@@ -323,7 +328,7 @@ export async function createApp(options: Required<Options>) {
   }
 
   // Setup the main, reportWebVitals and index.html files
-  if (!isAddOnEnabled('start')) {
+  if (!isAddOnEnabled('start') && options.framework === 'react') {
     if (options.typescript) {
       await templateFile(templateDirBase, './src/reportWebVitals.ts.ejs')
     } else {
@@ -333,6 +338,8 @@ export async function createApp(options: Required<Options>) {
         './src/reportWebVitals.js',
       )
     }
+  }
+  if (!isAddOnEnabled('start')) {
     await templateFile(templateDirBase, './index.html.ejs')
   }
 

src/options.ts

@@ -12,7 +12,7 @@ import {
   SUPPORTED_PACKAGE_MANAGERS,
   getPackageManager,
 } from './package-manager.js'
-import { CODE_ROUTER, FILE_ROUTER } from './constants.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'
 
@@ -25,12 +25,19 @@ export function normalizeOptions(
   if (cliOptions.projectName) {
     const typescript =
       cliOptions.template === 'typescript' ||
-      cliOptions.template === 'file-router'
+      cliOptions.template === 'file-router' ||
+      cliOptions.framework === 'solid'
+
+    const tailwind =
+      cliOptions.tailwind === undefined
+        ? cliOptions.framework === 'solid'
+        : cliOptions.tailwind
 
     return {
+      framework: cliOptions.framework || 'react',
       projectName: cliOptions.projectName,
       typescript,
-      tailwind: !!cliOptions.tailwind,
+      tailwind: !!tailwind,
       packageManager: cliOptions.packageManager || DEFAULT_PACKAGE_MANAGER,
       mode: cliOptions.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
       git: !!cliOptions.git,
@@ -86,6 +93,12 @@ export async function promptForOptions(
 ): Promise<Required<Options>> {
   const options = {} as Required<Options>
 
+  options.framework = cliOptions.framework || DEFAULT_FRAMEWORK
+  if (options.framework === 'solid') {
+    options.typescript = true
+    options.tailwind = true
+  }
+
   if (!cliOptions.projectName) {
     const value = await text({
       message: 'What would you like to name your project?',
@@ -151,7 +164,7 @@ export async function promptForOptions(
   }
 
   // Tailwind selection
-  if (cliOptions.tailwind === undefined) {
+  if (cliOptions.tailwind === undefined && options.framework === 'react') {
     const tailwind = await confirm({
       message: 'Would you like to use Tailwind CSS?',
       initialValue: true,
@@ -162,7 +175,7 @@ export async function promptForOptions(
     }
     options.tailwind = tailwind
   } else {
-    options.tailwind = cliOptions.tailwind
+    options.tailwind = options.framework === 'solid' || !!cliOptions.tailwind
   }
 
   // Package manager selection
@@ -190,44 +203,54 @@ export async function promptForOptions(
   }
 
   // Select any add-ons
-  if (options.mode === FILE_ROUTER && cliOptions.addOns) {
-    const addOns = await getAllAddOns()
-
-    const selectedAddOns = await multiselect({
+  const allAddOns = await getAllAddOns(options.framework)
+  const addOns = allAddOns.filter((addOn) => addOn.type === 'add-on')
+  let selectedAddOns: Array<string> = []
+  if (options.mode === FILE_ROUTER && cliOptions.addOns && addOns.length > 0) {
+    const value = await multiselect({
       message: 'What add-ons would you like for your project:',
-      options: addOns
-        .filter((addOn) => addOn.type === 'add-on')
-        .map((addOn) => ({
-          value: addOn.id,
-          label: addOn.name,
-          hint: addOn.description,
-        })),
+      options: addOns.map((addOn) => ({
+        value: addOn.id,
+        label: addOn.name,
+        hint: addOn.description,
+      })),
       required: false,
     })
 
     if (isCancel(selectedAddOns)) {
       cancel('Operation cancelled.')
       process.exit(0)
     }
+    selectedAddOns = value as Array<string>
+  }
 
-    const selectedExamples = await multiselect({
+  // Select any examples
+  const examples = allAddOns.filter((addOn) => addOn.type === 'example')
+  let selectedExamples: Array<string> = []
+  if (
+    options.mode === FILE_ROUTER &&
+    cliOptions.addOns &&
+    examples.length > 0
+  ) {
+    const value = await multiselect({
       message: 'Would you like any examples?',
-      options: addOns
-        .filter((addOn) => addOn.type === 'example')
-        .map((addOn) => ({
-          value: addOn.id,
-          label: addOn.name,
-          hint: addOn.description,
-        })),
+      options: examples.map((addOn) => ({
+        value: addOn.id,
+        label: addOn.name,
+        hint: addOn.description,
+      })),
       required: false,
     })
 
-    if (isCancel(selectedExamples)) {
+    if (isCancel(value)) {
       cancel('Operation cancelled.')
       process.exit(0)
     }
+    selectedExamples = value
+  }
 
-    options.chosenAddOns = await finalizeAddOns([
+  if (selectedAddOns.length > 0 || selectedExamples.length > 0) {
+    options.chosenAddOns = await finalizeAddOns(options.framework, [
       ...selectedAddOns,
       ...selectedExamples,
     ])

src/types.ts

@@ -2,7 +2,10 @@ import type { AddOn } from './add-ons.js'
 import type { CODE_ROUTER, FILE_ROUTER } from './constants.js'
 import type { PackageManager } from './package-manager.js'
 
+export type Framework = 'solid' | 'react'
+
 export interface Options {
+  framework: Framework
   projectName: string
   typescript: boolean
   tailwind: boolean
@@ -16,6 +19,7 @@ export interface Options {
 
 export interface CliOptions {
   template?: 'typescript' | 'javascript' | 'file-router'
+  framework?: Framework
   tailwind?: boolean
   packageManager?: PackageManager
   projectName?: string