VS Code title bar colors

.changeset/config.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://unpkg.com/@changesets/config@2.1.1/schema.json",
+  "$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json",
   "changelog": [
     "@changesets/changelog-github",
     { "repo": "t3-oss/create-t3-app" }

.github/actions/setup/action.yml

@@ -4,7 +4,7 @@ description: "Common setup steps for Actions"
 runs:
   using: composite
   steps:
-    - uses: pnpm/action-setup@v3
+    - uses: pnpm/action-setup@v4
     - uses: actions/setup-node@v4
       with:
         node-version: 20

.github/workflows/e2e.yml

@@ -71,7 +71,7 @@ jobs:
 
     name: "Build and Start T3 App with Bun"
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
@@ -81,7 +81,7 @@ jobs:
 
       # Then, run the CLI and build the generated app with Bun
       # Let's just build a full app with Bun, we don't need the matrix here
-      - uses: oven-sh/setup-bun@v1
+      - uses: oven-sh/setup-bun@v2
         with:
           bun-version: latest
 

.vscode/settings.json

@@ -1,4 +1,11 @@
 {
+  "workbench.colorCustomizations": {
+    "titleBar.activeBackground": "#1f0d49",
+    "titleBar.activeForeground": "#e2e8f0",
+    "titleBar.inactiveBackground": "#181239",
+    "titleBar.inactiveForeground": "#b1b6bd"
+  },
+
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
@@ -11,9 +18,9 @@
   },
 
   "eslint.validate": [
+    "astro",
     "javascript",
     "javascriptreact",
-    "astro",
     "typescript",
     "typescriptreact"
   ],

cli/package.json

@@ -32,15 +32,15 @@
     "package.json"
   ],
   "engines": {
-    "node": ">=18.17.0"
+    "node": ">=20.18.0"
   },
   "scripts": {
     "typecheck": "tsc",
     "build": "tsup",
     "dev": "tsup --watch",
     "clean": "rm -rf dist .turbo node_modules",
     "start": "node dist/index.js",
-    "lint": "eslint . --ext .ts,.tsx",
+    "lint": "eslint **/*.{ts,tsx}",
     "lint:fix": "pnpm lint --fix",
     "format": "prettier '**/*.{cjs,mjs,ts,tsx,md,json}' --ignore-path ../.gitignore --ignore-unknown --no-error-on-unmatched-pattern --write",
     "format:check": "prettier '**/*.{cjs,mjs,ts,tsx,md,json}' --ignore-path ../.gitignore --ignore-unknown --no-error-on-unmatched-pattern --check",
@@ -52,47 +52,47 @@
   "dependencies": {
     "@clack/core": "^0.3.4",
     "@clack/prompts": "^0.6.3",
-    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "chalk": "5.2.0",
     "commander": "^10.0.1",
     "execa": "^7.2.0",
     "fs-extra": "^11.2.0",
     "gradient-string": "^2.0.2",
     "ora": "6.3.1",
-    "sort-package-json": "^2.10.0"
+    "sort-package-json": "^2.10.1"
   },
   "devDependencies": {
-    "@auth/drizzle-adapter": "^1.1.0",
+    "@auth/drizzle-adapter": "^1.7.2",
     "@auth/prisma-adapter": "^1.6.0",
     "@libsql/client": "^0.9.0",
     "@planetscale/database": "^1.19.0",
-    "@prisma/adapter-planetscale": "^5.14.0",
-    "@prisma/client": "^5.14.0",
-    "@t3-oss/env-nextjs": "^0.10.1",
-    "@tanstack/react-query": "^5.49.2",
-    "@trpc/client": "11.0.0-rc.441",
-    "@trpc/next": "11.0.0-rc.441",
-    "@trpc/react-query": "11.0.0-rc.441",
-    "@trpc/server": "11.0.0-rc.441",
+    "@prisma/adapter-planetscale": "^5.21.1",
+    "@prisma/client": "^5.21.1",
+    "@t3-oss/env-nextjs": "^0.11.1",
+    "@tanstack/react-query": "^5.59.16",
+    "@trpc/client": "11.0.0-rc.593",
+    "@trpc/next": "11.0.0-rc.593",
+    "@trpc/react-query": "11.0.0-rc.593",
+    "@trpc/server": "11.0.0-rc.593",
     "@types/fs-extra": "^11.0.4",
     "@types/gradient-string": "^1.1.6",
-    "@types/node": "^20.14.10",
-    "drizzle-kit": "^0.24.0",
+    "@types/node": "^20.17.1",
+    "drizzle-kit": "^0.24.2",
     "drizzle-orm": "^0.33.0",
-    "mysql2": "^3.11.0",
-    "next": "^14.2.4",
-    "next-auth": "^4.24.7",
-    "postgres": "^3.4.4",
-    "prettier": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.5",
-    "prisma": "^5.14.0",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
+    "mysql2": "^3.11.3",
+    "next": "^14.2.16",
+    "next-auth": "^4.24.10",
+    "postgres": "^3.4.5",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.8",
+    "prisma": "^5.21.1",
+    "react": "rc",
+    "react-dom": "rc",
     "superjson": "^2.2.1",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.14",
     "tsup": "^6.7.0",
     "type-fest": "^3.13.1",
-    "typescript": "^5.5.3",
+    "typescript": "^5.6.3",
     "zod": "^3.23.8"
   }
 }

