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 injector = COMPONENT_REF.injector;
|
67 | let appState;
|
68 | if ('getOptional' in injector) {
|
69 | appState = COMPONENT_REF.injector.getOptional(TOKEN) || TOKEN;
|
70 | } else {
|
71 | appState = COMPONENT_REF.injector.get(TOKEN, TOKEN);
|
72 | }
|
73 | return GET_STATE(appState);
|
74 | }
|
75 | (<any>window)[DISPOSE] = () => {
|
76 | disposed = true;
|
77 | window.removeEventListener('beforeunload', beforeunload);
|
78 | if (LOCAL) {
|
79 | localStorage.removeItem(LOCALSTORAGE_KEY);
|
80 | }
|
81 | };
|
82 |
|
83 | module.hot.accept();
|
84 |
|
85 | window.addEventListener('beforeunload', beforeunload);
|
86 |
|
87 | module.hot.dispose((data: any) => {
|
88 | console.time('dispose');
|
89 | const componentNode = COMPONENT_REF.location.nativeElement;
|
90 | const newNode = document.createElement(componentNode.tagName);
|
91 |
|
92 | const currentDisplay = newNode.style.display;
|
93 | newNode.style.display = 'none';
|
94 | const parentNode = componentNode.parentNode;
|
95 | parentNode.insertBefore(newNode, componentNode);
|
96 |
|
97 | const injector = COMPONENT_REF.injector;
|
98 | let appState;
|
99 | if ('getOptional' in injector) {
|
100 | appState = COMPONENT_REF.injector.getOptional(TOKEN) || TOKEN;
|
101 | } else {
|
102 | appState = COMPONENT_REF.injector.get(TOKEN, TOKEN);
|
103 | }
|
104 | const json = GET_STATE(appState, COMPONENT_REF);
|
105 |
|
106 | data.state = json;
|
107 |
|
108 | if ('destroy' in COMPONENT_REF) {
|
109 | COMPONENT_REF.destroy();
|
110 | } else if ('dispose' in COMPONENT_REF) {
|
111 | COMPONENT_REF.dispose();
|
112 | }
|
113 |
|
114 | newNode.style.display = currentDisplay;
|
115 |
|
116 | if (!disposed) {
|
117 | window.removeEventListener('beforeunload', beforeunload);
|
118 | }
|
119 | disposed = true;
|
120 | console.timeEnd('dispose');
|
121 | });
|
122 | }
|