diff --git a/cli/src/installers/dependencyVersionMap.ts b/cli/src/installers/dependencyVersionMap.ts index 8e3787487d..e250b0afe1 100644 --- a/cli/src/installers/dependencyVersionMap.ts +++ b/cli/src/installers/dependencyVersionMap.ts @@ -16,7 +16,6 @@ export const dependencyVersionMap = { // Drizzle "drizzle-kit": "^0.24.0", "drizzle-orm": "^0.33.0", - "eslint-plugin-drizzle": "^0.2.3", mysql2: "^3.11.0", "@planetscale/database": "^1.19.0", postgres: "^3.4.4", @@ -24,9 +23,7 @@ export const dependencyVersionMap = { // TailwindCSS tailwindcss: "^3.4.3", - postcss: "^8.4.39", - prettier: "^3.3.2", - "prettier-plugin-tailwindcss": "^0.6.5", + postcss: "^8.4.39", // tRPC "@trpc/client": "^11.0.0-rc.446", @@ -39,6 +36,17 @@ export const dependencyVersionMap = { // biome "@biomejs/biome": "1.9.4", - //* TODO also add prettier / eslint plugins here + + // eslint / prettier + prettier: "^3.3.2", + "prettier-plugin-tailwindcss": "^0.6.5", + "eslint": "^8.57.0", + "eslint-config-next": "^15.0.1", + "eslint-plugin-drizzle": "^0.2.3", + "@types/eslint": "^8.56.10", + "@typescript-eslint/eslint-plugin": "^8.1.0", + "@typescript-eslint/parser": "^8.1.0", + //* TODO make sure all these are install normally when eslint is selected + } as const; export type AvailableDependencies = keyof typeof dependencyVersionMap; diff --git a/cli/src/installers/drizzle.ts b/cli/src/installers/drizzle.ts index 6b45f1e2a2..bd90ee0c79 100644 --- a/cli/src/installers/drizzle.ts +++ b/cli/src/installers/drizzle.ts @@ -5,7 +5,6 @@ import { type PackageJson } from "type-fest"; import { PKG_ROOT } from "~/consts.js"; import { type Installer } from "~/installers/index.js"; import { addPackageDependency } from "~/utils/addPackageDependency.js"; -import { type AvailableDependencies } from "./dependencyVersionMap.js"; export const drizzleInstaller: Installer = ({ projectDir, @@ -13,14 +12,10 @@ export const drizzleInstaller: Installer = ({ scopedAppName, databaseProvider, }) => { - const devPackages: AvailableDependencies[] = [ - "drizzle-kit", - "eslint-plugin-drizzle", //* TODO make this depend on eslint being installed - ]; addPackageDependency({ projectDir, - dependencies: devPackages, + dependencies: ["drizzle-kit"], devMode: true, }); addPackageDependency({ diff --git a/cli/src/installers/eslint.ts b/cli/src/installers/eslint.ts index 6600168271..549a23f16e 100644 --- a/cli/src/installers/eslint.ts +++ b/cli/src/installers/eslint.ts @@ -1,12 +1,66 @@ import path from "path"; import fs from "fs-extra"; +import { type PackageJson } from "type-fest"; +import { PKG_ROOT } from "~/consts.js"; import { _initialConfig } from "~/../template/extras/config/_eslint.js"; import { type Installer } from "~/installers/index.js"; +import { addPackageDependency } from "~/utils/addPackageDependency.js"; +import { type AvailableDependencies } from "./dependencyVersionMap.js"; + +// Also installs prettier export const dynamicEslintInstaller: Installer = ({ projectDir, packages }) => { - const usingDrizzle = !!packages?.drizzle?.inUse; + const devPackages: AvailableDependencies[] = [ + "prettier", + "eslint", + "eslint-config-next", + "@types/eslint", + "@typescript-eslint/eslint-plugin", + "@typescript-eslint/parser", + ]; + if (packages?.tailwind.inUse) { + devPackages.push("prettier-plugin-tailwindcss"); + } + if (packages?.drizzle.inUse) { + devPackages.push("eslint-plugin-drizzle"); + } + + addPackageDependency({ + projectDir, + dependencies: devPackages, + devMode: true, + }); + const extrasDir = path.join(PKG_ROOT, "template/extras"); + + // Prettier + let prettierSrc: string; + if (packages?.tailwind.inUse) { + prettierSrc = path.join(extrasDir, "config/_tailwind.prettier.config.js"); + } + else { + prettierSrc = path.join(extrasDir, "config/_prettier.config.js"); + } + const prettierDest = path.join(projectDir, "prettier.config.js"); + + fs.copySync(prettierSrc, prettierDest); + + // add format:* scripts to package.json + const packageJsonPath = path.join(projectDir, "package.json"); + const packageJsonContent = fs.readJSONSync(packageJsonPath) as PackageJson; + packageJsonContent.scripts = { + ...packageJsonContent.scripts, + "format:write": 'prettier --write "**/*.{ts,tsx,js,jsx,mdx}" --cache', + "format:check": 'prettier --check "**/*.{ts,tsx,js,jsx,mdx}" --cache', + }; + + fs.writeJSONSync(packageJsonPath, packageJsonContent, { + spaces: 2, + }); + + // eslint + const usingDrizzle = !!packages?.drizzle?.inUse; const eslintConfig = getEslintConfig({ usingDrizzle }); // Convert config from _eslint.config.json to .eslintrc.cjs diff --git a/cli/src/installers/tailwind.ts b/cli/src/installers/tailwind.ts index 53cc1a7137..559150def2 100644 --- a/cli/src/installers/tailwind.ts +++ b/cli/src/installers/tailwind.ts @@ -1,6 +1,5 @@ import path from "path"; import fs from "fs-extra"; -import { type PackageJson } from "type-fest"; import { PKG_ROOT } from "~/consts.js"; import { type Installer } from "~/installers/index.js"; @@ -12,8 +11,6 @@ export const tailwindInstaller: Installer = ({ projectDir }) => { dependencies: [ "tailwindcss", "postcss", - "prettier", - "prettier-plugin-tailwindcss", ], devMode: true, }); @@ -26,30 +23,10 @@ export const tailwindInstaller: Installer = ({ projectDir }) => { const postcssCfgSrc = path.join(extrasDir, "config/postcss.config.js"); const postcssCfgDest = path.join(projectDir, "postcss.config.js"); - const prettierSrc = path.join(extrasDir, "config/_prettier.config.js"); - const prettierDest = path.join(projectDir, "prettier.config.js"); - const cssSrc = path.join(extrasDir, "src/styles/globals.css"); const cssDest = path.join(projectDir, "src/styles/globals.css"); - // add format:* scripts to package.json - const packageJsonPath = path.join(projectDir, "package.json"); - - //* TODO for some reason the prettier related install stuff is here with tailwind, should probably be in its own installer - //* along with biome stuff - //* Update: prettier is not installed if you don't select tailwind css, which really doesn't make sense. Should move it to the eslint installer - const packageJsonContent = fs.readJSONSync(packageJsonPath) as PackageJson; - packageJsonContent.scripts = { - ...packageJsonContent.scripts, - "format:write": 'prettier --write "**/*.{ts,tsx,js,jsx,mdx}" --cache', - "format:check": 'prettier --check "**/*.{ts,tsx,js,jsx,mdx}" --cache', - }; - fs.copySync(twCfgSrc, twCfgDest); fs.copySync(postcssCfgSrc, postcssCfgDest); fs.copySync(cssSrc, cssDest); - fs.copySync(prettierSrc, prettierDest); - fs.writeJSONSync(packageJsonPath, packageJsonContent, { - spaces: 2, - }); }; diff --git a/cli/template/base/package.json b/cli/template/base/package.json index 00ca211bdc..df54d7c844 100644 --- a/cli/template/base/package.json +++ b/cli/template/base/package.json @@ -22,14 +22,9 @@ "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" } } diff --git a/cli/template/extras/config/_prettier.config.js b/cli/template/extras/config/_prettier.config.js index da332bd898..6f1a202fbd 100644 --- a/cli/template/extras/config/_prettier.config.js +++ b/cli/template/extras/config/_prettier.config.js @@ -1,4 +1,2 @@ -/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */ -export default { - plugins: ["prettier-plugin-tailwindcss"], -}; +/** @type {import('prettier').Config} */ +export default {}; diff --git a/cli/template/extras/config/_tailwind.prettier.config.js b/cli/template/extras/config/_tailwind.prettier.config.js new file mode 100644 index 0000000000..da332bd898 --- /dev/null +++ b/cli/template/extras/config/_tailwind.prettier.config.js @@ -0,0 +1,4 @@ +/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */ +export default { + plugins: ["prettier-plugin-tailwindcss"], +};