create-tsrouter-app 0.3.0-alpha.7 → 0.3.0-alpha.9

package/dist/add-ons.js

@@ -2,6 +2,8 @@ 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 { DEFAULT_FRAMEWORK } from './constants.js';
 function isDirectory(path) {
     return statSync(path).isDirectory();
 }
@@ -58,3 +60,10 @@ export async function finalizeAddOns(framework, template, chosenAddOnIDs) {
     }
     return [...finalAddOnIDs].map((id) => addOns.find((a) => a.id === id));
 }
+export async function listAddOns(options) {
+    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}`);
+    }
+}

package/dist/cli.js

@@ -3,6 +3,7 @@ import { intro, 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 { listAddOns } from './add-ons.js';
 import { DEFAULT_FRAMEWORK, SUPPORTED_FRAMEWORKS } from './constants.js';
 export function cli() {
     const program = new Command();
@@ -32,26 +33,40 @@ export function cli() {
         return value;
     })
         .option('--tailwind', 'add Tailwind CSS', false)
-        .option('--add-ons', 'pick from a list of available add-ons', false)
+        .option('--add-ons [...add-ons]', 'pick from a list of available add-ons (comma separated list)', (value) => {
+        let addOns = !!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, options) => {
-        try {
-            const cliOptions = {
-                projectName,
-                ...options,
-            };
-            let finalOptions = normalizeOptions(cliOptions);
-            if (finalOptions) {
-                intro(`Creating a new TanStack app in ${projectName}...`);
+        if (options.listAddOns) {
+            await listAddOns(options);
+        }
+        else {
+            try {
+                const cliOptions = {
+                    projectName,
+                    ...options,
+                };
+                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);
             }
-            else {
-                intro("Let's configure your TanStack application");
-                finalOptions = await promptForOptions(cliOptions);
+            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);
         }
     });
     program.parse();

package/dist/create-app.js

@@ -25,8 +25,14 @@ function createCopyFiles(targetDir) {
         }
     };
 }
+function jsSafeName(name) {
+    return name
+        .split(/[^a-zA-Z0-9]/)
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+}
 function createTemplateFile(projectName, options, targetDir) {
-    return async function templateFile(templateDir, file, targetFileName) {
+    return async function templateFile(templateDir, file, targetFileName, extraTemplateValues) {
         const templateValues = {
             packageManager: options.packageManager,
             projectName: projectName,
@@ -41,9 +47,18 @@ function createTemplateFile(projectName, options, targetDir) {
                 return acc;
             }, {}),
             addOns: options.chosenAddOns,
+            ...extraTemplateValues,
         };
         const template = await readFile(resolve(templateDir, file), 'utf-8');
-        let content = render(template, templateValues);
+        let content = '';
+        try {
+            content = render(template, templateValues);
+        }
+        catch (error) {
+            console.error(chalk.red(`EJS error in file ${file}`));
+            console.error(error);
+            process.exit(1);
+        }
         const target = targetFileName ?? file.replace('.ejs', '');
         if (target.endsWith('.ts') || target.endsWith('.tsx')) {
             content = await format(content, {
@@ -163,7 +178,6 @@ export async function createApp(options) {
     const copyFiles = createCopyFiles(targetDir);
     const templateFile = createTemplateFile(options.projectName, options, targetDir);
     const isAddOnEnabled = (id) => 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 });
     // Setup the .vscode directory
@@ -195,27 +209,6 @@ export async function createApp(options) {
     await templateFile(templateDirBase, './vite.config.js.ejs');
     await templateFile(templateDirBase, './src/styles.css.ejs');
     copyFiles(templateDirBase, ['./src/logo.svg']);
-    // Setup the app component. There are four variations, typescript/javascript and tailwind/non-tailwind.
-    if (options.mode === FILE_ROUTER) {
-        await templateFile(templateDirRouter, './src/components/Header.tsx.ejs', './src/components/Header.tsx');
-        await templateFile(templateDirRouter, './src/routes/__root.tsx.ejs', './src/routes/__root.tsx');
-        await templateFile(templateDirBase, './src/App.tsx.ejs', './src/routes/index.tsx');
-    }
-    else {
-        await templateFile(templateDirBase, './src/App.tsx.ejs', options.typescript ? undefined : './src/App.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
-    if (!isAddOnEnabled('start')) {
-        if (options.typescript) {
-            await templateFile(templateDirRouter, './src/main.tsx.ejs');
-        }
-        else {
-            await templateFile(templateDirRouter, './src/main.tsx.ejs', './src/main.jsx');
-        }
-    }
     // Setup the main, reportWebVitals and index.html files
     if (!isAddOnEnabled('start') && options.framework === 'react') {
         if (options.typescript) {
@@ -268,6 +261,77 @@ export async function createApp(options) {
             s.stop(`Installed shadcn components`);
         }
     }
+    const integrations = [];
+    if (existsSync(resolve(targetDir, 'src/integrations'))) {
+        for (const integration of readdirSync(resolve(targetDir, 'src/integrations'))) {
+            const integrationName = jsSafeName(integration);
+            if (existsSync(resolve(targetDir, 'src/integrations', integration, 'layout.tsx'))) {
+                integrations.push({
+                    type: 'layout',
+                    name: `${integrationName}Layout`,
+                    path: `integrations/${integration}/layout`,
+                });
+            }
+            if (existsSync(resolve(targetDir, 'src/integrations', integration, 'provider.tsx'))) {
+                integrations.push({
+                    type: 'provider',
+                    name: `${integrationName}Provider`,
+                    path: `integrations/${integration}/provider`,
+                });
+            }
+            if (existsSync(resolve(targetDir, 'src/integrations', integration, 'header-user.tsx'))) {
+                integrations.push({
+                    type: 'header-user',
+                    name: `${integrationName}Header`,
+                    path: `integrations/${integration}/header-user`,
+                });
+            }
+        }
+    }
+    const routes = [];
+    if (existsSync(resolve(targetDir, 'src/routes'))) {
+        for (const file of readdirSync(resolve(targetDir, 'src/routes'))) {
+            const name = file.replace(/\.tsx?|\.jsx?/, '');
+            const safeRouteName = jsSafeName(name);
+            routes.push({
+                path: `./routes/${name}`,
+                name: safeRouteName,
+            });
+        }
+    }
+    // Create the main entry point
+    if (!isAddOnEnabled('start')) {
+        if (options.typescript) {
+            await templateFile(templateDirRouter, './src/main.tsx.ejs', './src/main.tsx', {
+                routes,
+                integrations,
+            });
+        }
+        else {
+            await templateFile(templateDirRouter, './src/main.tsx.ejs', './src/main.jsx', {
+                routes,
+                integrations,
+            });
+        }
+    }
+    // Setup the app component. There are four variations, typescript/javascript and tailwind/non-tailwind.
+    if (options.mode === FILE_ROUTER) {
+        await templateFile(templateDirRouter, './src/routes/__root.tsx.ejs', './src/routes/__root.tsx', {
+            integrations,
+        });
+        await templateFile(templateDirBase, './src/App.tsx.ejs', './src/routes/index.tsx');
+    }
+    else {
+        await templateFile(templateDirBase, './src/App.tsx.ejs', options.typescript ? undefined : './src/App.jsx');
+        if (options.framework === 'react') {
+            await templateFile(templateDirBase, './src/App.test.tsx.ejs', options.typescript ? undefined : './src/App.test.jsx');
+        }
+    }
+    if (routes.length > 0) {
+        await templateFile(templateDirBase, './src/components/Header.tsx.ejs', './src/components/Header.tsx', {
+            integrations,
+        });
+    }
     const warnings = [];
     for (const addOn of options.chosenAddOns) {
         if (addOn.warning) {

package/dist/options.js

@@ -3,24 +3,31 @@ import { DEFAULT_PACKAGE_MANAGER, SUPPORTED_PACKAGE_MANAGERS, getPackageManager,
 import { CODE_ROUTER, DEFAULT_FRAMEWORK, FILE_ROUTER } from './constants.js';
 import { finalizeAddOns, getAllAddOns } from './add-ons.js';
 // If all CLI options are provided, use them directly
-export function normalizeOptions(cliOptions) {
+export async function normalizeOptions(cliOptions) {
     if (cliOptions.projectName) {
         const typescript = cliOptions.template === 'typescript' ||
             cliOptions.template === 'file-router' ||
             cliOptions.framework === 'solid';
-        const tailwind = cliOptions.tailwind === undefined
+        let tailwind = cliOptions.tailwind === undefined
             ? cliOptions.framework === 'solid'
             : cliOptions.tailwind;
+        let addOns = false;
+        let chosenAddOns = [];
+        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: {},
         };
     }
@@ -71,6 +78,9 @@ export async function promptForOptions(cliOptions) {
         options.typescript = true;
         options.tailwind = true;
     }
+    if (cliOptions.addOns) {
+        options.typescript = true;
+    }
     if (!cliOptions.projectName) {
         const value = await text({
             message: 'What would you like to name your project?',
@@ -172,51 +182,55 @@ export async function promptForOptions(cliOptions) {
     else {
         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 = [];
-    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,
-        });
-        if (isCancel(value)) {
-            cancel('Operation cancelled.');
-            process.exit(0);
-        }
-        selectedAddOns = value;
-    }
-    // Select any examples
-    const examples = allAddOns.filter((addOn) => addOn.type === 'example');
-    let selectedExamples = [];
-    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,
-        });
-        if (isCancel(value)) {
-            cancel('Operation cancelled.');
-            process.exit(0);
-        }
-        selectedExamples = value;
-    }
-    if (selectedAddOns.length > 0 || selectedExamples.length > 0) {
-        options.chosenAddOns = await finalizeAddOns(options.framework, options.mode, [...selectedAddOns, ...selectedExamples]);
+    options.chosenAddOns = [];
+    if (Array.isArray(cliOptions.addOns)) {
+        options.chosenAddOns = await finalizeAddOns(options.framework, options.mode, cliOptions.addOns);
         options.tailwind = true;
     }
-    else {
-        options.chosenAddOns = [];
+    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 = [];
+        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);
+            }
+            selectedAddOns = value;
+        }
+        // Select any examples
+        const examples = allAddOns.filter((addOn) => addOn.type === 'example');
+        let selectedExamples = [];
+        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);
+            }
+            selectedExamples = value;
+        }
+        if (selectedAddOns.length > 0 || selectedExamples.length > 0) {
+            options.chosenAddOns = await finalizeAddOns(options.framework, options.mode, [...selectedAddOns, ...selectedExamples]);
+            options.tailwind = true;
+        }
     }
     // Collect variables
     const variables = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tsrouter-app",
-  "version": "0.3.0-alpha.7",
+  "version": "0.3.0-alpha.9",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",

package/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
@@ -35,26 +37,10 @@ export type AddOn = {
   description: string
   link: string
   templates: Array<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>
@@ -156,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}`)
+  }
+}

package/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)
       }
     })