@tanstack/create 0.49.3 → 0.60.0

package/dist/frameworks/solid/project/base/README.md.ejs

@@ -1,4 +1,4 @@
-Welcome to your new TanStack app! 
+Welcome to your new TanStack Start app! 
 
 # Getting Started
 
@@ -21,53 +21,29 @@ To build this application for production:
 
 This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
 
+### Removing Tailwind CSS
+
+If you prefer not to use Tailwind CSS:
+
+1. Remove the demo pages in `src/routes/demo/`
+2. Replace the Tailwind import in `src/styles.css` with your own styles
+3. Remove `tailwindcss()` from the plugins array in `vite.config.ts`
+4. Uninstall the packages: `<%= getPackageManagerAddScript('@tailwindcss/vite tailwindcss', true) %>`
+
 <% for(const addon of addOns.filter(addon => addon.readme)) { %>
 <%- addon.readme %>
 <% } %>
 
 ## Routing
-<% if (fileRouter) { %>This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.<% } else { %>This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.<%= jsx %>` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/file-based-routing) guide.<% } %>
-
-### Adding A Route
-<% if (fileRouter) { %>
-To add a new route to your application just add another a new file in the `./src/routes` directory.
-
-TanStack will automatically generate the content of the route file for you.
-<% } else { %>
-To add a new route to your application just add another `createRoute` call to the `./src/main.<%= jsx %>` file. The example below adds a new `/about`route to the root route.
-
-```tsx
-const aboutRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: "/about",
-  component: () => <h1>About</h1>,
-});
-```
 
-You will also need to add the route to the `routeTree` in the `./src/main.<%= jsx %>` file.
+This project uses [TanStack Router](https://tanstack.com/router) with file-based routing. Routes are managed as files in `src/routes`.
 
-```tsx
-const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);
-```
-
-With this set up you should be able to navigate to `/about` and see the about page.
-
-Of course you don't need to implement the About page in the `main.<%= jsx %>` file. You can create that component in another file and import it into the `main.<%= jsx %>` file, then use it in the `component` property of the `createRoute` call, like so:
-
-```tsx
-import About from "./components/About.<%= jsx %>";
+### Adding A Route
 
-const aboutRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: "/about",
-  component: About,
-});
-```
+To add a new route to your application just add a new file in the `./src/routes` directory.
 
-That is how we have the `App` component set up with the home page.
+TanStack will automatically generate the content of the route file for you.
 
-For more information on the options you have when you are creating code based routes check out the [Code Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/code-based-routing) documentation.
-<% } %>
 Now that you have two routes you can use a `Link` component to navigate between them.
 
 ### Adding Links
@@ -90,71 +66,23 @@ More information on the `Link` component can be found in the [Link documentation
 
 ### Using A Layout
 
-<% if (codeRouter) { %>
-Layouts can be used to wrap the contents of the routes in menus, headers, footers, etc.
-
-There is already a layout in the `src/main.<%= jsx %>` file:
-
-```tsx
-const rootRoute = createRootRoute({
-  component: () => (
-    <>
-      <Outlet />
-      <TanStackRouterDevtools />
-    </>
-  ),
-});
-```
-
-You can use the Soliid component specified in the `component` property of the `rootRoute` to wrap the contents of the routes. The `<Outlet />` component is used to render the current route within the body of the layout. For example you could add a header to the layout like so:
+In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes.
 
-```tsx
-import { Link } from "@tanstack/solid-router";
+More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).
 
-const rootRoute = createRootRoute({
-  component: () => (
-    <>
-      <header>
-        <nav>
-          <Link to="/">Home</Link>
-          <Link to="/about">About</Link>
-        </nav>
-      </header>
-      <Outlet />
-      <TanStackRouterDevtools />
-    </>
-  ),
-});
-```
-<% } else { %>In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.
+## Server Functions
 
-Here is an example layout that includes a header:
+TanStack Start provides server functions that allow you to write server-side code that seamlessly integrates with your client components.
 
 ```tsx
-import { Outlet, createRootRoute } from '@tanstack/solid-router'
-import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
+import { createServerFn } from '@tanstack/solid-start'
 
