create-tsrouter-app 0.9.7 → 0.10.0

package/README.md

@@ -46,7 +46,7 @@ Available options:
 - `--template <type>`: Choose between `file-router`, `typescript`, or `javascript`
 - `--tailwind`: Enable Tailwind CSS
 - `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, `bun`, or `deno`)
-- `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`)
+- `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`, `eslint+prettier`)
 - `--no-git`: Do not initialize a git repository
 - `--add-ons`: Enable add-on selection or specify add-ons to install
 
@@ -102,6 +102,8 @@ Choose your preferred solution for formatting and linting either through the int
 
 Setting this flag to `biome` will configure it as your toolchain of choice, adding a `biome.json` to the root of the project. Consult the [biome documentation](https://biomejs.dev/guides/getting-started/) for further customization.
 
+Setting this flag to `eslint+prettier` will configure it as your toolchain of choice, adding an `eslint.config.js` and `prettier.config.js` to the root of the project, as well as a `.prettierignore` file. Consult the [eslint documentation](https://eslint.org/docs/latest/) and [prettier documentation](https://prettier.io/docs/) for further customization.
+
 ## Add-ons (experimental)
 
 You can enable add-on selection:

package/dist/create-app.js

@@ -147,6 +147,20 @@ async function createPackageJSON(environment, projectName, options, templateDir,
             },
         };
     }
+    if (options.toolchain === 'eslint+prettier') {
+        const eslintPrettierPackageJSON = JSON.parse(await environment.readFile(resolve(templateDir, 'package.eslintprettier.json'), 'utf-8'));
+        packageJSON = {
+            ...packageJSON,
+            scripts: {
+                ...packageJSON.scripts,
+                ...eslintPrettierPackageJSON.scripts,
+            },
+            devDependencies: {
+                ...packageJSON.devDependencies,
+                ...eslintPrettierPackageJSON.devDependencies,
+            },
+        };
+    }
     if (options.mode === FILE_ROUTER) {
         const frPackageJSON = JSON.parse(await environment.readFile(resolve(routerDir, 'package.fr.json'), 'utf8'));
         packageJSON = {
@@ -261,6 +275,13 @@ export async function createApp(options, { silent = false, environment, }) {
     if (options.toolchain === 'biome') {
         copyFiles(templateDirBase, ['./toolchain/biome.json'], true);
     }
+    if (options.toolchain === 'eslint+prettier') {
+        copyFiles(templateDirBase, [
+            './toolchain/eslint.config.js',
+            './toolchain/prettier.config.js',
+            './toolchain/.prettierignore',
+        ], true);
+    }
     // Setup reportWebVitals
     if (!isAddOnEnabled('start') && options.framework === 'react') {
         if (options.typescript) {
@@ -279,7 +300,7 @@ export async function createApp(options, { silent = false, environment, }) {
     if (options.typescript) {
         await templateFile(templateDirBase, './tsconfig.json.ejs', './tsconfig.json');
     }
-    // Setup the package.json file, optionally with typescript, tailwind and biome
+    // Setup the package.json file, optionally with typescript, tailwind and formatter/linter
     await createPackageJSON(environment, options.projectName, options, templateDirBase, templateDirRouter, targetDir, options.chosenAddOns.map((addOn) => addOn.packageAdditions));
     // Copy all the asset files from the addons
     const s = silent ? null : spinner();
@@ -421,6 +442,11 @@ export async function createApp(options, { silent = false, environment, }) {
         }
         s?.stop(`Applied toolchain ${options.toolchain}...`);
     }
+    if (options.toolchain === 'eslint+prettier') {
+        s?.start(`Applying toolchain ${options.toolchain}...`);
+        await environment.execute(options.packageManager, ['run', 'check'], targetDir);
+        s?.stop(`Applied toolchain ${options.toolchain}...`);
+    }
     if (options.git) {
         s?.start(`Initializing git repository...`);
         await environment.execute('git', ['init'], resolve(targetDir));

package/dist/toolchain.js

@@ -1,2 +1,6 @@
-export const SUPPORTED_TOOLCHAINS = ['none', 'biome'];
+export const SUPPORTED_TOOLCHAINS = [
+    'none',
+    'biome',
+    'eslint+prettier',
+];
 export const DEFAULT_TOOLCHAIN = 'none';

package/package.json

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

package/src/create-app.ts

@@ -216,6 +216,25 @@ async function createPackageJSON(
       },
     }
   }
+  if (options.toolchain === 'eslint+prettier') {
+    const eslintPrettierPackageJSON = JSON.parse(
+      await environment.readFile(
+        resolve(templateDir, 'package.eslintprettier.json'),
+        'utf-8',
+      ),
+    )
+    packageJSON = {
+      ...packageJSON,
+      scripts: {
+        ...packageJSON.scripts,
+        ...eslintPrettierPackageJSON.scripts,
+      },
+      devDependencies: {
+        ...packageJSON.devDependencies,
+        ...eslintPrettierPackageJSON.devDependencies,
+      },
+    }
+  }
   if (options.mode === FILE_ROUTER) {
     const frPackageJSON = JSON.parse(
       await environment.readFile(resolve(routerDir, 'package.fr.json'), 'utf8'),
@@ -400,6 +419,18 @@ export async function createApp(
     copyFiles(templateDirBase, ['./toolchain/biome.json'], true)
   }
 
+  if (options.toolchain === 'eslint+prettier') {
+    copyFiles(
+      templateDirBase,
+      [
+        './toolchain/eslint.config.js',
+        './toolchain/prettier.config.js',
+        './toolchain/.prettierignore',
+      ],
+      true,
+    )
+  }
+
   // Setup reportWebVitals
   if (!isAddOnEnabled('start') && options.framework === 'react') {
     if (options.typescript) {
@@ -431,7 +462,7 @@ export async function createApp(
     )
   }
 
-  // Setup the package.json file, optionally with typescript, tailwind and biome
+  // Setup the package.json file, optionally with typescript, tailwind and formatter/linter
   await createPackageJSON(
     environment,
     options.projectName,
@@ -696,6 +727,16 @@ export async function createApp(
     s?.stop(`Applied toolchain ${options.toolchain}...`)
   }
 
+  if (options.toolchain === 'eslint+prettier') {
+    s?.start(`Applying toolchain ${options.toolchain}...`)
+    await environment.execute(
+      options.packageManager,
+      ['run', 'check'],
+      targetDir,
+    )
+    s?.stop(`Applied toolchain ${options.toolchain}...`)
+  }
+
   if (options.git) {
     s?.start(`Initializing git repository...`)
     await environment.execute('git', ['init'], resolve(targetDir))

package/src/toolchain.ts

@@ -1,3 +1,7 @@
-export const SUPPORTED_TOOLCHAINS = ['none', 'biome'] as const
+export const SUPPORTED_TOOLCHAINS = [
+  'none',
+  'biome',
+  'eslint+prettier',
+] as const
 export type ToolChain = (typeof SUPPORTED_TOOLCHAINS)[number]
 export const DEFAULT_TOOLCHAIN: ToolChain = 'none'

package/templates/react/add-on/start/assets/src/router.tsx.ejs

@@ -24,6 +24,15 @@ export const createRouter = () => {
     },
     scrollRestoration: true,
     defaultPreloadStaleTime: 0,
+    <% if (addOnEnabled.tRPC) { %>
+    Wrap: (props: { children: React.ReactNode }) => {
+      return (
+        <TanstackQuery.Provider>
+          {props.children}
+        </TanstackQuery.Provider>
+      );
+    },
+  <% } %>
   }), TanstackQuery.getContext().queryClient)
   <% } else { %>
   const router = createTanstackRouter({

package/templates/react/add-on/tRPC/assets/src/integrations/trpc/init.ts

@@ -0,0 +1,9 @@
+import { initTRPC } from "@trpc/server";
+import superjson from "superjson";
+
+const t = initTRPC.create({
+  transformer: superjson,
+});
+
+export const createTRPCRouter = t.router;
+export const publicProcedure = t.procedure;

package/templates/react/add-on/tRPC/assets/src/integrations/trpc/react.ts

@@ -0,0 +1,4 @@
+import { createTRPCContext } from "@trpc/tanstack-react-query";
+import type { TRPCRouter } from "@/trpc/router";
+
+export const { TRPCProvider, useTRPC } = createTRPCContext<TRPCRouter>();

package/templates/react/add-on/tRPC/assets/src/integrations/trpc/router.ts

@@ -0,0 +1,18 @@
+import { TRPCError } from '@trpc/server'
+import type { TRPCRouterRecord } from '@trpc/server'
+// import { z } from 'zod'
+
+import { createTRPCRouter, publicProcedure } from './init'
+
+const peopleRouter = {
+  list: publicProcedure.query(async () =>
+    fetch('https://swapi.dev/api/people')
+      .then((res) => res.json())
+      .then((d) => d.results as { name: string }[]),
+  ),
+} satisfies TRPCRouterRecord
+
+export const trpcRouter = createTRPCRouter({
+  people: peopleRouter,
+})
+export type TRPCRouter = typeof trpcRouter

package/templates/react/add-on/tRPC/assets/src/routes/api.trpc.$.tsx

@@ -0,0 +1,16 @@
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
+import { trpcRouter } from '@/integrations/trpc/router'
+
+function handler({ request }: { request: Request }) {
+  return fetchRequestHandler({
+    req: request,
+    router: trpcRouter,
+    endpoint: '/api/trpc',
+  })
+}
+
+export const APIRoute = createAPIFileRoute('/api/trpc/$')({
+  GET: handler,
+  POST: handler,
+})

package/templates/react/add-on/tRPC/info.json

@@ -0,0 +1,9 @@
+{
+  "name": "tRPC",
+  "description": "Integrate tRPC into your application.",
+  "phase": "add-on",
+  "templates": ["file-router"],
+  "link": "https://trpc.io/",
+  "routes": [],
+  "dependsOn": ["tanstack-query", "start"]
+}

package/templates/react/add-on/tRPC/package.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "@trpc/client": "^11.0.0",
+    "@trpc/server": "^11.0.0",
+    "@trpc/tanstack-react-query": "^11.0.0",
+    "superjson": "^2.2.2",
+    "zod": "^3.24.2"
+  }
+}

package/templates/react/add-on/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs

@@ -0,0 +1,70 @@
+<% if (addOnEnabled.tRPC) { %>
+import { QueryClient } from "@tanstack/react-query";
+import superjson from "superjson";
+import { createTRPCClient, httpBatchStreamLink } from "@trpc/client";
+import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
+
+import { TRPCProvider } from "@/integrations/trpc/react";
+
+import type { TRPCRouter } from "@/integrations/trpc/router";
+
+function getUrl() {
+  const base = (() => {
+    if (typeof window !== "undefined") return "";
+    return `http://localhost:${process.env.PORT ?? 3000}`;
+  })();
+  return base + "/api/trpc";
+}
+
+export const trpcClient = createTRPCClient<TRPCRouter>({
+  links: [
+    httpBatchStreamLink({
+      transformer: superjson,
+      url: getUrl(),
+    }),
+  ],
+});
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    dehydrate: { serializeData: superjson.serialize },
+    hydrate: { deserializeData: superjson.deserialize },
+  },
+});
+
+const serverHelpers = createTRPCOptionsProxy({
+  client: trpcClient,
+  queryClient: queryClient,
+});
+
+export function getContext() {
+  return {
+    queryClient,
+    trpc: serverHelpers,
+  };
+}
+
+export function Provider({ children }: { children: React.ReactNode }) {
+  return (
+    <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+      {children}
+    </TRPCProvider>
+  );
+}
+<% } else { %>
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient()
+
+export function getContext() {
+  return {
+    queryClient,
+  }
+}
+
+export function Provider({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+<% } %>

package/templates/react/add-on/tanstack-query/assets/src/routes/demo.tanstack-query.tsx.ejs

@@ -1,21 +1,36 @@
 import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
+<% if (addOnEnabled.tRPC) { %>
+import { useTRPC } from "@/integrations/trpc/react";
+<% } %>
 <% if (codeRouter) { %>
 import type { RootRoute } from '@tanstack/react-router'
 <% } else { %>
 export const Route = createFileRoute('/demo/tanstack-query')({
+<% if (addOnEnabled.tRPC) { %>
+  loader: async ({ context }) => {
+    await context.queryClient.prefetchQuery(
+      context.trpc.people.list.queryOptions()
+    );
+  },
+<% } %>
   component: TanStackQueryDemo,
 })
 <% } %>
 function TanStackQueryDemo() {
+<% if (addOnEnabled.tRPC) { %>
+  const trpc = useTRPC();
+  const { data } = useQuery(trpc.people.list.queryOptions());
+<% } else { %>
   const { data } = useQuery({
     queryKey: ['people'],
     queryFn: () =>
       fetch('https://swapi.dev/api/people')
         .then((res) => res.json())
-        .then((data) => data.results as { name: string }[]),
+        .then((d) => d.results as { name: string }[]),
     initialData: [],
   })
+<% } %>
 
   return (
     <div className="p-4">

package/templates/react/base/README.md.ejs

@@ -31,17 +31,20 @@ This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
 <% } else { %>
 This project uses CSS for styling.
 <% } %>
-<% if (toolchain && toolchain === 'biome') { %>
+<% if (toolchain && toolchain !== 'none') { %>
 ## Linting & Formatting
+<% if (toolchain === 'biome') { %>
 This project uses [Biome](https://biomejs.dev/) for linting and formatting. The following scripts are available:
-
+<% } %>
+<% if (toolchain === 'eslint+prettier') { %>
+This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:
+<% } %>
 ```bash
 <%= getPackageManagerRunScript('lint') %>
 <%= getPackageManagerRunScript('format') %>
 <%= getPackageManagerRunScript('check') %>
 ```
 <% } %>
-
 <% for(const addon of addOns.filter(addon => addon.readme)) { %>
 <%- addon.readme %>
 <% } %>

package/templates/react/base/package.eslintprettier.json

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "lint": "eslint",
+    "format": "prettier",
+    "check": "prettier --write . && eslint --fix"
+  },
+  "devDependencies": {
+    "@tanstack/eslint-config": "^0.1.0",
+    "prettier": "^3.5.3"
+  }
+}

package/templates/react/base/toolchain/.prettierignore

@@ -0,0 +1,3 @@
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

package/templates/react/base/toolchain/eslint.config.js

@@ -0,0 +1,5 @@
+//  @ts-check
+
+import { tanstackConfig } from "@tanstack/eslint-config";
+
+export default [...tanstackConfig];

package/templates/react/base/toolchain/prettier.config.js

@@ -0,0 +1,10 @@
+//  @ts-check
+
+/** @type {import('prettier').Config} */
+const config = {
+  semi: false,
+  singleQuote: true,
+  trailingComma: "all",
+};
+
+export default config;

package/templates/react/base/tsconfig.json.ejs

@@ -1,5 +1,6 @@
 {
-  "include": ["**/*.ts", "**/*.tsx"],
+  <% if (toolchain && toolchain === 'eslint+prettier') { %>"include": ["**/*.ts", "**/*.tsx", "eslint.config.js", "prettier.config.js", "vite.config.js"],
+  <% } else { %>"include": ["**/*.ts", "**/*.tsx"],<% } %>
   "compilerOptions": {
     "target": "ES2022",
     "jsx": "react-jsx",
@@ -19,10 +20,10 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true<% if (addOnEnabled.shadcn) { %>,
+    "noUncheckedSideEffectImports": true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"],
-    }<% } %>
+    }
   }
 }

package/templates/react/base/vite.config.js.ejs

@@ -3,8 +3,8 @@ import viteReact from "@vitejs/plugin-react";<% if (tailwind) { %>
 import tailwindcss from "@tailwindcss/vite";
 <% } %><%if (fileRouter) { %>
 import { TanStackRouterVite } from "@tanstack/router-plugin/vite";<% } %><% if (addOnEnabled['module-federation']) { %>
-import { federation } from "@module-federation/vite";<% } %><% if (addOnEnabled.shadcn) { %>
-import { resolve } from "node:path";<% } %><% if (addOnEnabled['module-federation']) { %>
+import { federation } from "@module-federation/vite";<% } %>
+import { resolve } from "node:path";<% if (addOnEnabled['module-federation']) { %>
 import federationConfig from "./module-federation.config.js";
 <% } %>
 
@@ -15,10 +15,9 @@ export default defineConfig({
     globals: true,
     environment: "jsdom",
   },
-<% if (addOnEnabled.shadcn) { %>  resolve: {
+  resolve: {
     alias: {
       '@': resolve(__dirname, './src'),
     },
-  },
-<% } %>
+  }
 });

package/templates/react/example/tanchat/assets/src/data/example-guitars.ts

@@ -10,16 +10,26 @@ export interface Guitar {
 const guitars: Array<Guitar> = [
   {
     id: 1,
-    name: 'Dune Guitar',
-    image: '/example-guitar-dune.jpg',
+    name: 'Video Game Guitar',
+    image: '/example-guitar-video-games.jpg',
     description:
-      'Inspired by the desert, this guitar will transport you to a world of sand and adventure. Its warm, amber-toned finish mimics the endless dunes of Arrakis, while the custom fretboard inlays resemble ancient desert glyphs. The resonant hollow body produces tones that range from whispered sandstorm hushes to the booming echo of desert thunder. Perfect for musicians seeking an instrument with both visual impact and sonic versatility, the Dune Guitar carries the mystique of distant worlds in every note.',
+      "The Video Game Guitar is a unique acoustic guitar that features a design inspired by video games. It has a sleek, high-gloss finish and a comfortable playability. The guitar's ergonomic body and fast neck profile ensure comfortable playability for hours on end.",
     shortDescription:
-      'A desert-inspired hollow body guitar with warm tones and custom desert glyph inlays.',
-    price: 599,
+      'A unique electric guitar with a video game design, high-gloss finish, and comfortable playability.',
+    price: 699,
   },
   {
     id: 2,
+    name: 'Superhero Guitar',
+    image: '/example-guitar-superhero.jpg',
+    description:
+      "The Superhero Guitar is a bold black electric guitar that stands out with its unique superhero logo design. Its sleek, high-gloss finish and powerful pickups make it perfect for high-energy performances. The guitar's ergonomic body and fast neck profile ensure comfortable playability for hours on end.",
+    shortDescription:
+      'A bold black electric guitar with a unique superhero logo, high-gloss finish, and powerful pickups.',
+    price: 699,
+  },
+  {
+    id: 3,
     name: 'Motherboard Guitar',
     image: '/example-guitar-motherboard.jpg',
     description:
@@ -29,7 +39,7 @@ const guitars: Array<Guitar> = [
     price: 649,
   },
   {
-    id: 3,
+    id: 4,
     name: 'Racing Guitar',
     image: '/example-guitar-racing.jpg',
     description:
@@ -39,34 +49,34 @@ const guitars: Array<Guitar> = [
     price: 679,
   },
   {
-    id: 4,
+    id: 5,
     name: 'Steamer Trunk Guitar',
     image: '/example-guitar-steamer-trunk.jpg',
     description:
-      "The Steamer Trunk Guitar carries the nostalgic essence of vintage travel in its unique design. Crafted with reclaimed wood from authentic antique luggage, each instrument tells a story of journeys past through its weathered finish and brass hardware accents. The body features decorative leather straps and corner protectors reminiscent of classic travel trunks, while the neck is inlaid with miniature world map markers denoting famous destinations. Its warm, rich tone has a distinctive aged quality that can't be replicated, producing sounds that evoke distant shores and adventures waiting to be had. Perfect for the musician whose playing is a journey unto itself.",
+      'The Steamer Trunk Guitar is a semi-hollow body instrument that exudes vintage charm and character. Crafted from reclaimed antique luggage wood, it features brass hardware that adds a touch of elegance and durability. The fretboard is adorned with a world map inlay, making it a unique piece that tells a story of travel and adventure.',
     shortDescription:
-      'A nostalgic guitar crafted from reclaimed antique luggage wood with brass accents and world map inlays.',
+      'A semi-hollow body guitar with brass hardware and a world map inlay, crafted from reclaimed antique luggage wood.',
     price: 629,
   },
   {
-    id: 5,
-    name: 'Steampunk Guitar',
-    image: '/example-guitar-steampunk.jpg',
+    id: 6,
+    name: "Travelin' Man Guitar",
+    image: '/example-guitar-traveling.jpg',
     description:
-      "The Steampunk Guitar is a magnificent fusion of Victorian aesthetics and industrial innovation, featuring an array of functional brass gears, pressure gauges, and copper tubing that adorn its mahogany body. Each component has been meticulously hand-crafted by master artisans, creating not just an instrument but a work of mechanical art. The fretboard is inlaid with vintage clockwork designs that seem to move as you play, while the custom-wound pickups are housed in polished brass casings that enhance the guitar's warm, slightly overdriven tone. Steam-powered tremolo effects can be activated via the special valve system, producing otherworldly sounds that transport listeners to an alternate history where steam and music power the world.",
+      "The Travelin' Man Guitar is an acoustic masterpiece adorned with vintage postcards from around the world. Each postcard tells a story of adventure and wanderlust, making this guitar a unique piece of art. Its rich, resonant tones and comfortable playability make it perfect for musicians who love to travel and perform.",
     shortDescription:
-      'A Victorian-inspired masterpiece featuring functional brass gears, pressure gauges, and copper tubing on a mahogany body.',
-    price: 699,
+      'An acoustic guitar with vintage postcards, rich tones, and comfortable playability.',
+    price: 499,
   },
   {
-    id: 6,
-    name: 'Underwater Guitar',
-    image: '/example-guitar-underwater.jpg',
+    id: 7,
+    name: 'Flowerly Love Guitar',
+    image: '/example-guitar-flowers.jpg',
     description:
-      'Dive into the depths of sonic exploration with the Underwater Guitar, an instrument designed to capture the mysterious beauty of the ocean. Its translucent blue-green finish creates the illusion of being submerged, with mother-of-pearl inlays resembling bubbles rising along the fretboard. The body is contoured like ocean waves, featuring hand-painted coral reef details and iridescent abalone accents that shimmer like sunlight through water. Specially designed pickups produce ethereal, fluid tones with extended sustain that mimics the endless nature of the sea. Water-resistant components make this guitar surprisingly practical for beachside performances, while its unique resonant chamber creates haunting harmonics reminiscent of whale songs and the gentle lapping of waves.',
+      "The Flowerly Love Guitar is an acoustic masterpiece adorned with intricate floral designs on its body. Each flower is hand-painted, adding a touch of nature's beauty to the instrument. Its warm, resonant tones make it perfect for both intimate performances and larger gatherings.",
     shortDescription:
-      'An ocean-themed guitar with a translucent blue-green finish, bubble-like pearl inlays, and ethereal tones with extended sustain.',
-    price: 499,
+      'An acoustic guitar with hand-painted floral designs and warm, resonant tones.',
+    price: 599,
   },
 ]
 

package/templates/react/example/tanchat/assets/src/routes/example.guitars/index.tsx

@@ -2,10 +2,10 @@ import { Link, createFileRoute } from '@tanstack/react-router'
 import guitars from '../../data/example-guitars'
 
 export const Route = createFileRoute('/example/guitars/')({
-  component: App,
+  component: GuitarsIndex,
 })
 
-export default function App() {
+function GuitarsIndex() {
   return (
     <div className="bg-black text-white p-5">
       <h1 className="text-3xl font-bold mb-8 text-center">Featured Guitars</h1>

package/templates/react/file-router/src/routes/__root.tsx.ejs

@@ -10,8 +10,15 @@ import <%= integration.name %> from "../<%= integration.path %>";
 import appCss from '../styles.css?url'
 <% } %><% if (addOnEnabled["tanstack-query"]) { %>
 import type { QueryClient } from '@tanstack/react-query'
+<% if (addOnEnabled.tRPC) { %>
+import { TRPCRouter } from '@/integrations/trpc/router'
+<% } %>
+
 interface MyRouterContext {
   queryClient: QueryClient
+  <% if (addOnEnabled.tRPC) { %>
+  trpc: TRPCRouter
+  <% } %>
 }<% } %>
   
 export const Route = <% if (addOnEnabled["tanstack-query"]) { %>createRootRouteWithContext<MyRouterContext>()<% } else { %>createRootRoute<% } %>({

package/templates/solid/base/README.md.ejs

@@ -195,6 +195,21 @@ Loaders simplify your data fetching logic dramatically. Check out more informati
 
 Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
 
+<% if (toolchain && toolchain !== 'none') { %>
+## Linting & Formatting
+<% if (toolchain === 'biome') { %>
+This project uses [Biome](https://biomejs.dev/) for linting and formatting. The following scripts are available:
+<% } %>
+<% if (toolchain === 'eslint+prettier') { %>
+This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:
+<% } %>
+```bash
+<%= getPackageManagerRunScript('lint') %>
+<%= getPackageManagerRunScript('format') %>
+<%= getPackageManagerRunScript('check') %>
+```
+<% } %>
+
 # Learn More
 
 You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).