cli/prettier.config.mjs → cli/prettier.config.js

@@ -1,4 +1,4 @@
-import baseConfig from "../prettier.config.mjs";
+import baseConfig from "../prettier.config.js";
 
 /**
  * @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions &

cli/src/helpers/installDependencies.ts

@@ -55,7 +55,7 @@ const runInstallCommand = async (
 
           if (text.includes("Progress")) {
             spinner.text = text.includes("|")
-              ? text.split(" | ")[1] ?? ""
+              ? (text.split(" | ")[1] ?? "")
               : text;
           }
         },

cli/src/installers/eslint.ts

@@ -1,33 +1,62 @@
 import path from "path";
 import fs from "fs-extra";
+import { format } from "prettier";
 
 import { _initialConfig } from "~/../template/extras/config/_eslint.js";
 import { type Installer } from "~/installers/index.js";
 
 export const dynamicEslintInstaller: Installer = ({ projectDir, packages }) => {
   const usingDrizzle = !!packages?.drizzle?.inUse;
 
-  const eslintConfig = getEslintConfig({ usingDrizzle });
+  const imports = getImports(usingDrizzle);
 
-  // Convert config from _eslint.config.json to .eslintrc.cjs
-  const eslintrcFileContents = [
-    '/** @type {import("eslint").Linter.Config} */',
-    `const config = ${JSON.stringify(eslintConfig, null, 2)}`,
-    "module.exports = config;",
+  const eslintConfig = getEslintConfig(usingDrizzle);
+  const stringifiedConfig = JSON.stringify(eslintConfig, null, 2).replace(
+    /"%%|%%"/g,
+    ""
+  );
+
+  // Convert config from _eslint.js to eslint.config.js
+  const eslintConfigFileContents = [
+    ...imports,
+    "",
+    "export default tseslint.config(",
+    stringifiedConfig,
+    ");",
   ].join("\n");
 
-  const eslintConfigDest = path.join(projectDir, ".eslintrc.cjs");
-  fs.writeFileSync(eslintConfigDest, eslintrcFileContents, "utf-8");
+  format(eslintConfigFileContents, { parser: "typescript" })
+    .then((content) => {
+      const eslintConfigDest = path.join(projectDir, "eslint.config.js");
+      fs.writeFileSync(eslintConfigDest, content, "utf-8");
+    })
+    .catch((error) => {
+      console.error("Invalid 'eslint.config.js'.", error);
+    });
 };
 
