fix(create): generate minimal scaffolding when declining demo/example pages

wyMinLwin · wyMinLwin · commit cc22c9c16c7a · 2026-04-12T00:23:52.000+07:00
diff --git a/packages/create/src/frameworks/react/project/base/src/components/Footer.tsx.ejs b/packages/create/src/frameworks/react/project/base/src/components/Footer.tsx.ejs
@@ -1,3 +1,4 @@
+<% if (!includeExamples) { ignoreFile(); return; } %>
 export default function Footer() {
   const year = new Date().getFullYear()
 
diff --git a/packages/create/src/frameworks/react/project/base/src/components/Header.tsx.ejs b/packages/create/src/frameworks/react/project/base/src/components/Header.tsx.ejs
@@ -1,3 +1,4 @@
+<% if (!includeExamples) { ignoreFile(); return; } %>
 import { Link } from '@tanstack/react-router'
 <% for (const integration of integrations.filter((i) => i.type === 'header-user')) { %>import <%= integration.jsName %> from '<%= relativePath(integration.path) %>'
 <% } %>import ThemeToggle from './ThemeToggle'
diff --git a/packages/create/src/frameworks/react/project/base/src/components/ThemeToggle.tsx.ejs b/packages/create/src/frameworks/react/project/base/src/components/ThemeToggle.tsx.ejs
@@ -1,3 +1,4 @@
+<% if (!includeExamples) { ignoreFile(); return; } %>
 import { useEffect, useState } from 'react'
 
 type ThemeMode = 'light' | 'dark' | 'auto'
diff --git a/packages/create/src/frameworks/react/project/base/src/routes/__root.tsx.ejs b/packages/create/src/frameworks/react/project/base/src/routes/__root.tsx.ejs
@@ -27,6 +27,99 @@ function RootComponent() {
     </>
   )
 }
+<% } else if (!includeExamples) { %>
+<% let hasContext = addOnEnabled["apollo-client"] || addOnEnabled["tanstack-query"]; %>
+import {
+  HeadContent, Scripts, <% if (hasContext) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %> } from '@tanstack/react-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
+import { TanStackDevtools } from '@tanstack/react-devtools'
+<% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { %>
+import <%= integration.jsName %> from '<%= relativePath(integration.path, true) %>'
+<% } %><% if (addOnEnabled.paraglide) { %>
+import { getLocale } from '#/paraglide/runtime'
+<% } %>
+import appCss from '../styles.css?url'
+<% if (addOnEnabled["apollo-client"]) { %>
+import type { ApolloClientIntegration } from "@apollo/client-integration-tanstack-start";
+<% } %>
+<% if (addOnEnabled["tanstack-query"]) { %>
+import type { QueryClient } from '@tanstack/react-query'
+<% if (addOnEnabled.tRPC) { %>
+import type { TRPCRouter } from '#/integrations/trpc/router'
+import type { TRPCOptionsProxy } from '@trpc/tanstack-react-query'
+<% } %>
+<% } %>
+<% if (hasContext) { %>
+interface MyRouterContext <% if (addOnEnabled["apollo-client"]) {%> extends ApolloClientIntegration.RouterContext <%} %>{
+<% if (addOnEnabled["tanstack-query"]) { %>
+  queryClient: QueryClient
+  <% if (addOnEnabled.tRPC) { %>
+  trpc: TRPCOptionsProxy<TRPCRouter>
+  <% } %>
+<% } %>
+}<% } %>
+
+export const Route = <% if (hasContext) { %>createRootRouteWithContext<MyRouterContext>()<% } else { %>createRootRoute<% } %>({
+<% if (addOnEnabled.paraglide) { %>
+  beforeLoad: async () => {
+    // Other redirect strategies are possible; see
+    // https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#offline-redirect
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('lang', getLocale())
+    }
+  },
+<% } %>
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'TanStack Start Starter',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+  shellComponent: RootDocument
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+      <% if (addOnEnabled.paraglide) { %><html lang={getLocale()}><% } else { %><html lang="en"><% } %>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <% for(const integration of integrations.filter(i => i.type === 'provider')) { %><<%= integration.jsName %>>
+        <% } %>{children}
+          <TanStackDevtools
+            config={{
+              position: 'bottom-right',
+            }}
+            plugins={[
+              {
+                name: 'Tanstack Router',
+                render: <TanStackRouterDevtoolsPanel />,
+              },
+              <% for(const integration of integrations.filter(i => i.type === 'devtools')) { %><%= integration.jsName %>,<% } %>
+            ]}
+          />
+          <% for(const integration of integrations.filter(i => i.type === 'layout')) { %><<%= integration.jsName %> />
+          <% } %><% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %></<%= integration.jsName %>>
+        <% } %><Scripts />
+      </body>
+    </html>
+  )
+}
 <% } else { %>
 <% let hasContext = addOnEnabled["apollo-client"] || addOnEnabled["tanstack-query"]; %>
 import {
diff --git a/packages/create/src/frameworks/react/project/base/src/routes/about.tsx.ejs b/packages/create/src/frameworks/react/project/base/src/routes/about.tsx.ejs
@@ -1,3 +1,4 @@
+<% if (!includeExamples) { ignoreFile(); return; } %>
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/about')({
diff --git a/packages/create/src/frameworks/react/project/base/src/routes/index.tsx.ejs b/packages/create/src/frameworks/react/project/base/src/routes/index.tsx.ejs
@@ -1,3 +1,19 @@
+<% if (!includeExamples) { %>
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({ component: Home });
+
+function Home() {
+  return (
+    <div className="p-8">
+      <h1 className="text-4xl font-bold">Welcome to TanStack Start</h1>
+      <p className="mt-4 text-lg">
+        Edit <code>src/routes/index.tsx</code> to get started.
+      </p>
+    </div>
+  );
+}
+<% } else { %>
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/")({ component: App });
@@ -70,3 +86,4 @@ function App() {
     </main>
   );
 }
+<% } %>
diff --git a/packages/create/src/frameworks/react/project/base/src/styles.css.ejs b/packages/create/src/frameworks/react/project/base/src/styles.css.ejs
@@ -1,3 +1,20 @@
+<% if (!includeExamples) { %>
+@import "tailwindcss";
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+}
+<% } else { %>
 @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap");
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
@@ -257,3 +274,4 @@ a {
     transform: translateY(0);
   }
 }
