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) => ({