-const getEslintConfig = ({ usingDrizzle }: { usingDrizzle: boolean }) => {
+function getImports(usingDrizzle: boolean) {
+  const imports = [
+    'import nextPlugin from "@next/eslint-plugin-next"',
+    'import tseslint from "typescript-eslint"',
+  ];
+
+  if (usingDrizzle) {
+    imports.unshift('import drizzlePlugin from "eslint-plugin-drizzle"');
+  }
+
+  return imports;
+}
+
+function getEslintConfig(usingDrizzle: boolean) {
   const eslintConfig = _initialConfig;
 
   if (usingDrizzle) {
-    eslintConfig.plugins = [...(eslintConfig.plugins ?? []), "drizzle"];
+    Object.assign(eslintConfig.plugins, {
+      drizzle: "%%drizzlePlugin%%",
+    });
 
-    eslintConfig.rules = {
-      ...eslintConfig.rules,
+    Object.assign(eslintConfig.rules, {
       "drizzle/enforce-delete-with-where": [
         "error",
         { drizzleObjectName: ["db", "ctx.db"] },
@@ -36,7 +65,8 @@ const getEslintConfig = ({ usingDrizzle }: { usingDrizzle: boolean }) => {
         "error",
         { drizzleObjectName: ["db", "ctx.db"] },
       ],
-    };
+    });
   }
+
   return eslintConfig;
-};
+}

cli/template/base/next.config.js → cli/template/base/next.config.ts

@@ -1,10 +1,11 @@
+import { type NextConfig } from "next";
+
 /**
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
  * for Docker builds.
  */
-import "./src/env.js";
+import "./src/env";
 
-/** @type {import("next").NextConfig} */
 const config = {
   reactStrictMode: true,
 
@@ -17,7 +18,6 @@ const config = {
     locales: ["en"],
     defaultLocale: "en",
   },
-  transpilePackages: ["geist"],
-};
+} satisfies NextConfig;
 
 export default config;

cli/template/base/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -17,19 +17,21 @@
     "@t3-oss/env-nextjs": "^0.10.1",
     "geist": "^1.3.0",
     "next": "^15.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "rc",
+    "react-dom": "rc",
     "zod": "^3.23.3"
   },
   "devDependencies": {
-    "@types/eslint": "^8.56.10",
-    "@types/node": "^20.14.10",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.1.0",
-    "@typescript-eslint/parser": "^8.1.0",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "^15.0.1",
-    "typescript": "^5.5.3"
+    "@next/eslint-plugin-next": "^15.0.1",
+    "@types/node": "^20.17.1",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
+    "eslint": "^9.13.0",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.11.0"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
   }
 }

cli/template/base/tsconfig.json

@@ -30,7 +30,7 @@
     }
   },
   "include": [
-    ".eslintrc.cjs",
+    "eslint.config.js",
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",

cli/template/extras/config/_eslint.js

@@ -1,13 +1,17 @@
-/** @type {import("eslint").Linter.Config} */
 export const _initialConfig = {
-  parser: "@typescript-eslint/parser",
-  parserOptions: { project: true },
-  plugins: ["@typescript-eslint"],
+  plugins: {
+    "@next/next": "%%nextPlugin%%",
+    "@typescript-eslint": "%%tseslint.plugin%%",
+  },
   extends: [
-    "next/core-web-vitals",
-    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/stylistic-type-checked",
+    "%%...nextPlugin.configs['core-web-vitals'].rules%%",
+    "%%...tseslint.configs.recommendedTypeChecked%%",
+    "%%...tseslint.configs.stylisticTypeChecked%%",
   ],
+  languageOptions: {
+    parser: "%%tseslint.parser%%",
+    parserOptions: { project: true },
+  },
   rules: {
     "@typescript-eslint/array-type": "off",
     "@typescript-eslint/consistent-type-definitions": "off",