1 | import {HmrStore} from './hmr-store';
|
2 |
|
3 | export interface HotModuleReplacementOptions {
|
4 | LOCALSTORAGE_KEY?: string;
|
5 | localStorage?: boolean;
|
6 | storeToken?: any;
|
7 | globalDispose?: string;
|
8 |
|
9 | getState?: Function;
|
10 | data?: any;
|
11 | }
|
12 |
|
13 | export function hotModuleReplacement(bootloader: Function, module: any, options: HotModuleReplacementOptions = {}) {
|
14 | if (!module.hot) {
|
15 | console.warn('Warning: please use webpack hot flag');
|
16 | return document.addEventListener('DOMContentLoaded', () => bootloader());
|
17 | }
|
18 |
|
19 | HmrStore.dev = true;
|
20 | const LOCALSTORAGE_KEY = options.LOCALSTORAGE_KEY || '@@WEBPACK_INITIAL_DATA';
|
21 | const LOCAL = options.localStorage || false;
|
22 | const TOKEN = options.storeToken || HmrStore;
|
23 | const DISPOSE = options.globalDispose || 'WEBPACK_HMR_beforeunload';
|
24 | const GET_STATE = options.getState || getState;
|
25 | let DATA = options.data || module.hot.data && module.hot.data.state;
|
26 | let COMPONENT_REF = null;
|
27 | let disposed = false;
|
28 |
|
29 | function getState(appState) {
|
30 | const json = appState.toJSON();
|
31 |
|
32 | if (LOCAL) {
|
33 | console.time('localStorage');
|
34 | localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(appState));
|
35 | console.timeEnd('localStorage');
|
36 | }
|
37 | return json;
|
38 | }
|
39 |
|
40 | console.log('DATA', DATA);
|
41 | if (!DATA && LOCAL) {
|
42 | try {
|
43 | console.time('start localStorage');
|
44 | DATA = JSON.parse(localStorage.getItem(LOCALSTORAGE_KEY)) || DATA;
|
45 | console.timeEnd('start localStorage');
|
46 | } catch (e) {
|
47 | console.log('JSON.parse Error', e);
|
48 | }
|
49 | }
|
50 | console.time('bootstrap');
|
51 | if (document.readyState === 'complete') {
|
52 | bootloader(DATA)
|
53 | .then((cmpRef: any) => COMPONENT_REF = cmpRef)
|
54 | .then((cmpRef => (console.timeEnd('bootstrap'), cmpRef)));
|
55 | } else {
|
56 | document.addEventListener('DOMContentLoaded', () => {
|
57 | bootloader(DATA)
|
58 | .then((cmpRef: any) => COMPONENT_REF = cmpRef)
|
59 | .then((cmpRef => (console.timeEnd('bootstrap'), cmpRef)));
|
60 | });
|
61 | }
|
62 |
|
63 |
|
64 |
|
65 | function beforeunload(event) {
|
66 | const appState = COMPONENT_REF.injector.getOptional(TOKEN) || TOKEN;
|
67 | return GET_STATE(appState);
|
68 | }
|
69 | (<any>window)[DISPOSE] = () => {
|
70 | disposed = true;
|
71 | window.removeEventListener('beforeunload', beforeunload);
|
72 | if (LOCAL) {
|
73 | localStorage.removeItem(LOCALSTORAGE_KEY);
|
74 | }
|
75 | };
|
76 |
|
77 | module.hot.accept();
|
78 |
|
79 | window.addEventListener('beforeunload', beforeunload);
|
80 |
|
81 | module.hot.dispose((data: any) => {
|
82 | console.time('dispose');
|
83 | const componentNode = COMPONENT_REF.location.nativeElement;
|
84 | const newNode = document.createElement(componentNode.tagName);
|
85 |
|
86 | const currentDisplay = newNode.style.display;
|
87 | newNode.style.display = 'none';
|
88 | const parentNode = componentNode.parentNode;
|
89 | parentNode.insertBefore(newNode, componentNode);
|
90 |
|
91 | const appState = COMPONENT_REF.injector.getOptional(TOKEN) || TOKEN;
|
92 | const json = GET_STATE(appState, COMPONENT_REF);
|
93 |
|
94 | data.state = json;
|
95 |
|
96 | COMPONENT_REF.dispose();
|
97 |
|
98 | newNode.style.display = currentDisplay;
|
99 |
|
100 | if (!disposed) {
|
101 | window.removeEventListener('beforeunload', beforeunload);
|
102 | }
|
103 | disposed = true;
|
104 | console.timeEnd('dispose');
|
105 | });
|
106 | }
|