Merge branch 'main' into alpha

Author: jherr

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:

src/create-app.ts

@@ -203,6 +203,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'),
@@ -421,6 +440,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) {
@@ -452,7 +483,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,
@@ -715,6 +746,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))

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'

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({

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;

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>();

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

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,
+})

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"]
+}

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"
+  }
+}