Make CLI up-to-date

cli/package.json

@@ -51,48 +51,47 @@
   },
   "dependencies": {
     "@clack/core": "^0.3.4",
-    "@clack/prompts": "^0.6.3",
-    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
-    "chalk": "5.2.0",
-    "commander": "^10.0.1",
-    "execa": "^7.2.0",
+    "@clack/prompts": "^0.7.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "execa": "^9.5.1",
     "fs-extra": "^11.2.0",
-    "gradient-string": "^2.0.2",
-    "ora": "6.3.1",
-    "sort-package-json": "^2.10.0"
+    "gradient-string": "^3.0.0",
+    "ora": "8.1.1",
+    "sort-package-json": "^2.10.1"
   },
   "devDependencies": {
-    "@auth/drizzle-adapter": "^1.1.0",
-    "@auth/prisma-adapter": "^1.6.0",
-    "@libsql/client": "^0.9.0",
+    "@auth/drizzle-adapter": "^1.7.2",
+    "@auth/prisma-adapter": "^2.7.2",
+    "@libsql/client": "^0.14.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.19",
+    "@trpc/client": "11.0.0-rc.608",
+    "@trpc/next": "11.0.0-rc.608",
+    "@trpc/react-query": "11.0.0-rc.608",
+    "@trpc/server": "11.0.0-rc.608",
     "@types/fs-extra": "^11.0.4",
-    "@types/gradient-string": "^1.1.6",
-    "@types/node": "^20.14.10",
-    "drizzle-kit": "^0.24.0",
-    "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",
+    "@types/node": "^20.17.6",
+    "drizzle-kit": "^0.28.0",
+    "drizzle-orm": "^0.36.1",
+    "mysql2": "^3.11.3",
+    "next": "^15.0.2",
+    "next-auth": "5.0.0-beta.25",
+    "postgres": "^3.4.5",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.8",
+    "prisma": "^5.21.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "superjson": "^2.2.1",
-    "tailwindcss": "^3.4.3",
-    "tsup": "^6.7.0",
-    "type-fest": "^3.13.1",
-    "typescript": "^5.5.3",
+    "tailwindcss": "^3.4.14",
+    "tsup": "^8.3.5",
+    "type-fest": "^4.26.1",
+    "typescript": "^5.6.3",
     "zod": "^3.23.8"
   }
 }

cli/src/helpers/installDependencies.ts

@@ -1,5 +1,5 @@
 import chalk from "chalk";
-import { execa, type StdioOption } from "execa";
+import { execa, type StdoutStderrOption } from "execa";
 import ora, { type Ora } from "ora";
 
 import {
@@ -13,7 +13,7 @@ const execWithSpinner = async (
   pkgManager: PackageManager,
   options: {
     args?: string[];
-    stdout?: StdioOption;
+    stdout?: StdoutStderrOption;
     onDataHandle?: (spinner: Ora) => (data: Buffer) => void;
   }
 ) => {
@@ -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,49 @@
 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 rawConfig = getRawEslintConfig(usingDrizzle);
+  const stringConfig = JSON.stringify(rawConfig, null, 2);
+  const configBody = stringConfig.replace(/"%%|%%"/g, "");
 
-  // 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 imports = getImports(usingDrizzle);
+
+  // Convert config from _eslint.js to eslint.config.js
+  const configFileContents = [
+    ...imports,
+    "",
+    "export default tseslint.config(",
+    configBody,
+    ");",
   ].join("\n");
 
-  const eslintConfigDest = path.join(projectDir, ".eslintrc.cjs");
-  fs.writeFileSync(eslintConfigDest, eslintrcFileContents, "utf-8");
+  const configDest = path.join(projectDir, "eslint.config.js");
+  format(configFileContents, { parser: "typescript" })
+    .then((formattedConfigFileContents) => {
+      fs.writeFileSync(configDest, formattedConfigFileContents, "utf-8");
+    })
+    .catch((e) => {
+      console.error("Unable to format ESLint config file.", e);
+      // Write to fs anyway.
+      fs.writeFileSync(configDest, configFileContents, "utf-8");
+    });
 };
 
-const getEslintConfig = ({ usingDrizzle }: { usingDrizzle: boolean }) => {
+function getRawEslintConfig(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 +52,25 @@ const getEslintConfig = ({ usingDrizzle }: { usingDrizzle: boolean }) => {
         "error",
         { drizzleObjectName: ["db", "ctx.db"] },
       ],
-    };
+    });
   }
+
   return eslintConfig;
-};
+}
+
+function getImports(usingDrizzle: boolean): string[] {
+  const imports = [
+    createImport("nextPlugin", "@next/eslint-plugin-next"),
+    createImport("tseslint", "typescript-eslint"),
+  ];
+
+  if (usingDrizzle) {
+    imports.unshift(createImport("drizzlePlugin", "eslint-plugin-drizzle"));
+  }
+
+  return imports;
+}
+
+function createImport(defaultImportName: string, packageName: string): string {
+  return `import ${defaultImportName} from "${packageName}";`;
+}

cli/template/base/next.config.js

@@ -17,7 +17,6 @@ const config = {
     locales: ["en"],
     defaultLocale: "en",
   },
-  transpilePackages: ["geist"],
 };
 
 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",
@@ -14,22 +14,20 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@t3-oss/env-nextjs": "^0.10.1",
-    "geist": "^1.3.0",
-    "next": "^15.0.1",
+    "@t3-oss/env-nextjs": "^0.11.1",
+    "geist": "^1.3.1",
+    "next": "^15.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "zod": "^3.23.3"
+    "zod": "^3.23.8"
   },
   "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.2",
+    "@types/node": "^20.17.6",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "eslint": "^9.14.0",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.13.0"
   }
 }

cli/template/base/tsconfig.json

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

cli/template/extras/config/_eslint.js → cli/template/extras/config/_eslint.ts

@@ -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",

cli/template/extras/config/drizzle-config-mysql.ts

@@ -8,5 +8,6 @@ export default {
   dbCredentials: {
     url: env.DATABASE_URL,
   },
+  casing: "snake_case",
   tablesFilter: ["project1_*"],
 } satisfies Config;

cli/template/extras/config/drizzle-config-postgres.ts

@@ -8,5 +8,6 @@ export default {
   dbCredentials: {
     url: env.DATABASE_URL,
   },
+  casing: "snake_case",
   tablesFilter: ["project1_*"],
 } satisfies Config;

cli/template/extras/config/drizzle-config-sqlite.ts

@@ -8,5 +8,6 @@ export default {
   dbCredentials: {
     url: env.DATABASE_URL,
   },
+  casing: "snake_case",
   tablesFilter: ["project1_*"],
 } satisfies Config;

cli/template/extras/src/server/db/schema-drizzle/base-mysql.ts

@@ -2,13 +2,7 @@
 // https://orm.drizzle.team/docs/sql-schema-declaration
 
 import { sql } from "drizzle-orm";
-import {
-  bigint,
-  index,
-  mysqlTableCreator,
-  timestamp,
-  varchar,
-} from "drizzle-orm/mysql-core";
+import { index, mysqlTableCreator } from "drizzle-orm/mysql-core";
 
 /**
  * This is an example of how to use the multi-project schema feature of Drizzle ORM. Use the same
@@ -20,14 +14,15 @@ export const createTable = mysqlTableCreator((name) => `project1_${name}`);
 
 export const posts = createTable(
   "post",
-  {
-    id: bigint("id", { mode: "number" }).primaryKey().autoincrement(),
-    name: varchar("name", { length: 256 }),
-    createdAt: timestamp("created_at")
+  (t) => ({
+    id: t.bigint({ mode: "number" }).primaryKey().autoincrement(),
+    name: t.varchar({ length: 256 }),
+    createdAt: t
+      .timestamp()
       .default(sql`CURRENT_TIMESTAMP`)
       .notNull(),
-    updatedAt: timestamp("updated_at").onUpdateNow(),
-  },
+    updatedAt: t.timestamp().onUpdateNow(),
+  }),
   (example) => ({
     nameIndex: index("name_idx").on(example.name),
   })

cli/template/extras/src/server/db/schema-drizzle/base-planetscale.ts

@@ -2,13 +2,7 @@
 // https://orm.drizzle.team/docs/sql-schema-declaration
 
 import { sql } from "drizzle-orm";
-import {
-  bigint,
-  index,
-  mysqlTableCreator,
-  timestamp,
-  varchar,
-} from "drizzle-orm/mysql-core";
+import { index, mysqlTableCreator } from "drizzle-orm/mysql-core";
 
 /**
  * This is an example of how to use the multi-project schema feature of Drizzle ORM. Use the same
@@ -20,14 +14,15 @@ export const createTable = mysqlTableCreator((name) => `project1_${name}`);
 
 export const posts = createTable(
   "post",
-  {
-    id: bigint("id", { mode: "number" }).primaryKey().autoincrement(),
-    name: varchar("name", { length: 256 }),
-    createdAt: timestamp("created_at")
+  (t) => ({
+    id: t.bigint({ mode: "number" }).primaryKey().autoincrement(),
+    name: t.varchar({ length: 256 }),
+    createdAt: t
+      .timestamp()
       .default(sql`CURRENT_TIMESTAMP`)
       .notNull(),
-    updatedAt: timestamp("updated_at").onUpdateNow(),
-  },
+    updatedAt: t.timestamp().onUpdateNow(),
+  }),
   (example) => ({
     nameIndex: index("name_idx").on(example.name),
   })