1 | "use strict";
|
---|
2 | /**
|
---|
3 | * @license
|
---|
4 | * Copyright Google LLC All Rights Reserved.
|
---|
5 | *
|
---|
6 | * Use of this source code is governed by an MIT-style license that can be
|
---|
7 | * found in the LICENSE file at https://angular.io/license
|
---|
8 | */
|
---|
9 | Object.defineProperty(exports, "__esModule", { value: true });
|
---|
10 | // eslint-disable-next-line import/no-extraneous-dependencies
|
---|
11 | const core_1 = require("@angular/core");
|
---|
12 | const operators_1 = require("rxjs/operators");
|
---|
13 | function default_1(mod) {
|
---|
14 | if (!mod['hot']) {
|
---|
15 | return;
|
---|
16 | }
|
---|
17 | if (!core_1.isDevMode()) {
|
---|
18 | console.error(`[NG HMR] Cannot use HMR when Angular is running in production mode. To prevent production mode, do not call 'enableProdMode()'.`);
|
---|
19 | return;
|
---|
20 | }
|
---|
21 | mod['hot'].accept();
|
---|
22 | mod['hot'].dispose(() => {
|
---|
23 | if (typeof ng === 'undefined') {
|
---|
24 | console.warn(`[NG HMR] Cannot find global 'ng'. Likely this is caused because scripts optimization is enabled.`);
|
---|
25 | return;
|
---|
26 | }
|
---|
27 | if (!ng.getInjector) {
|
---|
28 | // View Engine
|
---|
29 | return;
|
---|
30 | }
|
---|
31 | // Reset JIT compiled components cache
|
---|
32 | core_1.ɵresetCompiledComponents();
|
---|
33 | const appRoot = getAppRoot();
|
---|
34 | if (!appRoot) {
|
---|
35 | return;
|
---|
36 | }
|
---|
37 | const appRef = getApplicationRef(appRoot);
|
---|
38 | if (!appRef) {
|
---|
39 | return;
|
---|
40 | }
|
---|
41 | // Inputs that are hidden should be ignored
|
---|
42 | const oldInputs = document.querySelectorAll('input:not([type="hidden"]), textarea');
|
---|
43 | const oldOptions = document.querySelectorAll('option');
|
---|
44 | // Create new application
|
---|
45 | appRef.components.forEach((cp) => {
|
---|
46 | const element = cp.location.nativeElement;
|
---|
47 | const parentNode = element.parentNode;
|
---|
48 | parentNode.insertBefore(document.createElement(element.tagName), element);
|
---|
49 | parentNode.removeChild(element);
|
---|
50 | });
|
---|
51 | // Destroy old application, injectors, <style..., etc..
|
---|
52 | const platformRef = getPlatformRef(appRoot);
|
---|
53 | if (platformRef) {
|
---|
54 | platformRef.destroy();
|
---|
55 | }
|
---|
56 | // Restore all inputs and options
|
---|
57 | const bodyElement = document.body;
|
---|
58 | if (oldInputs.length + oldOptions.length === 0 || !bodyElement) {
|
---|
59 | return;
|
---|
60 | }
|
---|
61 | // Use a `MutationObserver` to wait until the app-root element has been bootstrapped.
|
---|
62 | // ie: when the ng-version attribute is added.
|
---|
63 | new MutationObserver((_mutationsList, observer) => {
|
---|
64 | observer.disconnect();
|
---|
65 | const newAppRoot = getAppRoot();
|
---|
66 | if (!newAppRoot) {
|
---|
67 | return;
|
---|
68 | }
|
---|
69 | const newAppRef = getApplicationRef(newAppRoot);
|
---|
70 | if (!newAppRef) {
|
---|
71 | return;
|
---|
72 | }
|
---|
73 | // Wait until the application isStable to restore the form values
|
---|
74 | newAppRef.isStable
|
---|
75 | .pipe(operators_1.filter((isStable) => !!isStable), operators_1.take(1))
|
---|
76 | .subscribe(() => restoreFormValues(oldInputs, oldOptions));
|
---|
77 | }).observe(bodyElement, {
|
---|
78 | attributes: true,
|
---|
79 | subtree: true,
|
---|
80 | attributeFilter: ['ng-version'],
|
---|
81 | });
|
---|
82 | });
|
---|
83 | }
|
---|
84 | exports.default = default_1;
|
---|
85 | function getAppRoot() {
|
---|
86 | const appRoot = document.querySelector('[ng-version]');
|
---|
87 | if (!appRoot) {
|
---|
88 | console.warn('[NG HMR] Cannot find the application root component.');
|
---|
89 | return undefined;
|
---|
90 | }
|
---|
91 | return appRoot;
|
---|
92 | }
|
---|
93 | function getToken(appRoot, token) {
|
---|
94 | return (typeof ng === 'object' && ng.getInjector(appRoot).get(token)) || undefined;
|
---|
95 | }
|
---|
96 | function getApplicationRef(appRoot) {
|
---|
97 | const appRef = getToken(appRoot, core_1.ApplicationRef);
|
---|
98 | if (!appRef) {
|
---|
99 | console.warn(`[NG HMR] Cannot get 'ApplicationRef'.`);
|
---|
100 | return undefined;
|
---|
101 | }
|
---|
102 | return appRef;
|
---|
103 | }
|
---|
104 | function getPlatformRef(appRoot) {
|
---|
105 | const platformRef = getToken(appRoot, core_1.PlatformRef);
|
---|
106 | if (!platformRef) {
|
---|
107 | console.warn(`[NG HMR] Cannot get 'PlatformRef'.`);
|
---|
108 | return undefined;
|
---|
109 | }
|
---|
110 | return platformRef;
|
---|
111 | }
|
---|
112 | function dispatchEvents(element) {
|
---|
113 | element.dispatchEvent(new Event('input', {
|
---|
114 | bubbles: true,
|
---|
115 | cancelable: true,
|
---|
116 | }));
|
---|
117 | element.blur();
|
---|
118 | element.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
|
---|
119 | }
|
---|
120 | function restoreFormValues(oldInputs, oldOptions) {
|
---|
121 | // Restore input that are not hidden
|
---|
122 | const newInputs = document.querySelectorAll('input:not([type="hidden"]), textarea');
|
---|
123 | if (newInputs.length && newInputs.length === oldInputs.length) {
|
---|
124 | console.log('[NG HMR] Restoring input/textarea values.');
|
---|
125 | for (let index = 0; index < newInputs.length; index++) {
|
---|
126 | const newElement = newInputs[index];
|
---|
127 | const oldElement = oldInputs[index];
|
---|
128 | switch (oldElement.type) {
|
---|
129 | case 'button':
|
---|
130 | case 'image':
|
---|
131 | case 'submit':
|
---|
132 | case 'reset':
|
---|
133 | // These types don't need any value change.
|
---|
134 | continue;
|
---|
135 | case 'radio':
|
---|
136 | case 'checkbox':
|
---|
137 | newElement.checked = oldElement.checked;
|
---|
138 | break;
|
---|
139 | case 'color':
|
---|
140 | case 'date':
|
---|
141 | case 'datetime-local':
|
---|
142 | case 'email':
|
---|
143 | case 'file':
|
---|
144 | case 'hidden':
|
---|
145 | case 'month':
|
---|
146 | case 'number':
|
---|
147 | case 'password':
|
---|
148 | case 'range':
|
---|
149 | case 'search':
|
---|
150 | case 'tel':
|
---|
151 | case 'text':
|
---|
152 | case 'textarea':
|
---|
153 | case 'time':
|
---|
154 | case 'url':
|
---|
155 | case 'week':
|
---|
156 | newElement.value = oldElement.value;
|
---|
157 | break;
|
---|
158 | default:
|
---|
159 | console.warn('[NG HMR] Unknown input type ' + oldElement.type + '.');
|
---|
160 | continue;
|
---|
161 | }
|
---|
162 | dispatchEvents(newElement);
|
---|
163 | }
|
---|
164 | }
|
---|
165 | else if (oldInputs.length) {
|
---|
166 | console.warn('[NG HMR] Cannot restore input/textarea values.');
|
---|
167 | }
|
---|
168 | // Restore option
|
---|
169 | const newOptions = document.querySelectorAll('option');
|
---|
170 | if (newOptions.length && newOptions.length === oldOptions.length) {
|
---|
171 | console.log('[NG HMR] Restoring selected options.');
|
---|
172 | for (let index = 0; index < newOptions.length; index++) {
|
---|
173 | const newElement = newOptions[index];
|
---|
174 | newElement.selected = oldOptions[index].selected;
|
---|
175 | dispatchEvents(newElement);
|
---|
176 | }
|
---|
177 | }
|
---|
178 | else if (oldOptions.length) {
|
---|
179 | console.warn('[NG HMR] Cannot restore selected options.');
|
---|
180 | }
|
---|
181 | }
|
---|