@flight-framework/hmr

Cross-framework HMR utilities with state preservation for Flight Framework.

Installation

npm install -D @flight-framework/hmr

Features

• State preservation across HMR updates
• Framework-agnostic state management
• Adapters for React, Vue, Svelte, Solid
• Automatic framework detection
• Works with Vite's native HMR

Quick Start

State Preservation

// In your component
import { createHMRState } from '@flight-framework/hmr';

if (import.meta.hot) {
    const state = createHMRState(import.meta.url);

    // Preserve values across updates
    state.set('count', count);

    // Restore on next update
    const savedCount = state.get<number>('count');
}

Framework Adapters

// React
import { setupReactHMR } from '@flight-framework/hmr/react';

if (import.meta.hot) {
    setupReactHMR(import.meta.hot, import.meta.url);
}

// Vue
import { setupVueHMR } from '@flight-framework/hmr/vue';

// Svelte
import { setupSvelteHMR } from '@flight-framework/hmr/svelte';

// Solid
import { setupSolidHMR } from '@flight-framework/hmr/solid';

API Reference

State Management

import {
    createHMRState,
    getState,
    setState,
    clearModuleState,
} from '@flight-framework/hmr';

// Create scoped state for a module
const state = createHMRState(moduleId);

state.set('key', value);      // Store value
state.get<T>('key');          // Retrieve value
state.delete('key');          // Remove value
state.has('key');             // Check existence
state.clear();                // Clear all state
state.keys();                 // Get all keys

// Direct state access
setState(moduleId, 'key', value);
getState<T>(moduleId, 'key');
clearModuleState(moduleId);

Framework Detection

import { detectFramework } from '@flight-framework/hmr';

const framework = detectFramework(module);
// Returns: 'react' | 'vue' | 'svelte' | 'solid' | 'unknown'

How It Works

1. State Storage: Global Map stores state by module ID
2. Dispose Hook: Before module is replaced, state is saved
3. Accept Hook: After module update, state is restored
4. Framework Adapters: Handle framework-specific update logic

Module Update Flow:
  1. Vite detects file change
  2. dispose() callback saves state to HMR data
  3. New module loads
  4. accept() callback restores state
  5. Framework-specific refresh runs

Integration with Vite

Works automatically with Vite's HMR. The adapters coordinate with:

• @vitejs/plugin-react (React Fast Refresh)
• @vitejs/plugin-vue (Vue Hot Reload)
• @sveltejs/vite-plugin-svelte (Svelte HMR)
• vite-plugin-solid (Solid Refresh)

License

MIT