+<% } %>
diff --git a/packages/create/src/frameworks/solid/project/base/src/components/Header.tsx.ejs b/packages/create/src/frameworks/solid/project/base/src/components/Header.tsx.ejs
@@ -1,3 +1,4 @@
+<% if (!includeExamples) { ignoreFile(); return; } %>
 import { Link } from '@tanstack/solid-router'
 <% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
 import <%= integration.jsName %> from '<%= relativePath(integration.path) %>'
diff --git a/packages/create/src/frameworks/solid/project/base/src/routes/__root.tsx.ejs b/packages/create/src/frameworks/solid/project/base/src/routes/__root.tsx.ejs
@@ -16,6 +16,51 @@ function RootComponent() {
     </>
   )
 }
+<% } else if (!includeExamples) { %>
+import { HeadContent, Outlet, Scripts, createRootRouteWithContext } from '@tanstack/solid-router'
+import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
+
+<% if (addOnEnabled['solid-ui']) { %>
+import "@fontsource/inter/400.css"
+<% } %>
+
+import { HydrationScript } from 'solid-js/web'
+import { Suspense } from 'solid-js'
+
+<% for(const addOn of addOns) {
+  for(const init of addOn.main?.initialize || []) { %>
+  <%- init %>
+<% } } %>
+
+import styleCss from "../styles.css?url";
+
+export const Route = createRootRouteWithContext()({
+  head: () => ({
+    links: [{ rel: "stylesheet", href: styleCss }],
+  }),
+  shellComponent: RootComponent,
+})
+
+function RootComponent() {
+    return (
+      <html>
+        <head>
+          <HydrationScript />
+        </head>
+        <body>
+          <HeadContent />
+          <Suspense>
+            <Outlet />
+            <TanStackRouterDevtools />
+            <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
+              <<%= integration.jsName %> />
+            <% } %>
+            </Suspense>
+          <Scripts />
+        </body>
+      </html>
+    );
+}
 <% } else { %>
 import { HeadContent, Outlet, Scripts, createRootRouteWithContext } from '@tanstack/solid-router'
 import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
diff --git a/packages/create/src/frameworks/solid/project/base/src/routes/about.tsx.ejs b/packages/create/src/frameworks/solid/project/base/src/routes/about.tsx.ejs
@@ -1,3 +1,4 @@
+<% if (!includeExamples) { ignoreFile(); return; } %>
 import { createFileRoute } from '@tanstack/solid-router'
 
 export const Route = createFileRoute('/about')({
diff --git a/packages/create/src/frameworks/solid/project/base/src/routes/index.tsx.ejs b/packages/create/src/frameworks/solid/project/base/src/routes/index.tsx.ejs
@@ -1,3 +1,19 @@
+<% if (!includeExamples) { %>
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({ component: Home })
+
+function Home() {
+  return (
+    <div class="p-8">
+      <h1 class="text-4xl font-bold">Welcome to TanStack Start</h1>
+      <p class="mt-4 text-lg">
+        Edit <code>src/routes/index.tsx</code> to get started.
+      </p>
+    </div>
+  )
+}
+<% } else { %>
 import { createFileRoute } from '@tanstack/solid-router'
 
 export const Route = createFileRoute('/')({ component: App })
@@ -66,3 +82,4 @@ function App() {
     </main>
   )
 }
+<% } %>
diff --git a/packages/create/src/frameworks/solid/project/base/src/styles.css.ejs b/packages/create/src/frameworks/solid/project/base/src/styles.css.ejs
@@ -1,3 +1,20 @@
+<% if (!includeExamples) { %>
+@import 'tailwindcss';
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+}
+<% } else { %>
 @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');
 @import 'tailwindcss';
 
@@ -193,3 +210,4 @@ code {
     transform: translateY(0);
   }
 }
+<% } %>
diff --git a/packages/create/src/template-file.ts b/packages/create/src/template-file.ts
@@ -137,6 +137,7 @@ export function createTemplateFile(environment: Environment, options: Options) {
       fileRouter: options.mode === 'file-router',
       codeRouter: options.mode === 'code-router',
       routerOnly: options.routerOnly === true,
+      includeExamples: options.includeExamples !== false,
       addOnEnabled,
       addOnOption: options.addOnOptions,
       addOns: options.chosenAddOns,
diff --git a/packages/create/tests/template-context.test.ts b/packages/create/tests/template-context.test.ts
@@ -311,4 +311,67 @@ export const db = testAddon(/* connection */)`
     expect(output.files['/test/src/db/__sqlite__index.ts']).toBeUndefined()
     expect(output.files['/test/src/db/__postgres__index.ts']).toBeUndefined()
   })
+})
+
+describe('Template Context - includeExamples', () => {
+  it('should default includeExamples to true when undefined', async () => {
+    const { environment, output } = createMemoryEnvironment()
+    const templateFile = createTemplateFile(environment, simpleOptions)
+    environment.startRun()
+    await templateFile(
+      'test.txt.ejs',
+      '<%= includeExamples ? "with-examples" : "no-examples" %>',
+    )
+    environment.finishRun()
+
+    expect(output.files['/test/test.txt']).toEqual('with-examples')
+  })
+
+  it('should set includeExamples to false when options.includeExamples is false', async () => {
+    const { environment, output } = createMemoryEnvironment()
+    const templateFile = createTemplateFile(environment, {
+      ...simpleOptions,
+      includeExamples: false,
+    })
+    environment.startRun()
+    await templateFile(
+      'test.txt.ejs',
+      '<%= includeExamples ? "with-examples" : "no-examples" %>',
+    )
+    environment.finishRun()
+
+    expect(output.files['/test/test.txt']).toEqual('no-examples')
+  })
+
+  it('should ignore files when includeExamples is false', async () => {
+    const { environment, output } = createMemoryEnvironment()
+    const templateFile = createTemplateFile(environment, {
+      ...simpleOptions,
+      includeExamples: false,
+    })
+    environment.startRun()
+    await templateFile(
+      'about.ts.ejs',
+      '<% if (!includeExamples) { ignoreFile(); return; } %>\nexport const about = true',
+    )
+    environment.finishRun()
+
+    expect(output.files['/test/about.ts']).toBeUndefined()
+  })
+
+  it('should include files when includeExamples is true', async () => {
+    const { environment, output } = createMemoryEnvironment()
+    const templateFile = createTemplateFile(environment, {
+      ...simpleOptions,
+      includeExamples: true,
+    })
+    environment.startRun()
+    await templateFile(
+      'about.ts.ejs',
+      '<% if (!includeExamples) { ignoreFile(); return; } %>\nexport const about = true',
+    )
+    environment.finishRun()
+
+    expect(output.files['/test/about.ts']).toBeDefined()
+  })
 })

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<% if (!includeExamples) { ignoreFile(); return; } %>`
`1`	`2`	`export default function Footer() {`
`2`	`3`	`const year = new Date().getFullYear()`
`3`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<% if (!includeExamples) { ignoreFile(); return; } %>`
`1`	`2`	`import { Link } from '@tanstack/react-router'`
`2`	`3`	`<% for (const integration of integrations.filter((i) => i.type === 'header-user')) { %>import <%= integration.jsName %> from '<%= relativePath(integration.path) %>'`
`3`	`4`	`<% } %>import ThemeToggle from './ThemeToggle'`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<% if (!includeExamples) { ignoreFile(); return; } %>`
`1`	`2`	`import { useEffect, useState } from 'react'`
`2`	`3`
`3`	`4`	`type ThemeMode = 'light' \| 'dark' \| 'auto'`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<% if (!includeExamples) { ignoreFile(); return; } %>`
`1`	`2`	`import { createFileRoute } from '@tanstack/react-router'`
`2`	`3`
`3`	`4`	`export const Route = createFileRoute('/about')({`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<% if (!includeExamples) { ignoreFile(); return; } %>`
`1`	`2`	`import { Link } from '@tanstack/solid-router'`
`2`	`3`	`<% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>`
`3`	`4`	`import <%= integration.jsName %> from '<%= relativePath(integration.path) %>'`