A customizable HMR plugin for FuseBox 🌹
Built with TypeScript, for TypeScript ❤️️
npm install fuse-box fuse-hmr
NOTE:
FuseBoxhere refers to the loader API
import {setStatefulModules} from 'fuse-hmr';
setStatefulModules(FuseBox,['foo','bar']);
On an HMR update, by default FuseBox:
- flushes all files from loaded cache.
- patches the changed files on HMR update.
- runs the application entry point again.
With setStatefulModules(FuseBox, ['foo','bar']):
- if something other than
foo,barchanged:- flushes all files from loaded cache except
foo, andbar. - patches the changed files on HMR update.
- runs the application entry point again.
- flushes all files from loaded cache except
- if
foo,barchanged:- reloads the window.
Why its useful:
- For things that register a global hook e.g.
window.addEventListener("hashchange",/*something*/)you probably don't want these getting flushed from cache and running again. - For things that initialize / hold state (e.g. MobX stores / Redux Stores / Reflux stores-actions), you probably don't want getting flushed from cache and reinitializing their state.
Where should you call it: In your application entry point e.g.:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { App } from "./app";
ReactDOM.render(<App/>, document.getElementById('root'));
import { setStatefulModules } from 'fuse-hmr';
setStatefulModules(FuseBox, ['actions/','stores/', 'router']);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent