dev-booster 1.18.0 β 1.18.1
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/package.json +1 -1
- package/template/.devbooster/MANIFEST.md +34 -1
- 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/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 +24 -0
- package/template/.devbooster/rules/PROTOCOL.md +3 -2
- package/template/.devbooster/rules/TRIGGERS.md +14 -0
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
# π TypeScript Patterns
|
|
2
|
+
|
|
3
|
+
> **Purpose:** Problematic patterns and fixes for TypeScript Strict Mode
|
|
4
|
+
> **Primary official sources:** [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/) Β· [TypeScript Release Notes](https://devblogs.microsoft.com/typescript/)
|
|
5
|
+
|
|
6
|
+
## Project Convention Decision Rule
|
|
7
|
+
|
|
8
|
+
Before applying this guidance, verify the installed TypeScript version, `tsconfig`, local rules, existing type abstractions, runtime validation boundaries, 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. [Incorrect Import Path](#incorrect-import-path)
|
|
15
|
+
2. [@ts-ignore vs @ts-expect-error](#ts-ignore-vs-ts-expect-error)
|
|
16
|
+
3. [React useRef Guidance](#react-useref-guidance)
|
|
17
|
+
4. [Function Placement Around Effects](#function-placement-around-effects)
|
|
18
|
+
5. [Duplicate Props in Spread](#duplicate-props-in-spread)
|
|
19
|
+
6. [Explicit Any](#explicit-any)
|
|
20
|
+
7. [Null Check Missing](#null-check-missing)
|
|
21
|
+
8. [Model UI State with Discriminated Unions](#model-ui-state-with-discriminated-unions)
|
|
22
|
+
9. [Validate Untrusted Data at the Runtime Boundary](#validate-untrusted-data-at-the-runtime-boundary)
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## Incorrect Import Path
|
|
27
|
+
|
|
28
|
+
### Problem
|
|
29
|
+
Importing a package subpath that is not part of its documented public API.
|
|
30
|
+
|
|
31
|
+
### Code (symptom)
|
|
32
|
+
```ts
|
|
33
|
+
// WRONG β internal package path (not public API)
|
|
34
|
+
import { SomeType } from 'package-name/src/internal/types'
|
|
35
|
+
|
|
36
|
+
// CORRECT β public export
|
|
37
|
+
import type { SomeType } from 'package-name'
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Why it's a problem
|
|
41
|
+
- A path containing `src/` is not automatically private, but an unexported deep import is not a stable public API
|
|
42
|
+
- Unexported paths can break in future versions without notice
|
|
43
|
+
- Internal types may differ from the package's supported exports
|
|
44
|
+
|
|
45
|
+
### Fix
|
|
46
|
+
1. Check the package documentation and its `package.json` `exports` map
|
|
47
|
+
2. Use the equivalent documented public path
|
|
48
|
+
3. If the needed type is not exported, redesign around the public API or request an export. Avoid copying a package's internal declaration unless you own and can maintain that contract.
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
## @ts-ignore vs @ts-expect-error
|
|
53
|
+
|
|
54
|
+
### Problem
|
|
55
|
+
`@ts-ignore` silently suppresses type errors. If the error is fixed by other changes, the comment becomes orphaned with no warning.
|
|
56
|
+
|
|
57
|
+
### Code (symptom)
|
|
58
|
+
```ts
|
|
59
|
+
// @ts-ignore β if the error disappears, nobody knows
|
|
60
|
+
const result = someFunction()
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Fix
|
|
64
|
+
Replace with `@ts-expect-error`:
|
|
65
|
+
```ts
|
|
66
|
+
// @ts-expect-error β reason: package X's API changed in v2
|
|
67
|
+
const result = someFunction()
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Why it's better
|
|
71
|
+
- If the expected error is resolved, TypeScript reports an **error** for the unused `@ts-expect-error` directive
|
|
72
|
+
- It makes intentional suppressions visible for future cleanup
|
|
73
|
+
- A lint rule such as `@typescript-eslint/ban-ts-comment` can require a description when the project needs one
|
|
74
|
+
|
|
75
|
+
### Exceptions
|
|
76
|
+
- `@ts-nocheck` in generated or third-party files β requires case-by-case analysis
|
|
77
|
+
- Files that will be deleted in an upcoming refactor β may not be worth switching
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
## React useRef Guidance
|
|
82
|
+
|
|
83
|
+
React 19 requires an explicit initial value for `useRef`; this is a React type-definition change, not a consequence of TypeScript strict mode. See the canonical guidance in [React Patterns: useRef Without Initial Value in React 19](./react-patterns.md#useref-without-initial-value-in-react-19).
|
|
84
|
+
|
|
85
|
+
For nullable object references, represent the runtime value honestly and check it before use:
|
|
86
|
+
|
|
87
|
+
```ts
|
|
88
|
+
const socketRef = useRef<Socket | null>(null)
|
|
89
|
+
if (socketRef.current) socketRef.current.send(message)
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## Function Placement Around Effects
|
|
95
|
+
|
|
96
|
+
**Evidence:** Field-validated in a real audit.
|
|
97
|
+
|
|
98
|
+
### Context
|
|
99
|
+
A function declared with `const` after a `useEffect` callback is not necessarily a TypeScript or JavaScript hoisting error because the Effect runs after component initialization. In React code, however, source order can obscure a dependency issue when the helper is recreated during render or omitted from the dependency list.
|
|
100
|
+
|
|
101
|
+
### Guidance
|
|
102
|
+
For the complete React-specific pattern, including the safe alternatives and verification criteria, see [React Patterns: Function Placement Around Effects](./react-patterns.md#function-placement-around-effects).
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## Duplicate Props in Spread
|
|
107
|
+
|
|
108
|
+
### Problem
|
|
109
|
+
A property may be passed through a spread and explicitly. JSX applies props from left to right, so a later explicit prop deterministically overwrites the spread value.
|
|
110
|
+
|
|
111
|
+
### Intentional override
|
|
112
|
+
```tsx
|
|
113
|
+
<Component {...props} size={16} /> // size={16} wins
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Avoid the duplicate
|
|
117
|
+
```tsx
|
|
118
|
+
const { size: _ignoredSize, ...rest } = props
|
|
119
|
+
<Component {...rest} size={16} />
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
## Explicit Any
|
|
125
|
+
|
|
126
|
+
### Problem
|
|
127
|
+
Explicit `any` disables type checking in that section. `noImplicitAny` (included by `strict`) reports implicit `any`, but it does not prohibit an explicit `any` annotation.
|
|
128
|
+
|
|
129
|
+
### Code (symptom)
|
|
130
|
+
```ts
|
|
131
|
+
const data: any = await fetchData() // loses all type safety
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### Fix
|
|
135
|
+
```ts
|
|
136
|
+
// Option 1: A value from a typed, trusted boundary
|
|
137
|
+
const data: ApiResponse = await fetchData()
|
|
138
|
+
|
|
139
|
+
// Option 2: Validate untrusted API or JSON data at runtime
|
|
140
|
+
const data: unknown = await fetchData()
|
|
141
|
+
if (isApiResponse(data)) {
|
|
142
|
+
console.log(data.specificField)
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
---
|
|
147
|
+
|
|
148
|
+
## Null Check Missing
|
|
149
|
+
|
|
150
|
+
### Problem
|
|
151
|
+
`strictNullChecks` reports a nullable value when it is used as though it were non-null. It is enabled by `strict` unless explicitly overridden.
|
|
152
|
+
|
|
153
|
+
### Code (symptom)
|
|
154
|
+
```ts
|
|
155
|
+
const element = document.getElementById('app')
|
|
156
|
+
element.textContent = 'Hello' // β Object is possibly 'null'
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### Fix
|
|
160
|
+
```ts
|
|
161
|
+
// Option 1: Early return
|
|
162
|
+
const element = document.getElementById('app')
|
|
163
|
+
if (!element) return
|
|
164
|
+
element.textContent = 'Hello'
|
|
165
|
+
|
|
166
|
+
// Option 2: Guarded branch
|
|
167
|
+
const root = document.getElementById('app')
|
|
168
|
+
if (root) root.textContent = 'Hello'
|
|
169
|
+
|
|
170
|
+
// Option 3: Non-null assertion, only with a proven runtime invariant
|
|
171
|
+
document.getElementById('app')!.textContent = 'Hello'
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
---
|
|
175
|
+
|
|
176
|
+
## Model UI State with Discriminated Unions
|
|
177
|
+
|
|
178
|
+
### Decision
|
|
179
|
+
When a UI has mutually exclusive async states, model the valid states explicitly instead of combining loosely related booleans such as `isLoading`, `hasError`, and nullable data.
|
|
180
|
+
|
|
181
|
+
### Example
|
|
182
|
+
```ts
|
|
183
|
+
type LoadState<T> =
|
|
184
|
+
| { status: 'idle' }
|
|
185
|
+
| { status: 'loading' }
|
|
186
|
+
| { status: 'success'; data: T }
|
|
187
|
+
| { status: 'error'; error: Error }
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
A `switch` on `status` narrows the available fields and makes unhandled states visible to the compiler.
|
|
191
|
+
|
|
192
|
+
### Verify first
|
|
193
|
+
- Reuse the projectβs existing state/result type when one exists.
|
|
194
|
+
- Do not wrap a query library result in a second state model unless it adds a real domain boundary.
|
|
195
|
+
- Include only states the UI can actually reach; do not create abstractions that hide the library or framework behavior developers maintain.
|
|
196
|
+
|
|
197
|
+
*Source: [TypeScript Handbook β Narrowing](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#discriminated-unions)*
|
|
198
|
+
|
|
199
|
+
---
|
|
200
|
+
|
|
201
|
+
## Validate Untrusted Data at the Runtime Boundary
|
|
202
|
+
|
|
203
|
+
### Decision
|
|
204
|
+
Type annotations do not validate JSON, external API responses, form payloads, storage values, or any value supplied at runtime. Treat untrusted input as `unknown` until a runtime validator, schema, or type guard establishes its shape.
|
|
205
|
+
|
|
206
|
+
### Verify first
|
|
207
|
+
- Reuse the projectβs established validation library and schemas when present.
|
|
208
|
+
- Keep validation near the transport, storage, or form boundary so downstream code receives a trusted type.
|
|
209
|
+
- Do not add a new validation library only to replace a valid project convention.
|
|
210
|
+
|
|
211
|
+
```ts
|
|
212
|
+
const payload: unknown = await response.json()
|
|
213
|
+
if (!isUser(payload)) throw new Error('Invalid user payload')
|
|
214
|
+
// payload is User here
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
Avoid `as User` for external input unless a proven runtime contract already guarantees it and the project convention documents that boundary.
|
|
218
|
+
|
|
219
|
+
*Sources: [TypeScript Handbook β `unknown`](https://www.typescriptlang.org/docs/handbook/2/functions.html#unknown) Β· [TypeScript Handbook β Narrowing](https://www.typescriptlang.org/docs/handbook/2/narrowing.html)*
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
# β οΈ Upgrade Fallout
|
|
2
|
+
|
|
3
|
+
> **Purpose:** Catalog of side effects observed after dependency upgrades
|
|
4
|
+
> **Primary official sources:** [Next.js documentation](https://nextjs.org/docs) Β· [ESLint documentation](https://eslint.org/docs/latest/) Β· [TypeScript TSConfig reference](https://www.typescriptlang.org/tsconfig/) Β· [npm CLI documentation](https://docs.npmjs.com/cli/)
|
|
5
|
+
|
|
6
|
+
## Project Convention Decision Rule
|
|
7
|
+
|
|
8
|
+
Before applying this guidance, verify the installed versions, local rules, existing abstractions, configuration, lockfile, upgrade path, 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. [Script Compatibility β Broken Command Post-Update](#script-compatibility)
|
|
15
|
+
2. [Config Legacy Incompatible β Serialization Error](#config-legacy-incompatible)
|
|
16
|
+
3. [New Lint Rules Exposing Latent Code](#new-lint-rules-exposing-latent-code)
|
|
17
|
+
4. [TSConfig Auto-mutated by Build](#tsconfig-auto-mutated-by-build)
|
|
18
|
+
5. [Config Schema Drift β Property in Wrong Place](#config-schema-drift)
|
|
19
|
+
6. [Peer Warnings Post-Update](#peer-warnings-post-update)
|
|
20
|
+
7. [Residual Risk β What Remains After the Safe Wave](#residual-risk)
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## Script Compatibility
|
|
25
|
+
|
|
26
|
+
### Problem
|
|
27
|
+
A framework update can invalidate `package.json` scripts even when the code compiles without errors.
|
|
28
|
+
|
|
29
|
+
### Generic example
|
|
30
|
+
Starting with Next.js 16, the `next lint` command is removed. A legacy `next lint` script can therefore be interpreted as a request to use `lint` as a project directory.
|
|
31
|
+
|
|
32
|
+
### Symptom
|
|
33
|
+
```
|
|
34
|
+
Invalid project directory provided, no such directory: .../lint
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Fix
|
|
38
|
+
Use the documented Next.js lint migration or migrate explicitly to the ESLint CLI (for example, `next lint` β `eslint .`) only after confirming that ESLint and its configuration are installed and current.
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## Config Legacy Incompatible
|
|
43
|
+
|
|
44
|
+
### Problem
|
|
45
|
+
An upgrade can expose an unsupported legacy configuration loader or serializer. A generic serialization error alone does not prove that legacy configuration is the cause.
|
|
46
|
+
|
|
47
|
+
### Diagnostic workflow
|
|
48
|
+
1. Identify the tool, version, configuration file, and command that produced the error.
|
|
49
|
+
2. Inspect the complete stack trace to find the loader or serializer involved.
|
|
50
|
+
3. Compare the active configuration with the tool's version-specific migration documentation.
|
|
51
|
+
4. Reproduce the failure with the smallest relevant configuration before changing compatibility settings.
|
|
52
|
+
|
|
53
|
+
### Resolution
|
|
54
|
+
Apply the documented migration only after the incompatible mechanism is identified. Record the affected tool and version so the finding remains reproducible.
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## New Lint Rules Exposing Latent Code
|
|
59
|
+
|
|
60
|
+
### Problem
|
|
61
|
+
After migrating to a newer lint configuration, new rules may be enabled and reveal problems that already existed in the code β but were not detected.
|
|
62
|
+
|
|
63
|
+
### Common examples
|
|
64
|
+
- Callback referenced before declaration (incorrect ordering)
|
|
65
|
+
- Non-deterministic logic during render (e.g. `Math.random()` in the component body)
|
|
66
|
+
- Unused import that previously went unnoticed
|
|
67
|
+
|
|
68
|
+
### Critical distinction
|
|
69
|
+
β οΈ **This is not an upgrade regression.** These are latent problems that are now visible because the analysis tools have improved.
|
|
70
|
+
|
|
71
|
+
### Fix
|
|
72
|
+
1. Analyze each error individually
|
|
73
|
+
2. Separate between "actual regression" and "latent code now detected"
|
|
74
|
+
3. Apply specific fixes for each case
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## TSConfig Auto-mutated by Build
|
|
79
|
+
|
|
80
|
+
### Problem
|
|
81
|
+
Framework commands may create or update `tsconfig.json` with recommended settings. The exact behavior and command output depend on the framework and version.
|
|
82
|
+
|
|
83
|
+
### Example change to inspect
|
|
84
|
+
```json
|
|
85
|
+
{
|
|
86
|
+
"compilerOptions": {
|
|
87
|
+
"moduleResolution": "bundler"
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Treatment
|
|
93
|
+
- The new value may be correct for the framework version in use.
|
|
94
|
+
- Review and record the `tsconfig.json` diff and command output.
|
|
95
|
+
- Check for other configuration changes before accepting the update.
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## Config Schema Drift
|
|
100
|
+
|
|
101
|
+
### Problem
|
|
102
|
+
An unsupported configuration property can be mistaken for a version-to-version schema migration. The build may ignore it or emit a warning.
|
|
103
|
+
|
|
104
|
+
### Generic example
|
|
105
|
+
```js
|
|
106
|
+
// Invalid top-level Next.js configuration property
|
|
107
|
+
module.exports = { unoptimized: true }
|
|
108
|
+
|
|
109
|
+
// Valid Next.js Image configuration
|
|
110
|
+
module.exports = { images: { unoptimized: true } }
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Treatment
|
|
114
|
+
- Do not present an unsupported property as a documented migration without version-specific evidence.
|
|
115
|
+
- A build with warnings is not a sign of clean compatibility.
|
|
116
|
+
- Triage warnings tied to the upgrade against the relevant configuration documentation.
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
## Peer Warnings Post-Update
|
|
121
|
+
|
|
122
|
+
### Problem
|
|
123
|
+
After updating a core dependency (e.g. React), libraries with outdated peer ranges may generate warnings.
|
|
124
|
+
|
|
125
|
+
### Common examples
|
|
126
|
+
- UI library with React 18 peer range, after upgrading to React 19
|
|
127
|
+
- Transitive dependency with outdated peer range
|
|
128
|
+
|
|
129
|
+
### Treatment
|
|
130
|
+
- Peer warnings may not appear as lint or build diagnostics, but package-manager policy can turn peer conflicts into install failures.
|
|
131
|
+
- They can also signal build-time or runtime incompatibility.
|
|
132
|
+
- Document unresolved warnings with the dependency path, package-manager behavior, and validation evidence.
|
|
133
|
+
|
|
134
|
+
---
|
|
135
|
+
|
|
136
|
+
## Residual Risk
|
|
137
|
+
|
|
138
|
+
### What remains after the safe wave
|
|
139
|
+
Even after applying eligible updates, residual risks may remain:
|
|
140
|
+
|
|
141
|
+
1. **Direct security exposure** β a confirmed advisory or CVE with no compatible remediation, after assessing reachability
|
|
142
|
+
2. **Transitive toolchain exposure** β findings in build or development tooling whose affected environment is documented separately from runtime exposure
|
|
143
|
+
3. **Unresolved upstream versions** β nested framework copies that remain after provenance confirms the root update cannot change them
|
|
144
|
+
4. **Deferred migration risk** β major migrations that were postponed (e.g. Tailwind 3β4, Chakra 2β3)
|
|
145
|
+
|
|
146
|
+
### How to document
|
|
147
|
+
Use the provenance and exposure classification in [Dependency Guide β Audit Interpretation Rules](dependency-guide.md#audit-interpretation-rules).
|
|
148
|
+
|
|
149
|
+
```markdown
|
|
150
|
+
### Residual Risk
|
|
151
|
+
- **3 unresolved audit findings** β include dependency paths, affected environment, and unavailable remediation
|
|
152
|
+
- **2 peer warnings** β include the peer ranges and package-manager outcome
|
|
153
|
+
- **1 deferred migration**: tailwindcss 3β4 (breaking change)
|
|
154
|
+
```
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
# β‘ Vite Patterns
|
|
2
|
+
|
|
3
|
+
> **Purpose:** Diagnose common Vite configuration, dependency, and environment failures.
|
|
4
|
+
> **Primary official sources:** [Vite Guide](https://vite.dev/guide/) Β· [Env and Mode](https://vite.dev/guide/env-and-mode) Β· [Config](https://vite.dev/config/) Β· [Plugin API](https://vite.dev/guide/api-plugin) Β· [Dependency Pre-Bundling](https://vite.dev/guide/dep-pre-bundling)
|
|
5
|
+
|
|
6
|
+
## Project Convention Decision Rule
|
|
7
|
+
|
|
8
|
+
Before applying this guidance, verify the installed versions, local rules, existing build and plugin conventions, configuration, environment model, 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. [Environment Variables Exposed to the Client](#environment-variables-exposed-to-the-client)
|
|
15
|
+
2. [Development and Production Base Paths Differ](#development-and-production-base-paths-differ)
|
|
16
|
+
3. [Aliases Resolve in Vite but Not TypeScript](#aliases-resolve-in-vite-but-not-typescript)
|
|
17
|
+
4. [ESM and CommonJS Dependency Boundaries](#esm-and-commonjs-dependency-boundaries)
|
|
18
|
+
5. [Dependency Optimization or Cache Staleness](#dependency-optimization-or-cache-staleness)
|
|
19
|
+
6. [Plugin Ordering and Node Runtime Alignment](#plugin-ordering-and-node-runtime-alignment)
|
|
20
|
+
7. [Preserve the Existing React Integration and Build Boundary](#preserve-the-existing-react-integration-and-build-boundary)
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## Environment Variables Exposed to the Client
|
|
25
|
+
|
|
26
|
+
### Symptom
|
|
27
|
+
A value is `undefined` in browser code, or a secret was accidentally included in the browser bundle.
|
|
28
|
+
|
|
29
|
+
### Verify first
|
|
30
|
+
`import.meta.env` is Vite's client-side environment interface. Confirm the variable name, the loaded `.env` file for the active mode, and whether the code runs in the browser rather than only in Node.
|
|
31
|
+
|
|
32
|
+
### Fix
|
|
33
|
+
Only variables beginning with Vite's configured `envPrefix` are exposed to client code; the default prefix is `VITE_`.
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
const apiUrl = import.meta.env.VITE_API_URL
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Do not put credentials, private keys, or server-only tokens in a `VITE_*` variable: any exposed value is bundled into client code. Keep secrets in a server-side boundary.
|
|
40
|
+
|
|
41
|
+
*Source: [Vite β Env Variables and Modes](https://vite.dev/guide/env-and-mode#env-variables)*
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## Development and Production Base Paths Differ
|
|
46
|
+
|
|
47
|
+
### Symptom
|
|
48
|
+
Assets, dynamic imports, or client-side navigation work in development but return 404 after deployment under a subpath.
|
|
49
|
+
|
|
50
|
+
### Verify first
|
|
51
|
+
Identify the deployed public URL (for example, `/` versus `/app/`), inspect generated asset URLs, and distinguish application routing from Vite's asset `base` setting.
|
|
52
|
+
|
|
53
|
+
### Fix
|
|
54
|
+
Set `base` to the public path used by the production host. Use `/` when served from the origin root and a trailing-slash subpath when served below one.
|
|
55
|
+
|
|
56
|
+
```ts
|
|
57
|
+
import { defineConfig } from 'vite'
|
|
58
|
+
|
|
59
|
+
export default defineConfig({
|
|
60
|
+
base: '/app/',
|
|
61
|
+
})
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Use `import.meta.env.BASE_URL` rather than a hard-coded root path when constructing URLs that must respect `base`.
|
|
65
|
+
|
|
66
|
+
*Source: [Vite β Shared Options: base](https://vite.dev/config/shared-options#base)*
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## Aliases Resolve in Vite but Not TypeScript
|
|
71
|
+
|
|
72
|
+
### Symptom
|
|
73
|
+
The app runs, but the editor or `tsc` reports `Cannot find module` for an alias such as `@/ui/button`.
|
|
74
|
+
|
|
75
|
+
### Verify first
|
|
76
|
+
Check that the alias resolves to the same absolute directory in Vite and in the TypeScript configuration actually used by type checking. Also confirm case matches the filesystem.
|
|
77
|
+
|
|
78
|
+
### Fix
|
|
79
|
+
Mirror the alias in both places. Vite resolves bundler imports; TypeScript needs `baseUrl` and `paths` to understand the same specifier.
|
|
80
|
+
|
|
81
|
+
```ts
|
|
82
|
+
// vite.config.ts
|
|
83
|
+
resolve: { alias: { '@': new URL('./src', import.meta.url).pathname } }
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
```json
|
|
87
|
+
{
|
|
88
|
+
"compilerOptions": {
|
|
89
|
+
"baseUrl": ".",
|
|
90
|
+
"paths": { "@/*": ["src/*"] }
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
The precise Vite alias representation can vary by configuration format; verify resolution with the projectβs typecheck and production build.
|
|
96
|
+
|
|
97
|
+
*Sources: [Vite β resolve.alias](https://vite.dev/config/shared-options#resolve-alias), [TypeScript β paths](https://www.typescriptlang.org/tsconfig/#paths)*
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
## ESM and CommonJS Dependency Boundaries
|
|
102
|
+
|
|
103
|
+
### Symptom
|
|
104
|
+
A build or config load fails with errors such as `require() of ES Module not supported`, missing named exports, or an unexpected default import.
|
|
105
|
+
|
|
106
|
+
### Verify first
|
|
107
|
+
Inspect the failing file and the dependency's published `package.json` (`type`, `exports`, and documented import examples). Determine whether the failure is application code, a Vite config/plugin, or a Node script; they may run under different module rules.
|
|
108
|
+
|
|
109
|
+
### Fix
|
|
110
|
+
Use the module syntax supported by the dependency and runtime. For an ESM-only package, migrate the consuming boundary to ESM or use the packageβs documented compatible entry point. Do not rely on undocumented deep imports or assume transpilation changes Node's runtime module rules.
|
|
111
|
+
|
|
112
|
+
For Vite configuration, use the module format supported by the current Vite/Node setup and validate the config with the same Node version used in CI.
|
|
113
|
+
|
|
114
|
+
*Sources: [Node.js β ECMAScript modules](https://nodejs.org/api/esm.html), [Vite β Configuring Vite](https://vite.dev/config/)*
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## Dependency Optimization or Cache Staleness
|
|
119
|
+
|
|
120
|
+
### Symptom
|
|
121
|
+
A newly linked, updated, or conditionally exported dependency behaves differently until a restart; development shows an old export or optimization error.
|
|
122
|
+
|
|
123
|
+
### Verify first
|
|
124
|
+
Confirm the installed dependency version and lockfile, then reproduce with a clean dev-server restart. Check whether the affected package is a dependency that Vite pre-bundles for development.
|
|
125
|
+
|
|
126
|
+
### Fix
|
|
127
|
+
Use Vite's dependency optimizer options only for a demonstrated resolution issue, such as including a dependency that is not discovered or excluding one that must not be pre-bundled. When the dependency graph has changed, force re-optimization rather than treating cache deletion as a permanent fix:
|
|
128
|
+
|
|
129
|
+
```sh
|
|
130
|
+
vite --force
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Vite caches optimized dependencies in `node_modules/.vite`; deleting that cache is a diagnostic reset, not evidence of the underlying cause.
|
|
134
|
+
|
|
135
|
+
*Sources: [Vite β Dependency Pre-Bundling](https://vite.dev/guide/dep-pre-bundling), [Vite β optimizeDeps](https://vite.dev/config/dep-optimization-options)*
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
## Plugin Ordering and Node Runtime Alignment
|
|
140
|
+
|
|
141
|
+
### Symptom
|
|
142
|
+
A transform, virtual module, or generated output is missing; the issue appears only locally or only in CI.
|
|
143
|
+
|
|
144
|
+
### Verify first
|
|
145
|
+
Inspect the final `plugins` array, each plugin's documented compatibility range, and the Node versions in local tooling, CI, and deployment. Check the installed Vite version's current Node requirement rather than assuming a version from another release line.
|
|
146
|
+
|
|
147
|
+
### Fix
|
|
148
|
+
Place plugins in the documented order. When a plugin must run before or after normal plugins, use its supported `enforce: 'pre'` or `enforce: 'post'` hook rather than relying on incidental array position. Align Node versions through the repositoryβs declared runtime mechanism and CI configuration, then reinstall dependencies and run a production build.
|
|
149
|
+
|
|
150
|
+
*Sources: [Vite β Plugin API: Ordering](https://vite.dev/guide/api-plugin#plugin-ordering), [Vite β Getting Started](https://vite.dev/guide/)*
|
|
151
|
+
|
|
152
|
+
---
|
|
153
|
+
|
|
154
|
+
## Validation Checklist
|
|
155
|
+
|
|
156
|
+
1. Run the production build with the intended mode and `base`.
|
|
157
|
+
2. Run type checking to verify aliases outside Viteβs resolver.
|
|
158
|
+
3. Test a fresh dev start after dependency changes; use `--force` only when optimizer state is implicated.
|
|
159
|
+
4. Confirm local and CI Node versions satisfy the installed Vite and plugin requirements.
|
|
160
|
+
5. Inspect built output or a deployed preview for asset and route URLs under the real public path.
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## Preserve the Existing React Integration and Build Boundary
|
|
165
|
+
|
|
166
|
+
### Decision
|
|
167
|
+
Before adding or changing Vite plugins, inspect the active framework integration, JSX transform, test configuration, aliases, and environment conventions. Do not replace a working React integration merely because another official Vite plugin is available.
|
|
168
|
+
|
|
169
|
+
### Verify first
|
|
170
|
+
- Identify the installed Vite and framework-plugin versions and read their compatibility guidance.
|
|
171
|
+
- Reuse the projectβs existing plugin, plugin order, Fast Refresh behavior, and configuration-file format.
|
|
172
|
+
- Keep browser-only environment access behind `import.meta.env`; do not copy Node or Next.js environment conventions into a Vite client bundle.
|
|
173
|
+
- Validate changes with the projectβs typecheck, development startup, and production build.
|
|
174
|
+
|
|
175
|
+
Choose a migration only when the project explicitly requests it or the installed integration is incompatible, deprecated, broken, or unable to support a verified requirement.
|
|
176
|
+
|
|
177
|
+
*Sources: [Vite β Using Plugins](https://vite.dev/guide/using-plugins) Β· [Vite β Features](https://vite.dev/guide/features) Β· [Vite β Env Variables and Modes](https://vite.dev/guide/env-and-mode)*
|
|
@@ -151,6 +151,30 @@ Example:
|
|
|
151
151
|
|
|
152
152
|
---
|
|
153
153
|
|
|
154
|
+
## π KNOWLEDGE BASE
|
|
155
|
+
|
|
156
|
+
Dev Booster ships with a curated knowledge base at `.devbooster/hub/knowledge/`.
|
|
157
|
+
It contains field-validated patterns, migration guides, and technical decisions
|
|
158
|
+
organized by stack. Every article links to official documentation.
|
|
159
|
+
|
|
160
|
+
When a booster encounters a concrete technical finding or non-trivial decision, it
|
|
161
|
+
may consult this base selectively:
|
|
162
|
+
`index.md` β matching article β relevant section only β linked official source
|
|
163
|
+
β reconcile with the actual project context.
|
|
164
|
+
|
|
165
|
+
Articles available:
|
|
166
|
+
- react-patterns, nextjs-pitfalls, typescript-patterns
|
|
167
|
+
- tanstack-patterns, trpc-patterns, testing-patterns
|
|
168
|
+
- tailwind-shadcn-patterns, vite-patterns, eslint-migration
|
|
169
|
+
- dependency-guide, upgrade-fallout, migration-guides
|
|
170
|
+
- nodejs-patterns, package-manager-patterns, monorepo-patterns
|
|
171
|
+
- prisma-postgresql-patterns, nestjs-patterns, angular-patterns
|
|
172
|
+
|
|
173
|
+
The base is read-only. Only project maintainers may update it.
|
|
174
|
+
Boosters never create, modify, or maintain files in the knowledge base.
|
|
175
|
+
|
|
176
|
+
---
|
|
177
|
+
|
|
154
178
|
π‘ INSTANT ROUTING (SHORTCUT TRIGGERS):
|
|
155
179
|
Instead of dragging booster files, you can instantly activate any booster behavior contract
|
|
156
180
|
by typing its corresponding trigger in the chat (e.g., @Context, @Coder, @Builder, @Planning).
|
|
@@ -44,8 +44,9 @@
|
|
|
44
44
|
- **AMBIGUITY FALLBACK:** If the user remains unclear, says they do not know, or delegates discovery entirely (e.g. "research it", "you figure it out"), load the full relevant local context before proceeding. For technical ambiguity, default to loading `.devbooster/rules/FRONTEND.md` and `.devbooster/rules/BACKEND.md` in addition to the always-on base context. Add `.devbooster/rules/COMMERCIAL.md` when the task may involve positioning, copy, or conversion logic.
|
|
45
45
|
|
|
46
46
|
## π 6. PERSISTENCE & SHORTCUTS (TRIGGERS)
|
|
47
|
-
- **TRIGGER ROUTING:** Whenever the user references a `@` trigger (e.g., `@
|
|
48
|
-
- **
|
|
47
|
+
- **TRIGGER ROUTING:** Whenever the user references a `@` trigger (e.g., `@Frontend`, `@Coder`, `@SaveContext`), you MUST read `.devbooster/rules/TRIGGERS.md` to identify the trigger's contract, load the corresponding booster, and enter its contract mode.
|
|
48
|
+
- **ACTIVATION-FIRST:** A trigger activates the booster's contract (Stage 0 / Armed mode) only. It does NOT authorize the booster's full execution flow, analysis, investigation, or implementation. After activation, present the armed-mode banner and wait for the user to provide the concrete task, symptom, or objective before loading deeper context or taking action.
|
|
49
|
+
- **RESTRICTION:** Execute code edits, file writes, or log updates ONLY when explicitly instructed by the trigger contract or a direct user command after activation.
|
|
49
50
|
|
|
50
51
|
---
|
|
51
52
|
*Elite Sovereignty Framework - Conduct Governance 2026*
|
|
@@ -52,3 +52,17 @@ These triggers instantly activate specific booster behavior contracts without re
|
|
|
52
52
|
- **`@Doc`** β Activates `.devbooster/boosters/global-documentation.md` (Universal spec generation).
|
|
53
53
|
- **`@Enhance`** β Activates `.devbooster/boosters/enhance.md` (Evolution mode for adding features to existing projects).
|
|
54
54
|
- **`@UIUX`** β Activates `.devbooster/boosters/ui-ux-pro-max.md` (Premium Design Intelligence β 50+ styles, 97 palettes, 57 fonts, 99 UX guidelines).
|
|
55
|
+
- **`@Frontend`** β Activates `.devbooster/boosters/frontend.md` (Frontend specialist with stack-specific React/Next/Vite/Angular/Tailwind rules).
|
|
56
|
+
- **`@Backend`** β Activates `.devbooster/boosters/backend.md` (Backend architect with API, database, runtime, and validation rules).
|
|
57
|
+
- **`@Refactor`** β Activates `.devbooster/boosters/refactor.md` (Clean Code and SOLID refactoring specialist).
|
|
58
|
+
- **`@Performance`** β Activates `.devbooster/boosters/performance.md` (Web Vitals, bundle optimization, rendering and caching analysis).
|
|
59
|
+
- **`@Testing`** β Activates `.devbooster/boosters/testing.md` (QA and test strategy coordinator for unit, integration, and E2E).
|
|
60
|
+
- **`@Security`** β Activates `.devbooster/boosters/security.md` (Security posture auditor for dependency, supply-chain, and threat analysis).
|
|
61
|
+
- **`@CodeAudit`** β Activates `.devbooster/boosters/code-audit.md` (Strict syntax, lint, React Doctor, and framework diagnostics audit).
|
|
62
|
+
- **`@Design`** β Activates `.devbooster/boosters/design.md` (UI/UX component audit and visual standards validation).
|
|
63
|
+
- **`@Create`** β Activates `.devbooster/boosters/create.md` (Master Architect for scaffolding new features and apps).
|
|
64
|
+
- **`@Accessibility`** β Activates `.devbooster/boosters/accessibility.md` (WCAG compliance and semantic HTML auditor).
|
|
65
|
+
- **`@I18n`** β Activates `.devbooster/boosters/i18n.md` (Internationalization specialist for text extraction and localization).
|
|
66
|
+
- **`@Seo`** β Activates `.devbooster/boosters/seo.md` (SEO audit and semantic HTML compliance check).
|
|
67
|
+
- **`@Mobile`** β Activates `.devbooster/boosters/mobile.md` (Mobile UX patterns for React Native and Expo).
|
|
68
|
+
- **`@InternalDoc`** β Activates `.devbooster/boosters/internal-documentation.md` (Internal project documentation with absolute paths and asset maps).
|