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

package/dist/create-app.js

@@ -26,7 +26,7 @@ function createCopyFiles(targetDir) {
     };
 }
 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,6 +41,7 @@ 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);
@@ -197,7 +198,6 @@ export async function createApp(options) {
     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');
     }
@@ -207,15 +207,6 @@ export async function createApp(options) {
             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 +259,35 @@ export async function createApp(options) {
             s.stop(`Installed shadcn components`);
         }
     }
+    const routes = [];
+    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 = [];
     for (const addOn of options.chosenAddOns) {
         if (addOn.warning) {

package/dist/options.js

@@ -71,6 +71,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?',

package/package.json

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

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

package/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?',

package/templates/react/add-on/form/assets/src/routes/{demo.form.tsx → 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,
+})
+<% } %>

package/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": [
     {

package/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",

package/templates/react/add-on/store/assets/src/routes/{demo.store.page1.tsx → 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,
+})
+<% } %>

package/templates/react/add-on/store/assets/src/routes/{demo.store.page2.tsx → 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,
+})
+<% } %>
+  

package/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",

package/templates/react/code-router/src/main.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,

package/templates/solid/add-on/form/assets/src/routes/{demo.form.tsx → demo.form.tsx.ejs}

@@ -1,4 +1,4 @@
-import { createFileRoute } from '@tanstack/solid-router'
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/solid-router'
 
 import { createForm } from '@tanstack/solid-form'
 import type { AnyFieldApi } from '@tanstack/solid-form'
@@ -7,10 +7,13 @@ interface FieldInfoProps {
   field: AnyFieldApi
 }
 
+<% if (codeRouter) { %>
+import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
 export const Route = createFileRoute('/demo/form')({
   component: FormExample,
 })
-
+<% } %>
 function FieldInfo(props: FieldInfoProps) {
   return (
     <>
@@ -134,3 +137,12 @@ function FormExample() {
     </div>
   )
 }
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/form',
+  component: FormExample,
+  getParentRoute: () => parentRoute,
+})
+<% } %>
+    

package/templates/solid/add-on/form/info.json

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

package/templates/solid/add-on/store/assets/src/routes/{demo.store.page1.tsx → demo.store.page1.tsx.ejs}

@@ -1,13 +1,17 @@
-import { createFileRoute } from '@tanstack/solid-router'
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/solid-router'
 import { useStore } from '@tanstack/solid-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: DemoStorePage1,
 })
+<% } %>
 
-function App() {
+function DemoStorePage1() {
   const count = useStore(store, (state) => state.count)
 
   return (
@@ -27,4 +31,11 @@ function App() {
   )
 }
 
-export default App
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/store/page1',
+  component: DemoStorePage1,
+  getParentRoute: () => parentRoute,
+})
+<% } %>
+    

package/templates/solid/add-on/store/assets/src/routes/{demo.store.page2.tsx → demo.store.page2.tsx.ejs}

@@ -1,13 +1,16 @@
-import { createFileRoute } from '@tanstack/solid-router'
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/solid-router'
 import { useStore } from '@tanstack/solid-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: DemoStorePage2,
 })
-
-function App() {
+<% } %>
+function DemoStorePage2() {
   const count = useStore(store, (state) => state.count)
 
   return (
@@ -27,4 +30,10 @@ function App() {
   )
 }
 
-export default App
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/store/page2',
+  component: DemoStorePage2,
+  getParentRoute: () => parentRoute,
+})
+<% } %>

package/templates/solid/add-on/store/info.json

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

package/templates/solid/code-router/src/main.tsx.ejs

@@ -7,6 +7,10 @@ import {
 } from "@tanstack/solid-router";
 // import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 import { render } from 'solid-js/web'
+<% for(const route of routes) { %>import <%= route.name %> from "<%= route.path %>";
+<% } %><% if (routes.length > 0) { %>
+import Header from "./components/Header";
+<% } %>
 
 import "./styles.css";
 
@@ -15,6 +19,7 @@ import App from "./App.<%= jsx %>";
 const rootRoute = createRootRoute({
   component: () => (
     <>
+      <% if (routes.length > 0) { %><Header /><% } %>
       <Outlet />
       {/* <TanStackRouterDevtools /> */}
     </>
@@ -27,7 +32,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,