feat: code router now supports add ons with routes

Author: jherr

src/create-app.ts

@@ -50,6 +50,7 @@ function createTemplateFile(
     templateDir: string,
     file: string,
     targetFileName?: string,
+    extraTemplateValues?: Record<string, any>,
   ) {
     const templateValues = {
       packageManager: options.packageManager,
@@ -68,6 +69,7 @@ function createTemplateFile(
         {},
       ),
       addOns: options.chosenAddOns,
+      ...extraTemplateValues,
     }
 
     const template = await readFile(resolve(templateDir, file), 'utf-8')
@@ -300,11 +302,6 @@ export async function createApp(options: Required<Options>) {
 
   // 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',
@@ -330,19 +327,6 @@ export async function createApp(options: Required<Options>) {
     }
   }
 
-  // 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) {
@@ -426,6 +410,54 @@ export async function createApp(options: Required<Options>) {
     }
   }
 
+  const routes: Array<{
+    path: string
+    name: string
+  }> = []
+  if (existsSync(resolve(targetDir, 'src/routes'))) {
+    for (const file of readdirSync(resolve(targetDir, 'src/routes'))) {
+      const name = file.replace(/\.tsx?|\.jsx?/, '')
+      routes.push({
+        path: `./routes/${name}`,
+        name: name
+          .split('.')
+          .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+          .join(''),
+      })
+    }
+  }
+
+  // Create the main entry point
+  if (!isAddOnEnabled('start')) {
+    if (options.typescript) {
+      await templateFile(
+        templateDirRouter,
+        './src/main.tsx.ejs',
+        './src/main.tsx',
+        {
+          routes,
+        },
+      )
+    } else {
+      await templateFile(
+        templateDirRouter,
+        './src/main.jsx.ejs',
+        './src/main.jsx',
+        {
+          routes,
+        },
+      )
+    }
+  }
+
+  if (routes.length > 0) {
+    await templateFile(
+      templateDirBase,
+      './src/components/Header.tsx.ejs',
+      './src/components/Header.tsx',
+    )
+  }
+
   const warnings: Array<string> = []
   for (const addOn of options.chosenAddOns) {
     if (addOn.warning) {

src/options.ts

@@ -99,6 +99,10 @@ export async function promptForOptions(
     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?',

templates/react/add-on/form/assets/src/routes/demo.form.tsx renamed to templates/react/add-on/form/assets/src/routes/demo.form.tsx.ejs

@@ -1,11 +1,15 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
 import { useForm } from '@tanstack/react-form'
 
+<% if (codeRouter) { %>
+  import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
 export const Route = createFileRoute('/demo/form')({
-  component: App,
+  component: FormDemo,
 })
+<% } %>
 
-export default function App() {
+function FormDemo() {
   const form = useForm({
     defaultValues: {
       fullName: '',
@@ -48,3 +52,11 @@ export default function App() {
     </div>
   )
 }
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/form',
+  component: FormDemo,
+  getParentRoute: () => parentRoute,
+})
+<% } %>

templates/react/add-on/form/info.json

@@ -2,7 +2,7 @@
   "name": "Form",
   "description": "TansStack Form",
   "phase": "add-on",
-  "templates": ["file-router"],
+  "templates": ["file-router", "code-router"],
   "link": "https://tanstack.com/form/latest",
   "routes": [
     {

templates/react/add-on/sentry/info.json

@@ -3,7 +3,7 @@
   "phase": "setup",
   "description": "Add Sentry for error monitoring, tracing, and session replays (requires Start).",
   "link": "https://sentry.com/",
-  "templates": ["file-router"],
+  "templates": ["file-router", "code-router"],
   "routes": [
     {
       "url": "/demo/sentry/testing",

templates/react/add-on/store/assets/src/routes/demo.store.page1.tsx renamed to templates/react/add-on/store/assets/src/routes/demo.store.page1.tsx.ejs

@@ -1,13 +1,15 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
 import { useStore } from '@tanstack/react-store'
 
 import { store } from '../lib/demo-store'
-
+<% if (codeRouter) { %>
+  import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
 export const Route = createFileRoute('/demo/store/page1')({
-  component: App,
+  component: StorePage1,
 })
-
-function App() {
+<% } %>
+function StorePage1() {
   const count = useStore(store, (state) => state.count)
 
   return (
@@ -27,4 +29,10 @@ function App() {
   )
 }
 
-export default App
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/store/page1',
+  component: StorePage1,
+  getParentRoute: () => parentRoute,
+})
+<% } %>

templates/react/add-on/store/assets/src/routes/demo.store.page2.tsx renamed to templates/react/add-on/store/assets/src/routes/demo.store.page2.tsx.ejs

@@ -1,13 +1,15 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
 import { useStore } from '@tanstack/react-store'
 
 import { store } from '../lib/demo-store'
-
+<% if (codeRouter) { %>
+import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
 export const Route = createFileRoute('/demo/store/page2')({
-  component: App,
+  component: StorePage2,
 })
-
-function App() {
+<% } %>
+function StorePage2() {
   const count = useStore(store, (state) => state.count)
 
   return (
@@ -27,4 +29,11 @@ function App() {
   )
 }
 
-export default App
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/store/page2',
+  component: StorePage2,
+  getParentRoute: () => parentRoute,
+})
+<% } %>
+  

templates/react/add-on/store/info.json

@@ -3,7 +3,7 @@
   "description": "Add TanStack Store to your application.",
   "phase": "add-on",
   "link": "https://tanstack.com/store/latest",
-  "templates": ["file-router"],
+  "templates": ["file-router", "code-router"],
   "routes": [
     {
       "url": "/demo/store/page1",

templates/react/file-router/src/components/Header.tsx.ejs renamed to templates/react/base/src/components/Header.tsx.ejs

@@ -8,6 +8,10 @@ import {
   createRouter,
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+<% for(const route of routes) { %>import <%= route.name %> from "<%= route.path %>";
+<% } %><% if (routes.length > 0) { %>
+import Header from "./components/Header";
+<% } %>
 
 import "./styles.css";
 import reportWebVitals from "./reportWebVitals.<%= js %>";
@@ -17,6 +21,7 @@ import App from "./App.<%= jsx %>";
 const rootRoute = createRootRoute({
   component: () => (
     <>
+      <% if (routes.length > 0) { %><Header /><% } %>
       <Outlet />
       <TanStackRouterDevtools />
     </>
@@ -29,7 +34,7 @@ const indexRoute = createRoute({
   component: App,
 });
 
-const routeTree = rootRoute.addChildren([indexRoute]);
+const routeTree = rootRoute.addChildren([indexRoute<%= routes.map(route => `, ${route.name}(rootRoute)`).join('') %>]);
 
 const router = createRouter({
   routeTree,