-import { Link } from "@tanstack/solid-router";
-
-export const Route = createRootRoute({
-  component: () => (
-    <>
-      <header>
-        <nav>
-          <Link to="/">Home</Link>
-          <Link to="/about">About</Link>
-        </nav>
-      </header>
-      <Outlet />
-      <TanStackRouterDevtools />
-    </>
-  ),
+const getServerTime = createServerFn({
+  method: 'GET',
+}).handler(async () => {
+  return new Date().toISOString()
 })
 ```
-<% } %>
-The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
-
-More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).
 
 ## Data Fetching
 
@@ -163,30 +91,26 @@ There are multiple ways to fetch data in your application. You can use TanStack
 For example:
 
 ```tsx
-const peopleRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: "/people",
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/people')({
   loader: async () => {
-    const response = await fetch("https://swapi.dev/api/people");<% if (typescript) { %>
-    return response.json() as Promise<{
-      results: {
-        name: string;
-      }[];
-    }>;
-<% } else { %>
-    return response.json();
-<% } %>  },
-  component: () => {
-    const data = peopleRoute.useLoaderData();
-    return (
-      <ul>
-        {data.results.map((person) => (
-          <li key={person.name}>{person.name}</li>
-        ))}
-      </ul>
-    );
+    const response = await fetch('https://swapi.dev/api/people')
+    return response.json()
   },
-});
+  component: PeopleComponent,
+})
+
+function PeopleComponent() {
+  const data = Route.useLoaderData()
+  return (
+    <ul>
+      <For each={data().results}>
+        {(person) => <li>{person.name}</li>}
+      </For>
+    </ul>
+  )
+}
 ```
 
 Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#loader-parameters).
@@ -213,3 +137,5 @@ This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.
 # Learn More
 
 You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
+
+For TanStack Start specific documentation, visit [TanStack Start](https://tanstack.com/start).

package/dist/frameworks/solid/project/base/_dot_gitignore

@@ -7,3 +7,7 @@ dist-ssr
 .nitro
 .tanstack
 .wrangler
+.output
+.vinxi
+__unconfig*
+count.txt

package/dist/frameworks/solid/project/base/package.json

@@ -3,19 +3,24 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite --port 3000",
-    "build": "vite build && tsc",
+    "dev": "vite dev --port 3000",
+    "build": "vite build",
+    "start": "node .output/server/index.mjs",
     "preview": "vite preview",
     "test": "vitest run"
   },
   "dependencies": {
     "@tanstack/solid-router": "^1.133.20",
     "@tanstack/solid-router-devtools": "^1.133.20",
+    "@tanstack/solid-router-ssr-query": "^1.132.25",
     "@tanstack/solid-start": "^1.133.20",
-    "solid-js": "^1.9.9"
+    "lucide-solid": "^0.544.0",
+    "solid-js": "^1.9.9",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "devDependencies": {
     "@tanstack/devtools-vite": "^0.3.11",
+    "vite-plugin-lucide-preprocess": "^1.4.6",
     "vite-plugin-solid": "^2.11.10",
     "typescript": "^5.7.2",
     "vite": "^7.1.7"

package/dist/frameworks/solid/project/base/src/components/Header.tsx.ejs

@@ -1,7 +1,7 @@
 <% if (addOns.length === 0 && integrations.length === 0 && routes.length === 0) { ignoreFile() } %>import { Link } from '@tanstack/solid-router'
 <% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
 import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
-<% } %><% if (tailwind) {
+<% } %><%
 const icons = new Set([
   "Menu",
   "X",
@@ -23,10 +23,9 @@ import { createSignal } from 'solid-js';
 import {
   <%= Array.from(icons).sort().join(", ") %>
 } from "lucide-solid";
-<% } %>
 
 export default function Header() {
-<% if (tailwind) {
+<%
 const menusWithChildren = addOns.filter(a => a.routes?.some(r => r.children));
 const userHeaders = integrations.filter(i => i.type === 'header-user');
 %>
@@ -151,26 +150,4 @@ const userHeaders = integrations.filter(i => i.type === 'header-user');
       </aside>
     </>
   );
-<% } else { %>
-  return (
-    <header class="p-2 flex gap-2 bg-white text-black justify-between">
-      <nav class="flex flex-row">
-        <div class="px-2 font-bold">
-          <Link to="/">Home</Link>
-        </div>
-<% for(const addOn of addOns) {
-  for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) { %>
-<div class="px-2 font-bold"><Link to="<%= route.url %>"><%= route.name %></Link></div>
-<% } } %>
-      </nav>
-<% if (integrations.filter(i => i.type === 'header-user').length > 0) { %>
-      <div>
-<% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
-  <<%= integration.jsName %> />
-<% } %>
-      </div>
-<% } %>
-    </header>
-  )
-<% } %>
 }

package/dist/frameworks/solid/project/base/src/routes/__root.tsx.ejs

@@ -1,14 +1,12 @@
-<% if (!fileRouter) { ignoreFile() } %>import { HeadContent, Outlet, Scripts, createRootRouteWithContext } from '@tanstack/solid-router'
+import { HeadContent, Outlet, Scripts, createRootRouteWithContext } from '@tanstack/solid-router'
 import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
 
 <% if (addOnEnabled['solid-ui']) { %>
 import "@fontsource/inter"
 <% } %>
 
-<% if (addOnEnabled.start) { %>
-  import { HydrationScript } from 'solid-js/web'
-  import { Suspense } from 'solid-js'
-<% } %>
+import { HydrationScript } from 'solid-js/web'
+import { Suspense } from 'solid-js'
 
 <% if (addOns.length || integrations.length || routes.length) { %>import Header from '../components/Header'
 <% } %>
@@ -26,7 +24,6 @@ export const Route = createRootRouteWithContext()({
   shellComponent: RootComponent,
 })
 
-<% if (addOnEnabled.start) { %>
 function RootComponent() {
     return (
       <html>
@@ -50,27 +47,3 @@ function RootComponent() {
       </html>
     );
 }
-<% } else { %>
-function RootComponent() {
-  return (
-    <>
-      <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
-        <<%= integration.jsName %>>
-      <% } %>
-      <HeadContent />
-      <% if (addOns.length || integrations.length || routes.length) { %>
-        <Header />
-      <% } %>
-      <Outlet />
-      <TanStackRouterDevtools />
-      <% 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 />
-    </>
-  )
-}
-<% } %>

package/dist/frameworks/solid/project/base/src/routes/index.tsx.ejs

@@ -1,41 +1,103 @@
-<% if (codeRouter) { ignoreFile() } %>import * as Solid from 'solid-js'
-import { createFileRoute } from '@tanstack/solid-router'
+import { createFileRoute } from "@tanstack/solid-router";
+import { For } from "solid-js"
+import {
+  Zap, Server, Route as RouteIcon, Shield, Waves, Sparkles,
+} from "lucide-solid";
 
-import logo from '../logo.svg'
+export const Route = createFileRoute("/")({ component: App });
 
-export const Route = createFileRoute('/')({
-  component: IndexComponent,
-})
+function App() {
+  const features = [
+    {
+      icon: <Zap class="w-12 h-12 text-cyan-400" />,
+      title: "Powerful Server Functions",
+      description: "Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.",
+    },
+    {
+      icon: <Server class="w-12 h-12 text-cyan-400" />,
+      title: "Flexible Server Side Rendering",
+      description: "Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.",
+    },
+    {
+      icon: <RouteIcon class="w-12 h-12 text-cyan-400" />,
+      title: "API Routes",
+      description: "Build type-safe API endpoints alongside your application. No separate backend needed.",
+    },
+    {
+      icon: <Shield class="w-12 h-12 text-cyan-400" />,
+      title: "Strongly Typed Everything",
+      description: "End-to-end type safety from server to client. Catch errors before they reach production.",
+    },
+    {
+      icon: <Waves class="w-12 h-12 text-cyan-400" />,
+      title: "Full Streaming Support",
+      description: "Stream data from server to client progressively. Perfect for AI applications and real-time updates.",
+    },
+    {
+      icon: <Sparkles class="w-12 h-12 text-cyan-400" />,
+      title: "Next Generation Ready",
+      description: "Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.",
+    },
+  ];
 
-function IndexComponent() {
   return (
-    <div class="text-center">
-      <header class="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]">
-        <img
-          src={logo}
-          class="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]"
-          alt="logo"
-        />
-        <p>
-          Edit <code>src/routes/index.tsx</code> and save to reload.
-        </p>
-        <a
-          class="text-[#61dafb] hover:underline"
-          href="https://solidjs.com"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn Solid
-        </a>
-        <a
-          class="text-[#61dafb] hover:underline"
-          href="https://tanstack.com"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn TanStack
-        </a>
-      </header>
+    <div class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
+      <section class="relative py-20 px-6 text-center overflow-hidden">
+        <div class="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"></div>
+        <div class="relative max-w-5xl mx-auto">
+          <div class="flex items-center justify-center gap-6 mb-6">
+            <img
+              src="/tanstack-circle-logo.png"
+              alt="TanStack Logo"
+              class="w-24 h-24 md:w-32 md:h-32"
+            />
+            <h1 class="text-6xl md:text-7xl font-black text-white [letter-spacing:-0.08em]">
+              <span class="text-gray-300">TANSTACK</span>{" "}
+              <span class="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
+                START
+              </span>
+            </h1>
+          </div>
+          <p class="text-2xl md:text-3xl text-gray-300 mb-4 font-light">
+            The framework for next generation AI applications
+          </p>
+          <p class="text-lg text-gray-400 max-w-3xl mx-auto mb-8">
+            Full-stack framework powered by TanStack Router for React and Solid.
+            Build modern applications with server functions, streaming, and type
+            safety.
+          </p>
+          <div class="flex flex-col items-center gap-4">
+            <a
+              href="https://tanstack.com/start"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50"
+            >
+              Documentation
+            </a>
+            <p class="text-gray-400 text-sm mt-2">
+              Begin your TanStack Start journey by editing{" "}
+              <code class="px-2 py-1 bg-slate-700 rounded text-cyan-400">
+                /src/routes/index.tsx
+              </code>
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section class="py-16 px-6 max-w-7xl mx-auto">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <For each={features}>
+            {(feature) => (
+              <div class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10">
+                <div class="mb-4">{feature.icon}</div>
+                <h3 class="text-xl font-semibold text-white mb-3">{feature.title}</h3>
+                <p class="text-gray-400 leading-relaxed">{feature.description}</p>
+              </div>
+            )}
+          </For>
+        </div>
+      </section>
     </div>
-  )
+  );
 }

package/dist/frameworks/solid/project/base/tsconfig.json.ejs

@@ -1,4 +1,4 @@
-<% if (!typescript) { ignoreFile() } %>{
+{
   <% if (addOnEnabled.eslint) { %>"include": ["**/*.ts", "**/*.tsx", "eslint.config.js", "prettier.config.js", "vite.config.js"],
   <% } else { %>"include": ["**/*.ts", "**/*.tsx"],<% } %>
   "compilerOptions": {

package/dist/frameworks/solid/project/base/vite.config.ts.ejs

@@ -1,26 +1,21 @@
-<% if (addOnEnabled['start']) { ignoreFile() } %>import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
 import { devtools } from '@tanstack/devtools-vite'
-<%if (fileRouter) { %>import { TanStackRouterVite } from '@tanstack/router-plugin/vite'<% } %>
-import solidPlugin from 'vite-plugin-solid'
-import tailwindcss from '@tailwindcss/vite'<% if (addOnEnabled['solid-ui']) { %>
-import { resolve } from 'node:path'<% } %><% if (addOnEnabled['module-federation']) { %>
-import { federation } from "@module-federation/vite";<% } %><% if (addOnEnabled['module-federation']) { %>
-import federationConfig from "./module-federation.config.js";
-<% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %>
-<%- integrationImportContent(integration) %>
+import viteTsConfigPaths from 'vite-tsconfig-paths'
+import tailwindcss from "@tailwindcss/vite"
+import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
+import solidPlugin from 'vite-plugin-solid';
+<% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportContent(integration) %>
 <% } %>
+import lucidePreprocess from "vite-plugin-lucide-preprocess";
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [devtools(), <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
-    <% if (addOnEnabled['module-federation']) { %>federation(federationConfig), <% } %><%if (fileRouter) { %>
-    TanStackRouterVite({ target: 'solid', autoCodeSplitting: true }),<% } %>
-    solidPlugin(),
+  plugins: [lucidePreprocess(), devtools(), <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
+    // this is the plugin that enables path aliases
+    viteTsConfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
     tailwindcss(),
-  ],<% if (addOnEnabled['solid-ui']) { %>
-  resolve: {
-    alias: {
-      '~': resolve(__dirname, './src'),
-    },
-  },<% } %>
+    tanstackStart(),
+    solidPlugin({ ssr: true }),
+  ],
 })

package/dist/frameworks/solid/project/packages.json

@@ -6,8 +6,8 @@
   },
   "tailwindcss": {
     "dependencies": {
-      "@tailwindcss/vite": "^4.0.6",
-      "tailwindcss": "^4.0.6"
+      "@tailwindcss/vite": "^4.1.18",
+      "tailwindcss": "^4.1.18"
     }
   },
   "file-router": {

package/dist/frameworks.js

@@ -28,7 +28,6 @@ export function scanAddOnDirectories(addOnsDirectories) {
             const filePath = resolve(addOnsBase, dir, 'info.json');
             const fileContent = readFileSync(filePath, 'utf-8');
             const info = JSON.parse(fileContent);
-            info.tailwind = info.tailwind ?? true;
             let packageAdditions = {};
             let packageTemplate = undefined;
             if (existsSync(resolve(addOnsBase, dir, 'package.json'))) {

package/dist/package-json.js

@@ -24,12 +24,8 @@ export function createPackageJSON(options) {
         name: options.projectName,
     };
     const additions = [
-        options.typescript
-            ? options.framework.optionalPackages.typescript
-            : undefined,
-        options.tailwind
-            ? options.framework.optionalPackages.tailwindcss
-            : undefined,
+        options.framework.optionalPackages.typescript,
+        options.framework.optionalPackages.tailwindcss,
         options.mode ? options.framework.optionalPackages[options.mode] : undefined,
     ];
     for (const addition of additions.filter(Boolean)) {
@@ -42,10 +38,10 @@ export function createPackageJSON(options) {
             const templateValues = {
                 packageManager: options.packageManager,
                 projectName: options.projectName,
-                typescript: options.typescript,
-                tailwind: options.tailwind,
-                js: options.typescript ? 'ts' : 'js',
-                jsx: options.typescript ? 'tsx' : 'jsx',
+                typescript: true,
+                tailwind: true,
+                js: 'ts',
+                jsx: 'tsx',
                 fileRouter: options.mode === 'file-router',
                 codeRouter: options.mode === 'code-router',
                 addOnEnabled: options.chosenAddOns.reduce((acc, addon) => {

package/dist/template-file.js

@@ -10,6 +10,22 @@ function convertDotFilesAndPaths(path) {
         .map((segment) => segment.replace(/^_dot_/, '.'))
         .join(sep);
 }
+function normalizeSourceExtension(target, typescript) {
+    if (!typescript) {
+        return target;
+    }
+    const normalizedTarget = target.replace(/\\/g, '/');
+    if (!normalizedTarget.startsWith('src/')) {
+        return target;
+    }
+    if (normalizedTarget.endsWith('.js')) {
+        return `${target.slice(0, -3)}.ts`;
+    }
+    if (normalizedTarget.endsWith('.jsx')) {
+        return `${target.slice(0, -4)}.tsx`;
+    }
+    return target;
+}
 export function createTemplateFile(environment, options) {
     function getPackageManagerAddScript(packageName, isDev = false) {
         return formatCommand(getPackageManagerInstallCommand(options.packageManager, packageName, isDev));
@@ -57,10 +73,10 @@ export function createTemplateFile(environment, options) {
         const templateValues = {
             packageManager: options.packageManager,
             projectName: options.projectName,
-            typescript: options.typescript,
-            tailwind: options.tailwind,
-            js: options.typescript ? 'ts' : 'js',
-            jsx: options.typescript ? 'tsx' : 'jsx',
+            typescript: true,
+            tailwind: true,
+            js: 'ts',
+            jsx: 'tsx',
             fileRouter: options.mode === 'file-router',
             codeRouter: options.mode === 'code-router',
             addOnEnabled,
@@ -97,6 +113,7 @@ export function createTemplateFile(environment, options) {
             return;
         }
         let target = convertDotFilesAndPaths(file.replace('.ejs', ''));
+        target = normalizeSourceExtension(target, options.typescript);
         // Strip option prefixes from filename (e.g., __postgres__schema.prisma -> schema.prisma)
         const prefixMatch = target.match(/^(.+\/)?__([^_]+)__(.+)$/);
         if (prefixMatch) {
@@ -116,9 +133,6 @@ export function createTemplateFile(environment, options) {
                 parser: 'typescript',
             });
         }
-        if (!options.typescript) {
-            target = target.replace(/\.tsx$/, '.jsx').replace(/\.ts$/, '.js');
-        }
         if (append) {
             await environment.appendFile(resolve(options.targetDir, target), content);
         }