plugins/aai-stack-vite/skills/vite-hmr/SKILL.md
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/the-answerai/alphaagent-team/blob/main/plugins/aai-stack-vite/skills/vite-hmr/SKILL.md -a claude-code --skill vite-hmrInstallation paths:
.claude/skills/vite-hmr/# Vite HMR Skill
Patterns for Hot Module Replacement in Vite.
## HMR API
### Basic Usage
```typescript
// Check if HMR is available
if (import.meta.hot) {
// HMR code here
}
// Accept updates to this module
if (import.meta.hot) {
import.meta.hot.accept()
}
// Accept updates to dependencies
if (import.meta.hot) {
import.meta.hot.accept('./module.js', (newModule) => {
console.log('Module updated:', newModule)
})
}
// Accept multiple dependencies
if (import.meta.hot) {
import.meta.hot.accept(['./a.js', './b.js'], ([a, b]) => {
// Handle updates
})
}
```
### Module Disposal
```typescript
if (import.meta.hot) {
// Cleanup before module is replaced
import.meta.hot.dispose((data) => {
// data can be used to pass state to the new module
data.savedState = getCurrentState()
// Cleanup side effects
clearInterval(intervalId)
socket.disconnect()
})
}
// Access disposed data in new module
if (import.meta.hot) {
import.meta.hot.accept()
// Restore state from previous version
if (import.meta.hot.data.savedState) {
restoreState(import.meta.hot.data.savedState)
}
}
```
### Decline Updates
```typescript
// Decline HMR, trigger full reload
if (import.meta.hot) {
import.meta.hot.decline()
}
```
### Invalidate
```typescript
if (import.meta.hot) {
// Force parent module to re-import this module
import.meta.hot.invalidate()
}
```
## State Preservation
### Preserving Component State
```typescript
// Custom state preservation
let state = { count: 0 }
if (import.meta.hot) {
// Restore state from previous version
if (import.meta.hot.data.state) {
state = import.meta.hot.data.state
}
import.meta.hot.accept()
// Save state before disposal
import.meta.hot.dispose((data) => {
data.state = state
})
}
export function increment() {
state.count++
}
```
### Store Preservation
```typescript
// For global stores like Zustand
import { create } from 'zustand'
const useStore = create((set) => ({