dev-booster 1.18.0 → 1.18.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -2
- package/package.json +1 -1
- package/template/.devbooster/MANIFEST.md +36 -2
- package/template/.devbooster/boosters/advisor.md +5 -0
- package/template/.devbooster/boosters/audit.md +20 -0
- package/template/.devbooster/boosters/auto-triage.md +5 -0
- package/template/.devbooster/boosters/backend.md +12 -0
- package/template/.devbooster/boosters/builder.md +5 -0
- package/template/.devbooster/boosters/code-audit.md +19 -0
- package/template/.devbooster/boosters/coder.md +5 -0
- package/template/.devbooster/boosters/commit.md +233 -0
- package/template/.devbooster/boosters/create.md +5 -0
- package/template/.devbooster/boosters/debug.md +19 -0
- package/template/.devbooster/boosters/deploy.md +12 -0
- package/template/.devbooster/boosters/discovery.md +5 -0
- package/template/.devbooster/boosters/frontend.md +12 -0
- package/template/.devbooster/boosters/implementation.md +5 -0
- package/template/.devbooster/boosters/investigation.md +5 -0
- package/template/.devbooster/boosters/performance.md +12 -0
- package/template/.devbooster/boosters/planning.md +5 -0
- package/template/.devbooster/boosters/refactor.md +12 -0
- package/template/.devbooster/boosters/review.md +12 -0
- package/template/.devbooster/boosters/security.md +14 -0
- package/template/.devbooster/boosters/smart-task.md +27 -16
- package/template/.devbooster/boosters/stack-refresh.md +20 -0
- package/template/.devbooster/boosters/testing.md +12 -0
- package/template/.devbooster/hub/knowledge/angular-patterns.md +185 -0
- package/template/.devbooster/hub/knowledge/dependency-guide.md +175 -0
- package/template/.devbooster/hub/knowledge/eslint-migration.md +206 -0
- package/template/.devbooster/hub/knowledge/index.md +91 -0
- package/template/.devbooster/hub/knowledge/migration-guides.md +137 -0
- package/template/.devbooster/hub/knowledge/monorepo-patterns.md +121 -0
- package/template/.devbooster/hub/knowledge/nestjs-patterns.md +185 -0
- package/template/.devbooster/hub/knowledge/nextjs-pitfalls.md +226 -0
- package/template/.devbooster/hub/knowledge/nodejs-patterns.md +148 -0
- package/template/.devbooster/hub/knowledge/package-manager-patterns.md +143 -0
- package/template/.devbooster/hub/knowledge/prisma-postgresql-patterns.md +188 -0
- package/template/.devbooster/hub/knowledge/react-patterns.md +500 -0
- package/template/.devbooster/hub/knowledge/tailwind-shadcn-patterns.md +146 -0
- package/template/.devbooster/hub/knowledge/tanstack-patterns.md +278 -0
- package/template/.devbooster/hub/knowledge/testing-patterns.md +164 -0
- package/template/.devbooster/hub/knowledge/trpc-patterns.md +212 -0
- package/template/.devbooster/hub/knowledge/typescript-patterns.md +219 -0
- package/template/.devbooster/hub/knowledge/upgrade-fallout.md +154 -0
- package/template/.devbooster/hub/knowledge/vite-patterns.md +177 -0
- package/template/.devbooster/rules/GUIDE.md +26 -0
- package/template/.devbooster/rules/PROTOCOL.md +3 -2
- package/template/.devbooster/rules/TRIGGERS.md +15 -0
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
# 🧹 ESLint Migration
|
|
2
|
+
|
|
3
|
+
> **Purpose:** Migration guidance and common issues for ESLint 9+ and flat config
|
|
4
|
+
> **Primary official sources:** [ESLint configuration migration guide](https://eslint.org/docs/latest/use/configure/migration-guide) · [ESLint configuration files](https://eslint.org/docs/latest/use/configure/configuration-files) · [Next.js ESLint plugin](https://nextjs.org/docs/app/api-reference/config/eslint)
|
|
5
|
+
|
|
6
|
+
## Project Convention Decision Rule
|
|
7
|
+
|
|
8
|
+
Before applying this guidance, verify the installed versions, local rules, existing abstractions, configuration, and tests. Preserve a valid established project convention; do not replace it only because another documented approach is also valid. Use official sources to verify API behavior, compatibility, constraints, and migrations. Recommend a change only when the developer requests it or evidence shows the current approach is incompatible, unsafe, deprecated, broken, or responsible for a verified issue.
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Table of Contents
|
|
13
|
+
|
|
14
|
+
1. [ESLint 9 — Flat Config by Default](#eslint-9--flat-config-by-default)
|
|
15
|
+
2. [Basic JavaScript + React Hooks Config](#basic-javascript--react-hooks-config)
|
|
16
|
+
3. [Configuration for Next.js](#configuration-for-nextjs)
|
|
17
|
+
4. [ESLint-level Masking](#eslint-level-masking)
|
|
18
|
+
5. [Inline Suppressions](#inline-suppressions)
|
|
19
|
+
6. [reportUnusedDisableDirectives](#reportunuseddisabledirectives)
|
|
20
|
+
7. [Resolutions Affecting the Toolchain](#resolutions-affecting-the-toolchain)
|
|
21
|
+
8. [Legacy Config Mode in ESLint 9](#legacy-config-mode-in-eslint-9)
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## ESLint 9 — Flat Config by Default
|
|
26
|
+
|
|
27
|
+
### Status
|
|
28
|
+
Flat config (`eslint.config.*`) is the default configuration format in ESLint 9. Legacy `.eslintrc.*` configuration can still be used in ESLint 9 by setting `ESLINT_USE_FLAT_CONFIG=false`, but that mode is deprecated and is removed in ESLint 10.
|
|
29
|
+
|
|
30
|
+
### Supported config files
|
|
31
|
+
| File | Type |
|
|
32
|
+
|---|---|
|
|
33
|
+
| `eslint.config.js` | ESM or CommonJS, based on `package.json` |
|
|
34
|
+
| `eslint.config.mjs` | ESM |
|
|
35
|
+
| `eslint.config.cjs` | CommonJS |
|
|
36
|
+
| `eslint.config.ts` | TypeScript; requires `jiti` or enabled native Node.js TypeScript support |
|
|
37
|
+
| `eslint.config.mts` | TypeScript ESM; requires the same TypeScript support |
|
|
38
|
+
| `eslint.config.cts` | TypeScript CommonJS; requires the same TypeScript support |
|
|
39
|
+
|
|
40
|
+
For Node.js, TypeScript config files require `jiti` or Node's explicitly enabled native TypeScript support. Node 22.13+ alone is not sufficient without the documented TypeScript-stripping and ESLint feature flags.
|
|
41
|
+
|
|
42
|
+
### Migration checklist
|
|
43
|
+
1. Create `eslint.config.*` at the project root.
|
|
44
|
+
2. Use `@eslint/migrate-config` as a starting point where applicable, then review the result.
|
|
45
|
+
3. Move `.eslintignore` patterns into a flat-config `ignores` object; flat config does not load `.eslintignore` automatically.
|
|
46
|
+
4. For Next.js 16+, replace `next lint` with the ESLint CLI.
|
|
47
|
+
5. Run `eslint .` and use `eslint --inspect-config <file>` to verify important files receive the intended rules.
|
|
48
|
+
6. Update incompatible plugins or use the documented compatibility utilities where necessary.
|
|
49
|
+
7. Remove `.eslintrc.*` and `.eslintignore` only after the flat configuration is verified in local development and CI.
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## Basic JavaScript + React Hooks Config
|
|
54
|
+
|
|
55
|
+
This example is for JavaScript and JSX only. To lint TypeScript, add a TypeScript parser/configuration such as the [official typescript-eslint flat-config setup](https://typescript-eslint.io/getting-started/); merely adding `*.ts` or `*.tsx` file patterns does not parse TypeScript.
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
// eslint.config.js
|
|
59
|
+
import { defineConfig } from "eslint/config";
|
|
60
|
+
import js from "@eslint/js";
|
|
61
|
+
import pluginReactHooks from "eslint-plugin-react-hooks";
|
|
62
|
+
|
|
63
|
+
export default defineConfig([
|
|
64
|
+
{
|
|
65
|
+
files: ["**/*.{js,jsx,mjs,cjs}"],
|
|
66
|
+
plugins: { js },
|
|
67
|
+
extends: ["js/recommended"],
|
|
68
|
+
rules: {
|
|
69
|
+
semi: "error",
|
|
70
|
+
"no-unused-vars": "warn",
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
files: ["**/*.jsx"],
|
|
75
|
+
plugins: { "react-hooks": pluginReactHooks },
|
|
76
|
+
rules: {
|
|
77
|
+
"react-hooks/rules-of-hooks": "error",
|
|
78
|
+
"react-hooks/exhaustive-deps": "warn",
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
]);
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
## Configuration for Next.js
|
|
87
|
+
|
|
88
|
+
For a TypeScript Next.js application, use the documented Next.js flat configs. Omit `nextTs` for a JavaScript-only project.
|
|
89
|
+
|
|
90
|
+
```js
|
|
91
|
+
// eslint.config.mjs
|
|
92
|
+
import { defineConfig, globalIgnores } from "eslint/config";
|
|
93
|
+
import nextVitals from "eslint-config-next/core-web-vitals";
|
|
94
|
+
import nextTs from "eslint-config-next/typescript";
|
|
95
|
+
|
|
96
|
+
export default defineConfig([
|
|
97
|
+
...nextVitals,
|
|
98
|
+
...nextTs,
|
|
99
|
+
globalIgnores([
|
|
100
|
+
".next/**",
|
|
101
|
+
"out/**",
|
|
102
|
+
"build/**",
|
|
103
|
+
"next-env.d.ts",
|
|
104
|
+
]),
|
|
105
|
+
]);
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
## ESLint-level Masking
|
|
111
|
+
|
|
112
|
+
### Problem
|
|
113
|
+
Broad disables and ignore patterns can hide problems, but scoped exceptions are sometimes appropriate for generated code, fixtures, or unsupported environments.
|
|
114
|
+
|
|
115
|
+
### Risky patterns
|
|
116
|
+
```js
|
|
117
|
+
// Broad global rule disables require a documented reason.
|
|
118
|
+
const config = {
|
|
119
|
+
rules: {
|
|
120
|
+
"react-hooks/exhaustive-deps": "off",
|
|
121
|
+
"@typescript-eslint/no-explicit-any": "off",
|
|
122
|
+
},
|
|
123
|
+
};
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### Handling
|
|
127
|
+
- Prefer the narrowest rule override, file pattern, or inline suppression that addresses the specific case.
|
|
128
|
+
- Keep test source linted by default; ignore only generated fixtures, vendor assets, or other verified non-source inputs.
|
|
129
|
+
- Document why an exception is needed and review it when dependencies or code change.
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## Inline Suppressions
|
|
134
|
+
|
|
135
|
+
### Problem
|
|
136
|
+
Comments that suppress ESLint or TypeScript rules need review. Some are legitimate, but each should have a narrow scope and an explanation where the reason is not obvious.
|
|
137
|
+
|
|
138
|
+
### Most common patterns
|
|
139
|
+
```ts
|
|
140
|
+
// @ts-ignore
|
|
141
|
+
// @ts-expect-error — reports an error if no longer needed
|
|
142
|
+
// @ts-nocheck — disables type checking for the entire file
|
|
143
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
### How to handle during audit
|
|
147
|
+
1. Count and classify suppressions by type.
|
|
148
|
+
2. Replace `@ts-ignore` with `@ts-expect-error` when an expected error must remain; fix the type when practical.
|
|
149
|
+
3. Do not remove `@ts-nocheck` without reviewing the full file, especially generated code or third-party declarations.
|
|
150
|
+
4. For `exhaustive-deps`, determine whether the dependency can be added safely before suppressing the rule.
|
|
151
|
+
|
|
152
|
+
---
|
|
153
|
+
|
|
154
|
+
## reportUnusedDisableDirectives
|
|
155
|
+
|
|
156
|
+
### Problem
|
|
157
|
+
Disable comments that no longer suppress a finding remain as clutter and can conceal whether an exception is still needed.
|
|
158
|
+
|
|
159
|
+
*Source: [ESLint configuration files — Report Unused Disable Directives](https://eslint.org/docs/latest/use/configure/configuration-files#report-unused-disable-directives)*
|
|
160
|
+
|
|
161
|
+
### Fix
|
|
162
|
+
```js
|
|
163
|
+
// eslint.config.js
|
|
164
|
+
import { defineConfig } from "eslint/config";
|
|
165
|
+
|
|
166
|
+
export default defineConfig([
|
|
167
|
+
{
|
|
168
|
+
linterOptions: {
|
|
169
|
+
reportUnusedDisableDirectives: "error",
|
|
170
|
+
},
|
|
171
|
+
},
|
|
172
|
+
]);
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
### Why use it
|
|
176
|
+
- Detects suppressions that are no longer needed.
|
|
177
|
+
- Helps clean up code as rules evolve.
|
|
178
|
+
- The default is `"warn"`; using `"error"` makes cleanup enforceable in CI.
|
|
179
|
+
|
|
180
|
+
---
|
|
181
|
+
|
|
182
|
+
## Resolutions Affecting the Toolchain
|
|
183
|
+
|
|
184
|
+
### Problem
|
|
185
|
+
Yarn `resolutions`, npm `overrides`, and `pnpm.overrides` can alter transitive dependencies used by development tools. A broad or incompatible override can break ESLint and related tooling.
|
|
186
|
+
|
|
187
|
+
### Handling
|
|
188
|
+
1. Remove overrides that are no longer needed.
|
|
189
|
+
2. Document the dependency path and reason for every retained override.
|
|
190
|
+
3. Inspect the dependency tree with the package manager in use:
|
|
191
|
+
```bash
|
|
192
|
+
npm ls ajv
|
|
193
|
+
yarn why ajv
|
|
194
|
+
pnpm why ajv
|
|
195
|
+
```
|
|
196
|
+
4. Run linting and the relevant test/build commands after changing an override.
|
|
197
|
+
|
|
198
|
+
---
|
|
199
|
+
|
|
200
|
+
## Legacy Config Mode in ESLint 9
|
|
201
|
+
|
|
202
|
+
### Status
|
|
203
|
+
In ESLint 9, `ESLINT_USE_FLAT_CONFIG=false` can temporarily enable legacy `.eslintrc.*` configuration. ESLint marks that mode as deprecated; it is not available in ESLint 10.
|
|
204
|
+
|
|
205
|
+
### Guidance
|
|
206
|
+
Use legacy mode only as a time-bounded compatibility measure while migrating. Verify plugin and shareable-config compatibility in the actual project, then move to flat config before upgrading to ESLint 10.
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# 📚 Dev Booster — Knowledge Base
|
|
2
|
+
|
|
3
|
+
> Consolidated knowledge base for Dev Booster.
|
|
4
|
+
> Each article documents a problem pattern + validated solution.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## How to Use
|
|
9
|
+
|
|
10
|
+
1. Identify the concrete technical decision or problem pattern (e.g., framework behavior, migration concern, ESLint rule name, error message, or symptom).
|
|
11
|
+
2. Check the index below to locate the relevant article and section.
|
|
12
|
+
3. Use `read_file` with `start_line`/`end_line` to read **only** the necessary local section.
|
|
13
|
+
4. **Always read the official source linked by that section before choosing or applying a solution.** Use the local entry for field-validated context and the official source for current API, version, constraints, and migration guidance.
|
|
14
|
+
5. Inspect the actual project: installed versions, local rules, existing abstractions, configuration, conventions, and relevant tests.
|
|
15
|
+
6. Preserve a valid established project convention. Do not replace it only because another official approach is also valid; recommend a change only when the developer requests it or evidence shows the current approach is incompatible, unsafe, deprecated, broken, or responsible for a verified issue.
|
|
16
|
+
|
|
17
|
+
### Example
|
|
18
|
+
|
|
19
|
+
User reports: `TS2345: Type 'string' is not assignable to type 'number'`
|
|
20
|
+
|
|
21
|
+
1. Identify the pattern → TypeScript strict error on a discriminated union or runtime type mismatch.
|
|
22
|
+
2. Check the index → `typescript-patterns.md` table entry confirms it covers "null safety, discriminated UI states, runtime validation".
|
|
23
|
+
3. Read the relevant section → `read_file` with `start_line`/`end_line` to get only the "null-safety" section of `typescript-patterns.md`.
|
|
24
|
+
4. Read the official source → open the [TypeScript Handbook section on Narrowing](https://www.typescriptlang.org/docs/handbook/2/narrowing.html) to verify current API behavior.
|
|
25
|
+
5. Inspect the project → check `tsconfig.json` strict flags, existing type guards in the codebase, and whether the error is in a new area or a pre-typed module.
|
|
26
|
+
6. Decide → if the project already uses a consistent pattern (e.g. Zod schemas + inferred types), preserve it. Only suggest a different approach if the current one is incompatible, unsafe, or the user explicitly requests a change.
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
### If Not Found in the Base
|
|
31
|
+
|
|
32
|
+
Use the relevant **official source** below. Prefer primary documentation, official changelogs, and official migration guides over blog posts, search snippets, or unverified answers.
|
|
33
|
+
|
|
34
|
+
| Area | Trusted sources |
|
|
35
|
+
|---|---|
|
|
36
|
+
| React | [React documentation](https://react.dev), [useEffect](https://react.dev/reference/react/useEffect), [useState](https://react.dev/reference/react/useState), [useMemo](https://react.dev/reference/react/useMemo), [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect) |
|
|
37
|
+
| React Hooks linting | [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) |
|
|
38
|
+
| Next.js | [Next.js documentation](https://nextjs.org/docs), [Next.js 16 upgrade guide](https://nextjs.org/docs/app/guides/upgrading/version-16), [TypeScript configuration](https://nextjs.org/docs/app/api-reference/config/next-config-js/typescript), [Image configuration](https://nextjs.org/docs/app/api-reference/components/image#configuration-options) |
|
|
39
|
+
| Historical Next.js behavior | [Next.js 15 ESLint configuration](https://nextjs.org/docs/15/app/api-reference/config/next-config-js/eslint) |
|
|
40
|
+
| ESLint | [ESLint configuration files](https://eslint.org/docs/latest/use/configure/configuration-files), [ESLint migration to flat config](https://eslint.org/docs/latest/use/configure/migration-guide) |
|
|
41
|
+
| TypeScript | [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/), [TSConfig reference](https://www.typescriptlang.org/tsconfig/), [TypeScript release notes](https://devblogs.microsoft.com/typescript/) |
|
|
42
|
+
| npm | [npm CLI documentation](https://docs.npmjs.com/cli/), [npm audit](https://docs.npmjs.com/cli/commands/npm-audit), [peer dependency settings](https://docs.npmjs.com/cli/using-npm/config#strict-peer-deps) |
|
|
43
|
+
| Yarn Classic | [Yarn Classic documentation](https://classic.yarnpkg.com/en/docs/), [yarn audit](https://classic.yarnpkg.com/en/docs/cli/audit/), [yarn outdated](https://classic.yarnpkg.com/en/docs/cli/outdated/), [yarn why](https://classic.yarnpkg.com/en/docs/cli/why/) |
|
|
44
|
+
| pnpm | [pnpm documentation](https://pnpm.io/), [pnpm audit](https://pnpm.io/cli/audit), [pnpm why](https://pnpm.io/cli/why), [pnpm workspaces](https://pnpm.io/workspaces) |
|
|
45
|
+
| Node.js | [Node.js API documentation](https://nodejs.org/docs/latest/api/), [Node.js package guidance](https://nodejs.org/en/learn/getting-started/packages) |
|
|
46
|
+
| Monorepos | [npm workspaces](https://docs.npmjs.com/cli/using-npm/workspaces), [Yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces/), [pnpm workspaces](https://pnpm.io/workspaces), [Turborepo documentation](https://turbo.build/docs), [Nx documentation](https://nx.dev/docs) |
|
|
47
|
+
| tRPC | [tRPC documentation](https://trpc.io/docs), [Context](https://trpc.io/docs/server/context), [Procedures](https://trpc.io/docs/server/procedures), [Error handling](https://trpc.io/docs/server/error-handling) |
|
|
48
|
+
| TanStack Query | [TanStack Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview), [Query keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys), [SSR and hydration](https://tanstack.com/query/latest/docs/framework/react/guides/ssr) |
|
|
49
|
+
| Prisma + PostgreSQL | [Prisma documentation](https://www.prisma.io/docs/orm), [Prisma Migrate](https://www.prisma.io/docs/orm/prisma-migrate), [PostgreSQL documentation](https://www.postgresql.org/docs/), [PostgreSQL EXPLAIN](https://www.postgresql.org/docs/current/using-explain.html) |
|
|
50
|
+
| NestJS | [NestJS documentation](https://docs.nestjs.com/), [Modules](https://docs.nestjs.com/modules), [Validation](https://docs.nestjs.com/techniques/validation), [Exception filters](https://docs.nestjs.com/exception-filters) |
|
|
51
|
+
| Vite | [Vite Guide](https://vite.dev/guide/), [Environment variables](https://vite.dev/guide/env-and-mode), [Vite config](https://vite.dev/config/) |
|
|
52
|
+
| Tailwind CSS | [Tailwind documentation](https://tailwindcss.com/docs), [Tailwind v4 upgrade guide](https://tailwindcss.com/docs/upgrade-guide) |
|
|
53
|
+
| Angular | [Angular documentation](https://angular.dev/overview), [Angular version compatibility](https://angular.dev/reference/versions), [Angular CLI](https://angular.dev/cli) |
|
|
54
|
+
| Testing | [Vitest documentation](https://vitest.dev/guide/), [Jest documentation](https://jestjs.io/docs/getting-started), [Playwright documentation](https://playwright.dev/docs/intro) |
|
|
55
|
+
| react-to-print | [Official repository](https://github.com/MatthewHerbst/react-to-print), [v3 changelog](https://github.com/MatthewHerbst/react-to-print/blob/v3.3.0/CHANGELOG.md) |
|
|
56
|
+
| Formik | [Formik Form API](https://formik.org/docs/api/form) |
|
|
57
|
+
| Radix UI | [Radix Primitives documentation](https://www.radix-ui.com/primitives/docs/overview/introduction) |
|
|
58
|
+
| shadcn/ui | [shadcn CLI](https://ui.shadcn.com/docs/cli), [Radix migration](https://ui.shadcn.com/docs/cli#migrate-radix), [Tailwind v4 migration](https://ui.shadcn.com/docs/tailwind-v4) |
|
|
59
|
+
|
|
60
|
+
For a library-specific issue, prioritize the library's official documentation, release notes, changelog, and migration guide. If the official sources do not cover the case, resolve it from the actual project context without writing to this knowledge base.
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
## Articles
|
|
65
|
+
|
|
66
|
+
| File | Stacks | Content |
|
|
67
|
+
|---|---|---|
|
|
68
|
+
| [`react-patterns.md`](./react-patterns.md) | React 19, React Hooks | Effects, derived state, async UI strategy, Suspense boundaries, custom-hook extraction, state mutation |
|
|
69
|
+
| [`nextjs-pitfalls.md`](./nextjs-pitfalls.md) | Next.js 16 | Build/lint changes, config schema drift, Server/Client boundaries, route loading/errors, hydration |
|
|
70
|
+
| [`eslint-migration.md`](./eslint-migration.md) | ESLint 9, Flat Config | Flat config migration, masking, `resolutions`, inline suppressions |
|
|
71
|
+
| [`typescript-patterns.md`](./typescript-patterns.md) | TypeScript Strict | Imports, suppressions, refs, discriminated UI states, runtime validation, null safety |
|
|
72
|
+
| [`dependency-guide.md`](./dependency-guide.md) | npm/yarn/pnpm | Safe update model, dependency analysis, audit interpretation |
|
|
73
|
+
| [`upgrade-fallout.md`](./upgrade-fallout.md) | Multi-stack | Upgrade fallout: scripts, config, new lint rules, validation |
|
|
74
|
+
| [`migration-guides.md`](./migration-guides.md) | Libraries | `react-to-print` v3, Formik + React 19, Radix UI |
|
|
75
|
+
| [`nodejs-patterns.md`](./nodejs-patterns.md) | Node.js | Runtime alignment, ESM/CJS, environment handling, async failures, script portability |
|
|
76
|
+
| [`package-manager-patterns.md`](./package-manager-patterns.md) | npm, Yarn, pnpm | Lockfiles, peers, overrides, audit, workspaces, immutable installs |
|
|
77
|
+
| [`monorepo-patterns.md`](./monorepo-patterns.md) | npm/Yarn/pnpm workspaces, Turbo, Nx | Package boundaries, dependency resolution, shared configs, cache hygiene |
|
|
78
|
+
| [`trpc-patterns.md`](./trpc-patterns.md) | tRPC | Context/auth, input validation, errors, type integrity, router design, transport |
|
|
79
|
+
| [`tanstack-patterns.md`](./tanstack-patterns.md) | TanStack Query | Query ownership, keys, invalidation, async UI states, caching, SSR hydration, cancellation, optimistic updates |
|
|
80
|
+
| [`prisma-postgresql-patterns.md`](./prisma-postgresql-patterns.md) | Prisma, PostgreSQL | Generation drift, migrations, query loading, transactions, indexes, pooling |
|
|
81
|
+
| [`nestjs-patterns.md`](./nestjs-patterns.md) | NestJS | Modules, DI, validation, guards, exceptions, configuration, request scope |
|
|
82
|
+
| [`vite-patterns.md`](./vite-patterns.md) | Vite | Env exposure, base paths, aliases, ESM/CJS, optimizer cache, plugins, React integration |
|
|
83
|
+
| [`tailwind-shadcn-patterns.md`](./tailwind-shadcn-patterns.md) | Tailwind CSS, shadcn/ui | v3/v4 migration, source scanning, tokens, dependencies, themes, design-system reuse |
|
|
84
|
+
| [`testing-patterns.md`](./testing-patterns.md) | Vitest, Jest, Playwright | Environments, determinism, mocks, async UI behavior, isolation, CI parity, validation |
|
|
85
|
+
| [`angular-patterns.md`](./angular-patterns.md) | Angular | Standalone APIs, DI, signals/RxJS, forms, HTTP, routing, version alignment |
|
|
86
|
+
|
|
87
|
+
---
|
|
88
|
+
|
|
89
|
+
## Maintenance (Dev Booster Maintainers Only)
|
|
90
|
+
|
|
91
|
+
This base is manually curated. Only Dev Booster maintainers add, update, or remove content.
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
# 🚚 Migration Guides
|
|
2
|
+
|
|
3
|
+
> **Purpose:** Migration guides for specific libraries with breaking changes observed in real projects
|
|
4
|
+
> **Primary official sources:** [react-to-print repository](https://github.com/MatthewHerbst/react-to-print) · [React documentation](https://react.dev/) · [Radix UI documentation](https://www.radix-ui.com/) · [shadcn/ui documentation](https://ui.shadcn.com/docs)
|
|
5
|
+
|
|
6
|
+
## Project Convention Decision Rule
|
|
7
|
+
|
|
8
|
+
Before applying this guidance, verify the installed versions, local rules, existing abstractions, configuration, and tests. Preserve a valid established project convention; do not replace it only because another documented approach is also valid. Use official sources to verify API behavior, compatibility, constraints, and migrations. Recommend a change only when the developer requests it or evidence shows the current approach is incompatible, unsafe, deprecated, broken, or responsible for a verified issue.
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Index
|
|
13
|
+
|
|
14
|
+
1. [react-to-print v2 → v3](#react-to-print-v2--v3)
|
|
15
|
+
2. [Formik + React 19 — HTML Form Types](#formik--react-19)
|
|
16
|
+
3. [Radix UI — Meta-package vs Individual Packages](#radix-ui-meta-package)
|
|
17
|
+
4. [shadcn/ui — Missing Dependencies](#shadcn-ui-missing-dependencies)
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## react-to-print v2 → v3
|
|
22
|
+
|
|
23
|
+
### Problem
|
|
24
|
+
The `useReactToPrint` API changed significantly from v2 to v3. The `content` option was renamed to `contentRef` and now receives a ref object rather than a callback.
|
|
25
|
+
|
|
26
|
+
### Code (symptom)
|
|
27
|
+
```tsx
|
|
28
|
+
// BEFORE (v2)
|
|
29
|
+
useReactToPrint({ content: () => ref.current })
|
|
30
|
+
|
|
31
|
+
// AFTER (v3)
|
|
32
|
+
useReactToPrint({ contentRef: ref })
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Expected type error
|
|
36
|
+
```
|
|
37
|
+
'content' does not exist in type 'UseReactToPrintOptions'
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Fix
|
|
41
|
+
```tsx
|
|
42
|
+
const contentRef = useRef<HTMLDivElement>(null)
|
|
43
|
+
const print = useReactToPrint({ contentRef })
|
|
44
|
+
|
|
45
|
+
// Attach contentRef to the element to print, then call print from the print trigger.
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Scope
|
|
49
|
+
The documented v3 breaking change is the rename and type change from `content` to `contentRef`. Review the v3 migration notes for its other breaking changes.
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## Formik + React 19
|
|
54
|
+
|
|
55
|
+
### Problem
|
|
56
|
+
React 19 form type errors can result from misaligned `react`, `react-dom`, and `@types/react` versions, including duplicate React type packages. Do not assume that a Formik version alone is the cause.
|
|
57
|
+
|
|
58
|
+
### Type error
|
|
59
|
+
```
|
|
60
|
+
Type '{ children: Element; }' is missing the following properties from type
|
|
61
|
+
'Pick<DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, ...>':
|
|
62
|
+
placeholder, onPointerEnterCapture, onPointerLeaveCapture
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Check first
|
|
66
|
+
1. Align the installed `react`, `react-dom`, `@types/react`, and `@types/react-dom` versions.
|
|
67
|
+
2. Inspect the lockfile and dependency tree for duplicate or incompatible React type packages.
|
|
68
|
+
3. Re-run type checking before changing form markup.
|
|
69
|
+
|
|
70
|
+
### Native form fallback
|
|
71
|
+
Use a native `<form>` only when type alignment does not resolve the issue, and preserve the semantics provided by Formik's `<Form>`:
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
<form
|
|
75
|
+
onReset={formik.handleReset}
|
|
76
|
+
onSubmit={formik.handleSubmit}
|
|
77
|
+
{...formProps}
|
|
78
|
+
>
|
|
79
|
+
{children}
|
|
80
|
+
</form>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Preserve any required forwarded props and refs. `noValidate` is a standard HTML form attribute and can be passed directly when needed.
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
## Radix UI Meta-package
|
|
88
|
+
|
|
89
|
+
### Problem
|
|
90
|
+
A component can import either the unified `radix-ui` package or an individual `@radix-ui/react-*` package. The required installation depends on the actual import specifier in the component source.
|
|
91
|
+
|
|
92
|
+
### Symptom
|
|
93
|
+
```
|
|
94
|
+
Cannot find module 'radix-ui'
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Choose the matching package
|
|
98
|
+
```bash
|
|
99
|
+
# Source imports from "radix-ui"
|
|
100
|
+
yarn add radix-ui
|
|
101
|
+
|
|
102
|
+
# Source imports from "@radix-ui/react-dialog"
|
|
103
|
+
yarn add @radix-ui/react-dialog
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Migration
|
|
107
|
+
For existing shadcn/ui components that use individual Radix imports, use the documented Radix migration to rewrite imports before removing individual packages. Do not add the unified package solely because another component uses a different import style.
|
|
108
|
+
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
## shadcn/ui — Missing Dependencies
|
|
112
|
+
|
|
113
|
+
### Problem
|
|
114
|
+
The standard shadcn CLI installs the dependencies required by the component it adds. Manually copied components, custom registries, or incomplete installs may still reference packages that are absent.
|
|
115
|
+
|
|
116
|
+
### Component-specific patterns
|
|
117
|
+
- `class-variance-authority` — only when the component calls `cva()`
|
|
118
|
+
- `tailwind-merge` — only when the project utility imports it
|
|
119
|
+
- `lucide-react` — only when the component imports Lucide icons
|
|
120
|
+
- `tailwindcss-animate` — legacy Tailwind v3 animation plugin
|
|
121
|
+
- `tw-animate-css` — Tailwind v4 animation package
|
|
122
|
+
|
|
123
|
+
### Fix
|
|
124
|
+
Inspect the component imports and registry metadata, then install only the missing direct dependency. For animations, match the package to the Tailwind version:
|
|
125
|
+
|
|
126
|
+
```bash
|
|
127
|
+
# Tailwind v3
|
|
128
|
+
yarn add -D tailwindcss-animate
|
|
129
|
+
|
|
130
|
+
# Tailwind v4
|
|
131
|
+
yarn add -D tw-animate-css
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### Missing dependency symptom
|
|
135
|
+
```
|
|
136
|
+
Cannot find module 'class-variance-authority'
|
|
137
|
+
```
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
# Monorepo Patterns
|
|
2
|
+
|
|
3
|
+
> **Purpose:** Keep workspace packages, dependency resolution, shared configuration, and task execution reproducible in JavaScript/TypeScript monorepos.
|
|
4
|
+
> **Primary official sources:** [npm workspaces](https://docs.npmjs.com/cli/v11/using-npm/workspaces) · [Yarn workspaces](https://yarnpkg.com/features/workspaces) · [pnpm workspaces](https://pnpm.io/workspaces) · [Turborepo documentation](https://turborepo.com/docs) · [Nx documentation](https://nx.dev/)
|
|
5
|
+
|
|
6
|
+
## Project Convention Decision Rule
|
|
7
|
+
|
|
8
|
+
Before applying this guidance, verify the installed versions, local rules, existing abstractions, configuration, lockfile, workspace layout, and tests. Preserve a valid established project convention; do not replace it only because another documented approach is also valid. Use official sources to verify API behavior, compatibility, constraints, and migrations. Recommend a change only when the developer requests it or evidence shows the current approach is incompatible, unsafe, deprecated, broken, or responsible for a verified issue.
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Table of Contents
|
|
13
|
+
|
|
14
|
+
1. [Workspace Package Boundaries](#workspace-package-boundaries)
|
|
15
|
+
2. [Declared Dependencies and Phantom Dependencies](#declared-dependencies-and-phantom-dependencies)
|
|
16
|
+
3. [Shared Configuration Resolution](#shared-configuration-resolution)
|
|
17
|
+
4. [Task Runner Cache Hygiene](#task-runner-cache-hygiene)
|
|
18
|
+
5. [Workspace-Aware Commands](#workspace-aware-commands)
|
|
19
|
+
6. [Lockfile and Root Toolchain Consistency](#lockfile-and-root-toolchain-consistency)
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Workspace Package Boundaries
|
|
24
|
+
|
|
25
|
+
### Symptom
|
|
26
|
+
A package imports source files from another package's internals, builds only by accident, or cannot be independently published, tested, or consumed.
|
|
27
|
+
|
|
28
|
+
### Verify first
|
|
29
|
+
Check each workspace's `package.json`: `name`, `private`, `exports` (when published), build output, and declared dependencies. Verify that consumers import the package's public name rather than a relative path into its source tree. Workspace discovery is manager-specific; see [npm workspaces](https://docs.npmjs.com/cli/v11/using-npm/workspaces), [Yarn workspaces](https://yarnpkg.com/features/workspaces), and [pnpm workspaces](https://pnpm.io/workspaces).
|
|
30
|
+
|
|
31
|
+
### Fix
|
|
32
|
+
- Give each independently consumed unit an explicit package boundary and public API.
|
|
33
|
+
- Import internal packages by package name, not by relative paths that bypass packaging and export rules.
|
|
34
|
+
- Mark packages not intended for publication as `private`.
|
|
35
|
+
- Keep generated output, package entry points, and export maps consistent with the files produced by the package build.
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Declared Dependencies and Phantom Dependencies
|
|
40
|
+
|
|
41
|
+
### Symptom
|
|
42
|
+
A package builds locally but fails in isolation, after a clean install, or when consumed outside the repository.
|
|
43
|
+
|
|
44
|
+
### Problem
|
|
45
|
+
The package imports a dependency that is only available because another workspace or a hoisted install placed it nearby. This is a phantom dependency.
|
|
46
|
+
|
|
47
|
+
### Fix
|
|
48
|
+
- Declare every runtime, build-time, and type dependency in the package that directly imports it, using the appropriate dependency section.
|
|
49
|
+
- Declare internal workspace relationships explicitly and use the package manager's supported workspace protocol where applicable.
|
|
50
|
+
- Do not rely on hoisting layout, transitive dependencies, or root-level tooling to make an import resolve.
|
|
51
|
+
|
|
52
|
+
### Verify first
|
|
53
|
+
Install from a clean checkout and test/build the affected workspace directly. For publishable packages, validate the packed artifact in a clean temporary consumer. pnpm explains why workspace linking and protocol use are explicit in [workspace settings](https://pnpm.io/workspaces#workspace-protocol-workspace).
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
## Shared Configuration Resolution
|
|
58
|
+
|
|
59
|
+
### Symptom
|
|
60
|
+
A linter, TypeScript compiler, test runner, or bundler behaves differently when launched from the root versus a workspace.
|
|
61
|
+
|
|
62
|
+
### Verify first
|
|
63
|
+
Determine which config file is found, the current working directory, and whether plugins/presets resolve from the root, the workspace, or the config package. Check the tool's own configuration-resolution documentation before moving files or adding duplicate dependencies.
|
|
64
|
+
|
|
65
|
+
### Fix
|
|
66
|
+
- Make shared configuration a versioned workspace package or a clearly owned root configuration, according to the consuming tool's resolution model.
|
|
67
|
+
- Reference shared config through supported package/config mechanisms rather than brittle relative paths when the tool supports it.
|
|
68
|
+
- Put plugins and parsers where the resolver expects them; do not depend on incidental hoisting.
|
|
69
|
+
- Run configuration-sensitive commands from the same scope in local development and CI.
|
|
70
|
+
|
|
71
|
+
For TypeScript project structure and references, use the [TypeScript project references handbook](https://www.typescriptlang.org/docs/handbook/project-references.html).
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## Task Runner Cache Hygiene
|
|
76
|
+
|
|
77
|
+
### Symptom
|
|
78
|
+
A cached task returns stale output, misses a required rebuild after configuration changes, or appears successful without producing expected artifacts.
|
|
79
|
+
|
|
80
|
+
### Verify first
|
|
81
|
+
For the affected task, list its declared inputs, environment variables, dependency tasks, outputs, working directory, and cache mode. Turborepo documents task inputs/outputs and caching in [Turborepo caching](https://turborepo.com/docs/crafting-your-repository/caching); Nx documents inputs and task caching in [Nx cache inputs](https://nx.dev/concepts/how-caching-works#inputs).
|
|
82
|
+
|
|
83
|
+
### Fix
|
|
84
|
+
- Declare outputs precisely so restored cache artifacts match what downstream tasks consume.
|
|
85
|
+
- Include relevant source, lockfile, configuration, generated-schema, and environment inputs in the cache definition.
|
|
86
|
+
- Exclude secrets from cache keys and outputs; use non-secret version markers when configuration must affect caching.
|
|
87
|
+
- Make task dependencies explicit rather than relying on execution order or existing files.
|
|
88
|
+
- Clear or bypass cache only to diagnose incorrect cache inputs; repair the task definition before re-enabling it.
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
## Workspace-Aware Commands
|
|
93
|
+
|
|
94
|
+
### Symptom
|
|
95
|
+
A command runs in every package, runs only at the root, resolves the wrong binary, or changes dependencies in an unintended workspace.
|
|
96
|
+
|
|
97
|
+
### Verify first
|
|
98
|
+
Use the package manager's workspace-listing capability and confirm the target package name. Review the exact command's workspace flags rather than assuming equivalent syntax across managers. npm provides [workspace command guidance](https://docs.npmjs.com/cli/v11/using-npm/workspaces#running-commands-in-the-context-of-workspaces).
|
|
99
|
+
|
|
100
|
+
### Fix
|
|
101
|
+
- Prefer explicit workspace/package selectors for focused install, run, test, and build commands.
|
|
102
|
+
- Use recursive/all-workspace execution only when the task is designed to be independent or ordered by declared dependencies.
|
|
103
|
+
- Keep root scripts as orchestration entry points and package scripts as package-local behavior.
|
|
104
|
+
- In CI, log the selected workspace and command to make scope errors visible.
|
|
105
|
+
|
|
106
|
+
---
|
|
107
|
+
|
|
108
|
+
## Lockfile and Root Toolchain Consistency
|
|
109
|
+
|
|
110
|
+
### Problem
|
|
111
|
+
Different packages or CI jobs use different package-manager versions, lockfile policies, Node versions, or root tool versions, producing incompatible dependency trees and task results.
|
|
112
|
+
|
|
113
|
+
### Fix
|
|
114
|
+
- Maintain a single root lockfile and use the repository's declared package manager everywhere.
|
|
115
|
+
- Pin or otherwise declare the package-manager version with the repository-supported mechanism; Corepack recognizes `packageManager` metadata. See [Node.js Corepack](https://nodejs.org/docs/latest/api/corepack.html).
|
|
116
|
+
- Align Node selection across local development, CI, and containers with the root `engines` policy.
|
|
117
|
+
- Put monorepo-wide task-runner and shared-tool configuration under clear root ownership.
|
|
118
|
+
- Validate CI with a non-mutating install mode, then execute workspace-aware checks from a clean checkout.
|
|
119
|
+
|
|
120
|
+
### Verify first
|
|
121
|
+
Confirm that a clean clone has one expected lockfile, uses the intended manager/runtime, and completes a focused package build followed by the repository's dependency-aware build. Any lockfile modification during validation is a reproducibility failure to investigate, not a change to commit automatically.
|