claude-code-pilot 3.2.0 → 3.3.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/CHANGELOG.md +67 -0
- package/README.md +14 -9
- package/bin/install.js +124 -16
- package/manifest.json +18 -3
- package/package.json +3 -2
- package/src/agents/django-build-resolver.md +252 -0
- package/src/agents/django-reviewer.md +169 -0
- package/src/agents/fastapi-reviewer.md +79 -0
- package/src/agents/fsharp-reviewer.md +109 -0
- package/src/agents/swift-build-resolver.md +170 -0
- package/src/agents/swift-reviewer.md +116 -0
- package/src/commands/ccp/cost-report.md +107 -0
- package/src/commands/ccp/intel.md +3 -3
- package/src/commands/ccp/mvp-phase.md +45 -0
- package/src/commands/ccp/plan-prd.md +160 -0
- package/src/commands/ccp/pr-ecc.md +184 -0
- package/src/commands/ccp/security-scan.md +74 -0
- package/src/hooks/ccp-bash-hook-dispatcher.js +96 -0
- package/src/hooks/ccp-context-monitor.js +23 -0
- package/src/hooks/ccp-doc-file-warning.js +93 -0
- package/src/hooks/ccp-pre-bash-dispatcher.js +24 -0
- package/src/hooks/ccp-write-gateguard.js +868 -0
- package/src/lib/project-detect.js +0 -2
- package/src/lib/shell-substitution.js +499 -0
- package/src/pilot/references/execute-mvp-tdd.md +81 -0
- package/src/pilot/references/mvp-concepts.md +49 -0
- package/src/pilot/references/planner-graphify-auto-update.md +67 -0
- package/src/pilot/references/planner-human-verify-mode.md +57 -0
- package/src/pilot/references/planner-mvp-mode.md +53 -0
- package/src/pilot/references/skeleton-template.md +48 -0
- package/src/pilot/references/spidr-splitting.md +69 -0
- package/src/pilot/references/user-story-template.md +58 -0
- package/src/pilot/references/verify-mvp-mode.md +85 -0
- package/src/pilot/references/worktree-path-safety.md +89 -0
- package/src/pilot/workflows/help.md +5 -0
- package/src/pilot/workflows/mvp-phase.md +199 -0
- package/src/skills/agent-architecture-audit/SKILL.md +256 -0
- package/src/skills/agent-harness-design/SKILL.md +73 -0
- package/src/skills/angular-developer/SKILL.md +154 -0
- package/src/skills/angular-developer/references/angular-animations.md +160 -0
- package/src/skills/angular-developer/references/angular-aria.md +410 -0
- package/src/skills/angular-developer/references/cli.md +86 -0
- package/src/skills/angular-developer/references/component-harnesses.md +59 -0
- package/src/skills/angular-developer/references/component-styling.md +91 -0
- package/src/skills/angular-developer/references/components.md +117 -0
- package/src/skills/angular-developer/references/creating-services.md +97 -0
- package/src/skills/angular-developer/references/data-resolvers.md +69 -0
- package/src/skills/angular-developer/references/define-routes.md +67 -0
- package/src/skills/angular-developer/references/defining-providers.md +72 -0
- package/src/skills/angular-developer/references/di-fundamentals.md +120 -0
- package/src/skills/angular-developer/references/e2e-testing.md +56 -0
- package/src/skills/angular-developer/references/effects.md +83 -0
- package/src/skills/angular-developer/references/hierarchical-injectors.md +43 -0
- package/src/skills/angular-developer/references/host-elements.md +80 -0
- package/src/skills/angular-developer/references/injection-context.md +63 -0
- package/src/skills/angular-developer/references/inputs.md +101 -0
- package/src/skills/angular-developer/references/linked-signal.md +59 -0
- package/src/skills/angular-developer/references/loading-strategies.md +61 -0
- package/src/skills/angular-developer/references/mcp.md +108 -0
- package/src/skills/angular-developer/references/navigate-to-routes.md +69 -0
- package/src/skills/angular-developer/references/outputs.md +86 -0
- package/src/skills/angular-developer/references/reactive-forms.md +122 -0
- package/src/skills/angular-developer/references/rendering-strategies.md +44 -0
- package/src/skills/angular-developer/references/resource.md +77 -0
- package/src/skills/angular-developer/references/route-animations.md +56 -0
- package/src/skills/angular-developer/references/route-guards.md +52 -0
- package/src/skills/angular-developer/references/router-lifecycle.md +45 -0
- package/src/skills/angular-developer/references/router-testing.md +87 -0
- package/src/skills/angular-developer/references/show-routes-with-outlets.md +68 -0
- package/src/skills/angular-developer/references/signal-forms.md +795 -0
- package/src/skills/angular-developer/references/signals-overview.md +94 -0
- package/src/skills/angular-developer/references/tailwind-css.md +69 -0
- package/src/skills/angular-developer/references/template-driven-forms.md +114 -0
- package/src/skills/angular-developer/references/testing-fundamentals.md +65 -0
- package/src/skills/error-handling/SKILL.md +376 -0
- package/src/skills/fastapi-patterns/SKILL.md +327 -0
- package/src/skills/flox-environments/SKILL.md +496 -0
- package/src/skills/fsharp-testing/SKILL.md +280 -0
- package/src/skills/ios-icon-gen/SKILL.md +157 -0
- package/src/skills/ios-icon-gen/scripts/generate_icons.swift +258 -0
- package/src/skills/ios-icon-gen/scripts/iconify_gen.sh +235 -0
- package/src/skills/make-interfaces-feel-better/SKILL.md +151 -0
- package/src/skills/mysql-patterns/SKILL.md +412 -0
- package/src/skills/plan-orchestrate/SKILL.md +220 -0
- package/src/skills/prisma-patterns/SKILL.md +371 -0
- package/src/skills/production-audit/SKILL.md +206 -0
- package/src/skills/security-scan/references/agentshield-policy-exception/candidate-playbook.md +49 -0
- package/src/skills/security-scan/references/agentshield-policy-exception/report.json +35 -0
- package/src/skills/security-scan/references/agentshield-policy-exception/scenario.json +62 -0
- package/src/skills/security-scan/references/agentshield-policy-exception/trace.json +45 -0
- package/src/skills/security-scan/references/agentshield-policy-exception/verifier-result.json +35 -0
- package/src/skills/vite-patterns/SKILL.md +449 -0
- package/src/skills/windows-desktop-e2e/SKILL.md +887 -0
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schema_version": "ecc.evaluator-rag.scenario.v1",
|
|
3
|
+
"scenario_id": "agentshield-policy-exception",
|
|
4
|
+
"title": "Gate AgentShield policy exceptions with report and SARIF evidence",
|
|
5
|
+
"mode": "read_only_prototype",
|
|
6
|
+
"objective": "Given an AgentShield organization-policy finding or proposed exception, retrieve report, SARIF, lifecycle, and ownership evidence before promoting a remediation or time-boxed exception playbook.",
|
|
7
|
+
"sources": [
|
|
8
|
+
{
|
|
9
|
+
"kind": "repo_doc",
|
|
10
|
+
"path": "docs/ECC-2.0-GA-ROADMAP.md",
|
|
11
|
+
"purpose": "Durable record of AgentShield policy gates, SARIF output, policy packs, reports, corpus benchmark, and exception lifecycle audit evidence"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"kind": "repo_command",
|
|
15
|
+
"path": "commands/security-scan.md",
|
|
16
|
+
"purpose": "ECC command contract for running AgentShield and separating scanner facts from follow-up judgment"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"kind": "repo_skill",
|
|
20
|
+
"path": "skills/security-scan/SKILL.md",
|
|
21
|
+
"purpose": "Operator-facing AgentShield scan workflow and output-format guidance"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"kind": "external_pr_evidence",
|
|
25
|
+
"repo": "affaan-m/agentshield",
|
|
26
|
+
"prs": [
|
|
27
|
+
55,
|
|
28
|
+
56,
|
|
29
|
+
57,
|
|
30
|
+
59,
|
|
31
|
+
60,
|
|
32
|
+
62
|
|
33
|
+
],
|
|
34
|
+
"purpose": "Policy gate, SARIF, policy-pack, HTML report, corpus benchmark, and exception lifecycle implementation evidence"
|
|
35
|
+
}
|
|
36
|
+
],
|
|
37
|
+
"retrieval_questions": [
|
|
38
|
+
"Which AgentShield policy finding, category, severity, and affected file or MCP/hook surface triggered the request?",
|
|
39
|
+
"Is there SARIF/code-scanning evidence for an `agentshield-policy/*` result, and does it match the report finding?",
|
|
40
|
+
"Is the exception active, expiring soon, or expired?",
|
|
41
|
+
"Does the exception include owner, ticket, scope, expiry, and rationale fields?",
|
|
42
|
+
"Which policy pack or organization baseline produced the finding?",
|
|
43
|
+
"Is remediation possible now, or is a bounded exception safer than a blanket suppression?"
|
|
44
|
+
],
|
|
45
|
+
"forbidden_actions": [
|
|
46
|
+
"approving policy exceptions without SARIF or report evidence",
|
|
47
|
+
"treating expired exceptions as active",
|
|
48
|
+
"blanket-suppressing AgentShield policy packs or organization-policy gates",
|
|
49
|
+
"downgrading critical/high findings without owner, ticket, scope, and expiry",
|
|
50
|
+
"editing AgentShield code or policy files from this ECC evaluator run",
|
|
51
|
+
"publishing or enforcing new security policy from this read-only evaluator run"
|
|
52
|
+
],
|
|
53
|
+
"acceptance_gates": [
|
|
54
|
+
"SARIF or report evidence is named",
|
|
55
|
+
"finding id, category, severity, and affected surface are preserved",
|
|
56
|
+
"policy pack or organization baseline is named",
|
|
57
|
+
"owner, ticket, scope, and expiry state are recorded",
|
|
58
|
+
"expired exceptions stay rejected or enforced",
|
|
59
|
+
"remediation versus time-boxed exception decision is explicit",
|
|
60
|
+
"at least one blanket suppression candidate is rejected"
|
|
61
|
+
]
|
|
62
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schema_version": "ecc.evaluator-rag.trace.v1",
|
|
3
|
+
"scenario_id": "agentshield-policy-exception",
|
|
4
|
+
"run_id": "2026-05-12-agentshield-policy-exception-prototype",
|
|
5
|
+
"read_only": true,
|
|
6
|
+
"events": [
|
|
7
|
+
{
|
|
8
|
+
"phase": "observation",
|
|
9
|
+
"summary": "A policy finding or exception request references AgentShield organization-policy output. The evaluator records the affected finding without editing AgentShield code, policy packs, or enforcement settings.",
|
|
10
|
+
"evidence": [
|
|
11
|
+
"docs/ECC-2.0-GA-ROADMAP.md",
|
|
12
|
+
"commands/security-scan.md"
|
|
13
|
+
]
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"phase": "retrieval",
|
|
17
|
+
"summary": "Retrieved SARIF/report evidence, policy-pack source, exception lifecycle state, owner, ticket, scope, expiry, and whether remediation is immediately available.",
|
|
18
|
+
"evidence": [
|
|
19
|
+
"agentshield-policy/* SARIF result",
|
|
20
|
+
"AgentShield report exception counts",
|
|
21
|
+
"skills/security-scan/SKILL.md"
|
|
22
|
+
]
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"phase": "proposal",
|
|
26
|
+
"summary": "Generated two candidate playbooks: SARIF-backed time-boxed exception review, and blanket policy suppression for the affected category.",
|
|
27
|
+
"candidate_ids": [
|
|
28
|
+
"sarif-backed-timeboxed-exception-review",
|
|
29
|
+
"blanket-policy-suppression"
|
|
30
|
+
]
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"phase": "verification",
|
|
34
|
+
"summary": "Accepted the evidence-backed exception review because it preserves finding details and lifecycle fields. Rejected blanket suppression because it bypasses policy gates and ignores expired exceptions.",
|
|
35
|
+
"evidence": [
|
|
36
|
+
"examples/evaluator-rag-prototype/agentshield-policy-exception/verifier-result.json"
|
|
37
|
+
]
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"phase": "promotion",
|
|
41
|
+
"summary": "Promoted only the read-only AgentShield policy exception playbook. The evaluator does not modify AgentShield code, policy packs, enforcement settings, release state, or live security posture.",
|
|
42
|
+
"promoted_candidate_id": "sarif-backed-timeboxed-exception-review"
|
|
43
|
+
}
|
|
44
|
+
]
|
|
45
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schema_version": "ecc.evaluator-rag.verifier.v1",
|
|
3
|
+
"scenario_id": "agentshield-policy-exception",
|
|
4
|
+
"run_id": "2026-05-12-agentshield-policy-exception-prototype",
|
|
5
|
+
"read_only": true,
|
|
6
|
+
"candidates": [
|
|
7
|
+
{
|
|
8
|
+
"candidate_id": "sarif-backed-timeboxed-exception-review",
|
|
9
|
+
"decision": "accepted",
|
|
10
|
+
"score": 0.93,
|
|
11
|
+
"reasons": [
|
|
12
|
+
"names SARIF/code-scanning or report evidence for the AgentShield finding",
|
|
13
|
+
"preserves finding id, category, severity, affected surface, and policy-pack source",
|
|
14
|
+
"records owner, ticket, scope, expiry, and active/expiring/expired lifecycle state",
|
|
15
|
+
"rejects expired exceptions and requires remediation or a time-boxed exception",
|
|
16
|
+
"keeps AgentShield code, policy packs, enforcement settings, and release actions out of the read-only evaluator run"
|
|
17
|
+
],
|
|
18
|
+
"rollback": "Do not apply the future exception or suppression; re-run AgentShield, restore the prior organization policy, and keep the finding enforced until owner/ticket/scope/expiry evidence is current."
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"candidate_id": "blanket-policy-suppression",
|
|
22
|
+
"decision": "rejected",
|
|
23
|
+
"score": 0.11,
|
|
24
|
+
"reasons": [
|
|
25
|
+
"has no SARIF or report evidence",
|
|
26
|
+
"blanket-suppresses AgentShield policy packs and organization-policy gates",
|
|
27
|
+
"treats expired exceptions as active",
|
|
28
|
+
"drops owner, ticket, scope, and expiry fields",
|
|
29
|
+
"would edit AgentShield or policy gate behavior from an ECC evaluator run"
|
|
30
|
+
],
|
|
31
|
+
"rollback": "Do not suppress the policy category; restart from scanner evidence, lifecycle state, and a bounded remediation or exception request."
|
|
32
|
+
}
|
|
33
|
+
],
|
|
34
|
+
"promoted_candidate_id": "sarif-backed-timeboxed-exception-review"
|
|
35
|
+
}
|
|
@@ -0,0 +1,449 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: vite-patterns
|
|
3
|
+
description: Vite build tool patterns including config, plugins, HMR, env variables, proxy setup, SSR, library mode, dependency pre-bundling, and build optimization. Activate when working with vite.config.ts, Vite plugins, or Vite-based projects.
|
|
4
|
+
origin: ECC
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Vite Patterns
|
|
8
|
+
|
|
9
|
+
Build tool and dev server patterns for Vite 8+ projects. Covers configuration, environment variables, proxy setup, library mode, dependency pre-bundling, and common production pitfalls.
|
|
10
|
+
|
|
11
|
+
## When to Use
|
|
12
|
+
|
|
13
|
+
- Configuring `vite.config.ts` or `vite.config.js`
|
|
14
|
+
- Setting up environment variables or `.env` files
|
|
15
|
+
- Configuring dev server proxy for API backends
|
|
16
|
+
- Optimizing build output (chunks, minification, assets)
|
|
17
|
+
- Publishing libraries with `build.lib`
|
|
18
|
+
- Troubleshooting dependency pre-bundling or CJS/ESM interop
|
|
19
|
+
- Debugging HMR, dev server, or build errors
|
|
20
|
+
- Choosing or ordering Vite plugins
|
|
21
|
+
|
|
22
|
+
## How It Works
|
|
23
|
+
|
|
24
|
+
- **Dev mode** serves source files as native ESM — no bundling. Transforms happen on-demand per module request, which is why cold starts are fast and HMR is precise.
|
|
25
|
+
- **Build mode** uses Rolldown (v7+) or Rollup (v5–v6) to bundle the app for production with tree-shaking, code-splitting, and Oxc-based minification.
|
|
26
|
+
- **Dependency pre-bundling** converts CJS/UMD deps to ESM once via esbuild and caches the result under `node_modules/.vite`, so subsequent starts skip the work.
|
|
27
|
+
- **Plugins** share a unified interface across dev and build — the same plugin object works for both the dev server's on-demand transforms and the production pipeline.
|
|
28
|
+
- **Environment variables** are statically inlined at build time. `VITE_`-prefixed vars become public constants in the bundle; everything unprefixed is invisible to client code.
|
|
29
|
+
|
|
30
|
+
## Examples
|
|
31
|
+
|
|
32
|
+
### Config Structure
|
|
33
|
+
|
|
34
|
+
#### Basic Config
|
|
35
|
+
|
|
36
|
+
```typescript
|
|
37
|
+
// vite.config.ts
|
|
38
|
+
import { defineConfig } from 'vite'
|
|
39
|
+
import react from '@vitejs/plugin-react'
|
|
40
|
+
|
|
41
|
+
export default defineConfig({
|
|
42
|
+
plugins: [react()],
|
|
43
|
+
resolve: {
|
|
44
|
+
alias: { '@': new URL('./src', import.meta.url).pathname },
|
|
45
|
+
},
|
|
46
|
+
})
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
#### Conditional Config
|
|
50
|
+
|
|
51
|
+
```typescript
|
|
52
|
+
// vite.config.ts
|
|
53
|
+
import { defineConfig, loadEnv } from 'vite'
|
|
54
|
+
import react from '@vitejs/plugin-react'
|
|
55
|
+
|
|
56
|
+
export default defineConfig(({ command, mode }) => {
|
|
57
|
+
const env = loadEnv(mode, process.cwd()) // VITE_ prefixed only (safe)
|
|
58
|
+
|
|
59
|
+
return {
|
|
60
|
+
plugins: [react()],
|
|
61
|
+
server: command === 'serve' ? { port: 3000 } : undefined,
|
|
62
|
+
define: {
|
|
63
|
+
__API_URL__: JSON.stringify(env.VITE_API_URL),
|
|
64
|
+
},
|
|
65
|
+
}
|
|
66
|
+
})
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
#### Key Config Options
|
|
70
|
+
|
|
71
|
+
| Key | Default | Description |
|
|
72
|
+
|-----|---------|-------------|
|
|
73
|
+
| `root` | `'.'` | Project root (where `index.html` lives) |
|
|
74
|
+
| `base` | `'/'` | Public base path for deployed assets |
|
|
75
|
+
| `envPrefix` | `'VITE_'` | Prefix for client-exposed env vars |
|
|
76
|
+
| `build.outDir` | `'dist'` | Output directory |
|
|
77
|
+
| `build.minify` | `'oxc'` | Minifier (`'oxc'`, `'terser'`, or `false`) |
|
|
78
|
+
| `build.sourcemap` | `false` | `true`, `'inline'`, or `'hidden'` |
|
|
79
|
+
|
|
80
|
+
### Plugins
|
|
81
|
+
|
|
82
|
+
#### Essential Plugins
|
|
83
|
+
|
|
84
|
+
Most plugin needs are covered by a handful of well-maintained packages. Reach for these before writing your own.
|
|
85
|
+
|
|
86
|
+
| Plugin | Purpose | When to use |
|
|
87
|
+
|--------|---------|-------------|
|
|
88
|
+
| `@vitejs/plugin-react-swc` | React HMR + Fast Refresh via SWC | Default for React apps (faster than Babel variant) |
|
|
89
|
+
| `@vitejs/plugin-react` | React HMR + Fast Refresh via Babel | Only if you need Babel plugins (emotion, MobX decorators) |
|
|
90
|
+
| `@vitejs/plugin-vue` | Vue 3 SFC support | Vue apps |
|
|
91
|
+
| `vite-plugin-checker` | Runs `tsc` + ESLint in worker thread with HMR overlay | **Any TypeScript app** — Vite does NOT type-check during `vite build` |
|
|
92
|
+
| `vite-tsconfig-paths` | Honors `tsconfig.json` `paths` aliases | Any time you already have aliases in `tsconfig.json` |
|
|
93
|
+
| `vite-plugin-dts` | Emits `.d.ts` files in library mode | Publishing TypeScript libraries |
|
|
94
|
+
| `vite-plugin-svgr` | Imports SVGs as React components | React apps using SVGs as components |
|
|
95
|
+
| `rollup-plugin-visualizer` | Bundle treemap/sunburst report | Periodic bundle size audits (use `enforce: 'post'`) |
|
|
96
|
+
| `vite-plugin-pwa` | Zero-config PWA + Workbox | Offline-capable apps |
|
|
97
|
+
|
|
98
|
+
**Critical callout:** `vite build` transpiles but does NOT type-check. Type errors silently ship to production unless you add `vite-plugin-checker` or run `tsc --noEmit` in CI.
|
|
99
|
+
|
|
100
|
+
#### Authoring Custom Plugins
|
|
101
|
+
|
|
102
|
+
Authoring is rare — most needs are covered by existing plugins. When you do need one, start inline in `vite.config.ts` and only extract if reused.
|
|
103
|
+
|
|
104
|
+
```typescript
|
|
105
|
+
// vite.config.ts — minimal inline plugin
|
|
106
|
+
function myPlugin(): Plugin {
|
|
107
|
+
return {
|
|
108
|
+
name: 'my-plugin', // required, must be unique
|
|
109
|
+
enforce: 'pre', // 'pre' | 'post' (optional)
|
|
110
|
+
apply: 'build', // 'build' | 'serve' (optional)
|
|
111
|
+
transform(code, id) {
|
|
112
|
+
if (!id.endsWith('.custom')) return
|
|
113
|
+
return { code: transformCustom(code), map: null }
|
|
114
|
+
},
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
**Key hooks:** `transform` (modify source), `resolveId` + `load` (virtual modules), `transformIndexHtml` (inject into HTML), `configureServer` (add dev middleware), `hotUpdate` (custom HMR — replaces deprecated `handleHotUpdate` in v7+).
|
|
120
|
+
|
|
121
|
+
**Virtual modules** use the `\0` prefix convention — `resolveId` returns `'\0virtual:my-id'` so other plugins skip it. User code imports `'virtual:my-id'`.
|
|
122
|
+
|
|
123
|
+
For full plugin API, see [vite.dev/guide/api-plugin](https://vite.dev/guide/api-plugin). Use `vite-plugin-inspect` during development to debug the transform pipeline.
|
|
124
|
+
|
|
125
|
+
### HMR API
|
|
126
|
+
|
|
127
|
+
Framework plugins (`@vitejs/plugin-react`, `@vitejs/plugin-vue`, etc.) handle HMR automatically. Reach for `import.meta.hot` directly only when building custom state stores, dev tools, or framework-agnostic utilities that need to persist state across updates.
|
|
128
|
+
|
|
129
|
+
```typescript
|
|
130
|
+
// src/store.ts — manual HMR for a vanilla module
|
|
131
|
+
if (import.meta.hot) {
|
|
132
|
+
// Persist state across updates (must MUTATE, never reassign .data)
|
|
133
|
+
import.meta.hot.data.count = import.meta.hot.data.count ?? 0
|
|
134
|
+
|
|
135
|
+
// Cleanup side effects before module is replaced
|
|
136
|
+
import.meta.hot.dispose((data) => clearInterval(data.intervalId))
|
|
137
|
+
|
|
138
|
+
// Accept this module's own updates
|
|
139
|
+
import.meta.hot.accept()
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
All `import.meta.hot` code is tree-shaken out of production builds — no guard removal needed.
|
|
144
|
+
|
|
145
|
+
### Environment Variables
|
|
146
|
+
|
|
147
|
+
Vite loads `.env`, `.env.local`, `.env.[mode]`, and `.env.[mode].local` in that order (later overrides earlier); `*.local` files are gitignored and meant for local secrets.
|
|
148
|
+
|
|
149
|
+
#### Client-Side Access
|
|
150
|
+
|
|
151
|
+
Only `VITE_`-prefixed vars are exposed to client code:
|
|
152
|
+
|
|
153
|
+
```typescript
|
|
154
|
+
import.meta.env.VITE_API_URL // string
|
|
155
|
+
import.meta.env.MODE // 'development' | 'production' | custom
|
|
156
|
+
import.meta.env.BASE_URL // base config value
|
|
157
|
+
import.meta.env.DEV // boolean
|
|
158
|
+
import.meta.env.PROD // boolean
|
|
159
|
+
import.meta.env.SSR // boolean
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
#### Using Env in Config
|
|
163
|
+
|
|
164
|
+
```typescript
|
|
165
|
+
// vite.config.ts
|
|
166
|
+
import { defineConfig, loadEnv } from 'vite'
|
|
167
|
+
|
|
168
|
+
export default defineConfig(({ mode }) => {
|
|
169
|
+
const env = loadEnv(mode, process.cwd()) // VITE_ prefixed only (safe)
|
|
170
|
+
return {
|
|
171
|
+
define: {
|
|
172
|
+
__API_URL__: JSON.stringify(env.VITE_API_URL),
|
|
173
|
+
},
|
|
174
|
+
}
|
|
175
|
+
})
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
### Security
|
|
179
|
+
|
|
180
|
+
#### `VITE_` Prefix is NOT a Security Boundary
|
|
181
|
+
|
|
182
|
+
Any variable prefixed with `VITE_` is **statically inlined into the client bundle at build time**. Minification, base64 encoding, and disabling source maps do NOT hide it. A determined attacker can extract any `VITE_` var from the shipped JavaScript.
|
|
183
|
+
|
|
184
|
+
**Rule:** Only public values (API URLs, feature flags, public keys) go in `VITE_` vars. Secrets (API tokens, database URLs, private keys) MUST live server-side behind an API or serverless function.
|
|
185
|
+
|
|
186
|
+
#### The `loadEnv('')` Trap
|
|
187
|
+
|
|
188
|
+
```typescript
|
|
189
|
+
// BAD: passing '' as the third arg loads ALL env vars — including server secrets —
|
|
190
|
+
// and makes them available to inline into client code via `define`.
|
|
191
|
+
const env = loadEnv(mode, process.cwd(), '')
|
|
192
|
+
|
|
193
|
+
// GOOD: explicit prefix list
|
|
194
|
+
const env = loadEnv(mode, process.cwd(), ['VITE_', 'APP_'])
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
#### Source Maps in Production
|
|
198
|
+
|
|
199
|
+
Production source maps leak your original source code. Disable them unless you upload to an error tracker (Sentry, Bugsnag) and delete locally afterward:
|
|
200
|
+
|
|
201
|
+
```typescript
|
|
202
|
+
build: {
|
|
203
|
+
sourcemap: false, // default — keep it this way
|
|
204
|
+
}
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
#### `.gitignore` Checklist
|
|
208
|
+
|
|
209
|
+
- `.env.local`, `.env.*.local` — local secret overrides
|
|
210
|
+
- `dist/` — build output
|
|
211
|
+
- `node_modules/.vite` — pre-bundle cache (stale entries cause phantom errors)
|
|
212
|
+
|
|
213
|
+
### Server Proxy
|
|
214
|
+
|
|
215
|
+
```typescript
|
|
216
|
+
// vite.config.ts — server.proxy
|
|
217
|
+
server: {
|
|
218
|
+
proxy: {
|
|
219
|
+
'/foo': 'http://localhost:4567', // string shorthand
|
|
220
|
+
|
|
221
|
+
'/api': {
|
|
222
|
+
target: 'http://localhost:8080',
|
|
223
|
+
changeOrigin: true, // needed for virtual-hosted backends
|
|
224
|
+
rewrite: (path) => path.replace(/^\/api/, ''),
|
|
225
|
+
},
|
|
226
|
+
},
|
|
227
|
+
}
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
For WebSocket proxying, add `ws: true` to the route config.
|
|
231
|
+
|
|
232
|
+
### Build Optimization
|
|
233
|
+
|
|
234
|
+
#### Manual Chunks
|
|
235
|
+
|
|
236
|
+
```typescript
|
|
237
|
+
// vite.config.ts — build.rolldownOptions
|
|
238
|
+
build: {
|
|
239
|
+
rolldownOptions: {
|
|
240
|
+
output: {
|
|
241
|
+
// Object form: group specific packages
|
|
242
|
+
manualChunks: {
|
|
243
|
+
'react-vendor': ['react', 'react-dom'],
|
|
244
|
+
'ui-vendor': ['@radix-ui/react-dialog', '@radix-ui/react-popover'],
|
|
245
|
+
},
|
|
246
|
+
},
|
|
247
|
+
},
|
|
248
|
+
}
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
```typescript
|
|
252
|
+
// Function form: split by heuristic
|
|
253
|
+
manualChunks(id) {
|
|
254
|
+
if (id.includes('node_modules/react')) return 'react-vendor'
|
|
255
|
+
if (id.includes('node_modules')) return 'vendor'
|
|
256
|
+
}
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
### Performance
|
|
260
|
+
|
|
261
|
+
#### Avoid Barrel Files
|
|
262
|
+
|
|
263
|
+
Barrel files (`index.ts` re-exporting everything from a directory) force Vite to load every re-exported file even when you import a single symbol. This is the #1 dev-server slowdown flagged by the official docs.
|
|
264
|
+
|
|
265
|
+
```typescript
|
|
266
|
+
// BAD — importing one util forces Vite to load the whole barrel
|
|
267
|
+
import { slash } from '@/utils'
|
|
268
|
+
|
|
269
|
+
// GOOD — direct import, only the one file is loaded
|
|
270
|
+
import { slash } from '@/utils/slash'
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
#### Be Explicit with Import Extensions
|
|
274
|
+
|
|
275
|
+
Each implicit extension forces up to 6 filesystem checks via `resolve.extensions`. In large codebases, this adds up.
|
|
276
|
+
|
|
277
|
+
```typescript
|
|
278
|
+
// BAD
|
|
279
|
+
import Component from './Component'
|
|
280
|
+
|
|
281
|
+
// GOOD
|
|
282
|
+
import Component from './Component.tsx'
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
Narrow `tsconfig.json` `allowImportingTsExtensions` + `resolve.extensions` to only the extensions you actually use.
|
|
286
|
+
|
|
287
|
+
#### Warm-Up Hot-Path Routes
|
|
288
|
+
|
|
289
|
+
`server.warmup.clientFiles` pre-transforms known hot entries before the browser requests them — eliminating the cold-load request waterfall on large apps.
|
|
290
|
+
|
|
291
|
+
```typescript
|
|
292
|
+
// vite.config.ts
|
|
293
|
+
server: {
|
|
294
|
+
warmup: {
|
|
295
|
+
clientFiles: ['./src/main.tsx', './src/routes/**/*.tsx'],
|
|
296
|
+
},
|
|
297
|
+
}
|
|
298
|
+
```
|
|
299
|
+
|
|
300
|
+
#### Profiling Slow Dev Servers
|
|
301
|
+
|
|
302
|
+
When `vite dev` feels slow, start with `vite --profile`, interact with the app, then press `p+enter` to save a `.cpuprofile`. Load it in [Speedscope](https://www.speedscope.app) to find which plugins are eating time — usually `buildStart`, `config`, or `configResolved` hooks in community plugins.
|
|
303
|
+
|
|
304
|
+
### Library Mode
|
|
305
|
+
|
|
306
|
+
When publishing an npm package, use `build.lib`. Two footguns matter more than config detail:
|
|
307
|
+
|
|
308
|
+
1. **Types are not emitted** — add `vite-plugin-dts` or run `tsc --emitDeclarationOnly` separately.
|
|
309
|
+
2. **Peer dependencies MUST be externalized** — unlisted peers get bundled into your library, causing duplicate-runtime errors in consumers.
|
|
310
|
+
|
|
311
|
+
```typescript
|
|
312
|
+
// vite.config.ts
|
|
313
|
+
build: {
|
|
314
|
+
lib: {
|
|
315
|
+
entry: 'src/index.ts',
|
|
316
|
+
formats: ['es', 'cjs'],
|
|
317
|
+
fileName: (format) => `my-lib.${format}.js`,
|
|
318
|
+
},
|
|
319
|
+
rolldownOptions: {
|
|
320
|
+
external: ['react', 'react-dom', 'react/jsx-runtime'], // every peer dep
|
|
321
|
+
},
|
|
322
|
+
}
|
|
323
|
+
```
|
|
324
|
+
|
|
325
|
+
### SSR Externals
|
|
326
|
+
|
|
327
|
+
Bare `createServer({ middlewareMode: true })` setups are framework-author territory. Most apps should use Nuxt, Remix, SvelteKit, Astro, or TanStack Start instead. What you *will* tweak as a framework user is the externals config when deps break in SSR:
|
|
328
|
+
|
|
329
|
+
```typescript
|
|
330
|
+
// vite.config.ts — ssr options
|
|
331
|
+
ssr: {
|
|
332
|
+
external: ['node-native-package'], // keep as require() in SSR bundle
|
|
333
|
+
noExternal: ['esm-only-package'], // force-bundle into SSR output (fixes most SSR errors)
|
|
334
|
+
target: 'node', // 'node' or 'webworker'
|
|
335
|
+
}
|
|
336
|
+
```
|
|
337
|
+
|
|
338
|
+
### Dependency Pre-Bundling
|
|
339
|
+
|
|
340
|
+
Vite pre-bundles dependencies to convert CJS/UMD to ESM and reduce request count.
|
|
341
|
+
|
|
342
|
+
```typescript
|
|
343
|
+
// vite.config.ts — optimizeDeps
|
|
344
|
+
optimizeDeps: {
|
|
345
|
+
include: [
|
|
346
|
+
'lodash-es', // force pre-bundle known heavy deps
|
|
347
|
+
'cjs-package', // CJS deps that cause interop issues
|
|
348
|
+
'deep-lib/components/**', // glob for deep imports
|
|
349
|
+
],
|
|
350
|
+
exclude: ['local-esm-package'], // must be valid ESM if excluded
|
|
351
|
+
force: true, // ignore cache, re-optimize (temporary debugging)
|
|
352
|
+
}
|
|
353
|
+
```
|
|
354
|
+
|
|
355
|
+
### Common Pitfalls
|
|
356
|
+
|
|
357
|
+
#### Dev Does Not Match Build
|
|
358
|
+
|
|
359
|
+
Dev uses esbuild/Rolldown for transforms; build uses Rolldown for bundling. CJS libraries can behave differently between the two. Always verify with `vite build && vite preview` before deploying.
|
|
360
|
+
|
|
361
|
+
#### Stale Chunks After Deployment
|
|
362
|
+
|
|
363
|
+
New builds produce new chunk hashes. Users with active sessions request old filenames that no longer exist. Vite has no built-in solution. Mitigations:
|
|
364
|
+
|
|
365
|
+
- Keep old `dist/assets/` files live for a deployment window
|
|
366
|
+
- Catch dynamic import errors in your router and force a page reload
|
|
367
|
+
|
|
368
|
+
#### Docker and Containers
|
|
369
|
+
|
|
370
|
+
Vite binds to `localhost` by default, which is unreachable from outside a container:
|
|
371
|
+
|
|
372
|
+
```typescript
|
|
373
|
+
// vite.config.ts — Docker/container setup
|
|
374
|
+
server: {
|
|
375
|
+
host: true, // bind 0.0.0.0
|
|
376
|
+
hmr: { clientPort: 3000 }, // if behind a reverse proxy
|
|
377
|
+
}
|
|
378
|
+
```
|
|
379
|
+
|
|
380
|
+
#### Monorepo File Access
|
|
381
|
+
|
|
382
|
+
Vite restricts file serving to the project root. Packages outside root are blocked:
|
|
383
|
+
|
|
384
|
+
```typescript
|
|
385
|
+
// vite.config.ts — monorepo file access
|
|
386
|
+
server: {
|
|
387
|
+
fs: {
|
|
388
|
+
allow: ['..'], // allow parent directory (workspace root)
|
|
389
|
+
},
|
|
390
|
+
}
|
|
391
|
+
```
|
|
392
|
+
|
|
393
|
+
### Anti-Patterns
|
|
394
|
+
|
|
395
|
+
```typescript
|
|
396
|
+
// BAD: Setting envPrefix to '' exposes ALL env vars (including secrets) to the client
|
|
397
|
+
envPrefix: ''
|
|
398
|
+
|
|
399
|
+
// BAD: Assuming require() works in application source code — Vite is ESM-first
|
|
400
|
+
const lib = require('some-lib') // use import instead
|
|
401
|
+
|
|
402
|
+
// BAD: Splitting every node_module into its own chunk — creates hundreds of tiny files
|
|
403
|
+
manualChunks(id) {
|
|
404
|
+
if (id.includes('node_modules')) {
|
|
405
|
+
return id.split('node_modules/')[1].split('/')[0] // one chunk per package
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
// BAD: Not externalizing peer deps in library mode — causes duplicate runtime errors
|
|
410
|
+
// build.lib without rolldownOptions.external
|
|
411
|
+
|
|
412
|
+
// BAD: Using deprecated esbuild minifier
|
|
413
|
+
build: { minify: 'esbuild' } // use 'oxc' (default) or 'terser'
|
|
414
|
+
|
|
415
|
+
// BAD: Mutating import.meta.hot.data by reassignment
|
|
416
|
+
import.meta.hot.data = { count: 0 } // WRONG: must mutate properties, not reassign
|
|
417
|
+
import.meta.hot.data.count = 0 // CORRECT
|
|
418
|
+
```
|
|
419
|
+
|
|
420
|
+
**Process anti-patterns:**
|
|
421
|
+
|
|
422
|
+
- **`vite preview` is NOT a production server** — it is a smoke test for the built bundle. Deploy `dist/` to a real static host (NGINX, Cloudflare Pages, Vercel static) or use a multi-stage Dockerfile.
|
|
423
|
+
- **Expecting `vite build` to type-check** — it only transpiles. Type errors silently ship to production. Add `vite-plugin-checker` or run `tsc --noEmit` in CI.
|
|
424
|
+
- **Shipping `@vitejs/plugin-legacy` by default** — it bloats bundles ~40%, breaks source-map bundle analyzers, and is unnecessary for the 95%+ of users on modern browsers. Gate it on real analytics, not assumption.
|
|
425
|
+
- **Hand-rolling 30+ `resolve.alias` entries that duplicate `tsconfig.json` paths** — use `vite-tsconfig-paths` instead. Observed in Excalidraw and PostHog; avoid in new projects.
|
|
426
|
+
- **Leaving stale `node_modules/.vite` after dep changes** — pre-bundle cache causes phantom errors. Clear it when switching branches or after patching deps.
|
|
427
|
+
|
|
428
|
+
## Quick Reference
|
|
429
|
+
|
|
430
|
+
| Pattern | When to Use |
|
|
431
|
+
|---------|-------------|
|
|
432
|
+
| `defineConfig` | Always — provides type inference |
|
|
433
|
+
| `loadEnv(mode, root, ['VITE_'])` | Access env vars in config (explicit prefix) |
|
|
434
|
+
| `vite-plugin-checker` | Any TypeScript app (fills the type-check gap) |
|
|
435
|
+
| `vite-tsconfig-paths` | Instead of hand-rolled `resolve.alias` |
|
|
436
|
+
| `optimizeDeps.include` | CJS deps causing interop issues |
|
|
437
|
+
| `server.proxy` | Route API requests to backend in dev |
|
|
438
|
+
| `server.host: true` | Docker, containers, remote access |
|
|
439
|
+
| `server.warmup.clientFiles` | Pre-transform hot-path routes |
|
|
440
|
+
| `build.lib` + `external` | Publishing npm packages |
|
|
441
|
+
| `manualChunks` (object) | Vendor bundle splitting |
|
|
442
|
+
| `vite --profile` | Debug slow dev server |
|
|
443
|
+
| `vite build && vite preview` | Smoke-test prod bundle locally (NOT a prod server) |
|
|
444
|
+
|
|
445
|
+
## Related Skills
|
|
446
|
+
|
|
447
|
+
- `frontend-patterns` — React component patterns
|
|
448
|
+
- `docker-patterns` — containerized dev with Vite
|
|
449
|
+
- `nextjs-turbopack` — alternative bundler for Next.js
|