Skip to content

Commit 8e8c6c1

Browse files
NathanWalkerNathanWalker
committed
feat: hmr applying while keeping route state preserved
1 parent 5b56d73 commit 8e8c6c1

5 files changed

Lines changed: 197 additions & 9 deletions

File tree

‎packages/angular/src/lib/application.ts‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,21 @@ import {
1616
import { Observable, Subject } from 'rxjs';
1717
import { filter, map, take } from 'rxjs/operators';
1818
import { AppHostView } from './app-host-view';
19-
import { resetAngularHmrCompiledComponents } from './hmr-compiled-components-core';
19+
import {
20+
getAngularCoreForHmrReset,
21+
rememberAngularCoreForHmr,
22+
resetAngularHmrCompiledComponents,
23+
} from './hmr-compiled-components-core';
2024
import { NativeScriptLoadingService } from './loading.service';
2125
import { clearAngularHmrRouteConfigCaches } from './legacy/router/hmr-route-cache-core';
26+
import { createAngularRootTransitionGuard } from './root-transition-guard';
2227
import { APP_ROOT_VIEW, DISABLE_ROOT_VIEW_HANDLING, NATIVESCRIPT_ROOT_MODULE_ID } from './tokens';
2328
import { NativeScriptDebug } from './trace';
2429

2530
// Store the original @angular/core module for HMR
2631
// This is crucial because HMR imports a fresh @angular/core with empty LView tracking
2732
// We need to use the original one that has the registered LViews
28-
(globalThis as any).__NS_ANGULAR_CORE__ = AngularCore;
33+
rememberAngularCoreForHmr(AngularCore as any, globalThis as any);
2934

3035
export interface AppLaunchView extends LayoutBase {
3136
// called when the animation is to begin
@@ -255,6 +260,7 @@ export function runNativeScriptAngularApp<T, K>(options: AppRunOptions<T, K>) {
255260
};
256261
let launchEventDone = true;
257262
let targetRootView: View = null;
263+
const rootTransitionGuard = createAngularRootTransitionGuard(globalThis as any);
258264
const refreshRootViewCss = (expectedRoot?: View) => {
259265
setTimeout(() => {
260266
const currentRoot = Application.getRootView();
@@ -296,7 +302,7 @@ export function runNativeScriptAngularApp<T, K>(options: AppRunOptions<T, K>) {
296302
if (options.embedded) {
297303
Application.run({ create: () => ref });
298304
} else if (launchEventDone) {
299-
Application.resetRootView({ create: () => ref });
305+
rootTransitionGuard.runApplicationResetRootView(Application, () => ref, ref?.constructor?.name || 'View');
300306
refreshRootViewCss(ref);
301307
} else {
302308
targetRootView = ref;
@@ -326,7 +332,7 @@ export function runNativeScriptAngularApp<T, K>(options: AppRunOptions<T, K>) {
326332
parent: newRoot?.parent?.constructor?.name,
327333
childCount: (newRoot as any)?.getChildrenCount?.() ?? 'N/A',
328334
});
329-
Application.resetRootView({ create: () => newRoot });
335+
rootTransitionGuard.runApplicationResetRootView(Application, () => newRoot, newRoot?.constructor?.name || 'View');
330336
refreshRootViewCss(newRoot);
331337
console.log('[ng-hmr] setRootView: Application.resetRootView returned');
332338
// Check root view after reset
@@ -353,6 +359,10 @@ export function runNativeScriptAngularApp<T, K>(options: AppRunOptions<T, K>) {
353359
const bootstrapRoot = (reason: NgModuleReason) => {
354360
console.log('[ng-hmr] bootstrapRoot called, reason:', reason);
355361
try {
362+
if (reason === 'hotreload') {
363+
resetAngularHmrCompiledComponents(getAngularCoreForHmrReset(AngularCore as any, globalThis as any));
364+
}
365+
356366
bootstrapId = Date.now();
357367
console.log('[ng-hmr] bootstrapRoot: new bootstrapId:', bootstrapId);
358368
const currentBootstrapId = bootstrapId;
@@ -579,10 +589,6 @@ export function runNativeScriptAngularApp<T, K>(options: AppRunOptions<T, K>) {
579589
loadingModuleRef = null;
580590
destroyRef(mainModuleRef, 'main', reason);
581591
mainModuleRef = null;
582-
583-
if (reason === 'hotreload') {
584-
resetAngularHmrCompiledComponents(AngularCore as any);
585-
}
586592
};
587593
const launchCallback = profile('@nativescript/angular/platform-common.launchCallback', (args: LaunchEventData) => {
588594
launchEventDone = false;

‎packages/angular/src/lib/hmr-compiled-components-core.spec.ts‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { resetAngularHmrCompiledComponents } from './hmr-compiled-components-core';
1+
import {
2+
getAngularCoreForHmrReset,
3+
rememberAngularCoreForHmr,
4+
resetAngularHmrCompiledComponents,
5+
} from './hmr-compiled-components-core';
26

37
describe('Angular HMR compiled component reset', () => {
48
it('calls Angular internal compiled-component reset when available', () => {
@@ -24,4 +28,33 @@ describe('Angular HMR compiled component reset', () => {
2428
expect(resetAngularHmrCompiledComponents(core)).toBe(false);
2529
expect(core.ɵresetCompiledComponents).toHaveBeenCalledTimes(1);
2630
});
31+
32+
it('prefers the preserved global Angular core object for resets', () => {
33+
const originalCore = {
34+
ɵresetCompiledComponents: jest.fn(),
35+
};
36+
const replacementCore = {
37+
ɵresetCompiledComponents: jest.fn(),
38+
};
39+
const globalObj: any = {
40+
__NS_ANGULAR_CORE__: originalCore,
41+
};
42+
43+
expect(getAngularCoreForHmrReset(replacementCore, globalObj)).toBe(originalCore);
44+
});
45+
46+
it('remembers the first Angular core object and does not replace it later', () => {
47+
const originalCore = {
48+
ɵresetCompiledComponents: jest.fn(),
49+
};
50+
const replacementCore = {
51+
ɵresetCompiledComponents: jest.fn(),
52+
};
53+
const globalObj: any = {};
54+
55+
expect(rememberAngularCoreForHmr(originalCore, globalObj)).toBe(originalCore);
56+
expect(globalObj.__NS_ANGULAR_CORE__).toBe(originalCore);
57+
expect(rememberAngularCoreForHmr(replacementCore, globalObj)).toBe(originalCore);
58+
expect(globalObj.__NS_ANGULAR_CORE__).toBe(originalCore);
59+
});
2760
});

‎packages/angular/src/lib/hmr-compiled-components-core.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,28 @@ type AngularCoreWithCompiledComponentReset = {
22
ɵresetCompiledComponents?: () => void;
33
};
44

5+
type AngularCoreHolder = {
6+
__NS_ANGULAR_CORE__?: AngularCoreWithCompiledComponentReset | null;
7+
};
8+
9+
export function getAngularCoreForHmrReset(
10+
core: AngularCoreWithCompiledComponentReset | null | undefined,
11+
globalObj: AngularCoreHolder = globalThis as AngularCoreHolder,
12+
): AngularCoreWithCompiledComponentReset | null | undefined {
13+
return globalObj.__NS_ANGULAR_CORE__ || core;
14+
}
15+
16+
export function rememberAngularCoreForHmr(
17+
core: AngularCoreWithCompiledComponentReset | null | undefined,
18+
globalObj: AngularCoreHolder = globalThis as AngularCoreHolder,
19+
): AngularCoreWithCompiledComponentReset | null | undefined {
20+
if (!globalObj.__NS_ANGULAR_CORE__ && core) {
21+
globalObj.__NS_ANGULAR_CORE__ = core;
22+
}
23+
24+
return getAngularCoreForHmrReset(core, globalObj);
25+
}
26+
527
export function resetAngularHmrCompiledComponents(
628
core: AngularCoreWithCompiledComponentReset | null | undefined,
729
): boolean {

‎packages/angular/src/lib/root-transition-guard.spec.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { createAngularRootTransitionGuard } from './root-transition-guard';
2+
3+
describe('Angular root transition guard', () => {
4+
afterEach(() => {
5+
jest.useRealTimers();
6+
});
7+
8+
it('marks the root transition during resetRootView and clears it after the timeout', () => {
9+
jest.useFakeTimers();
10+
11+
const globalObj: any = {};
12+
const createdRoot = { type: 'RootLayout' };
13+
const resetRootView = jest.fn((entry: { create: () => unknown }) => entry.create());
14+
const guard = createAngularRootTransitionGuard(globalObj);
15+
16+
const result = guard.runApplicationResetRootView({ resetRootView }, () => createdRoot, 'RootLayout', 250);
17+
18+
expect(result).toBe(createdRoot);
19+
expect(resetRootView).toHaveBeenCalledTimes(1);
20+
expect(globalObj.__NS_DEV_ROOT_TRANSITION_IN_PROGRESS__).toBe(true);
21+
expect(globalObj.__NS_DEV_ROOT_TRANSITION_REASON__).toBe('RootLayout');
22+
23+
jest.advanceTimersByTime(249);
24+
expect(globalObj.__NS_DEV_ROOT_TRANSITION_IN_PROGRESS__).toBe(true);
25+
26+
jest.advanceTimersByTime(1);
27+
expect(globalObj.__NS_DEV_ROOT_TRANSITION_IN_PROGRESS__).toBeUndefined();
28+
expect(globalObj.__NS_DEV_ROOT_TRANSITION_REASON__).toBeUndefined();
29+
});
30+
31+
it('still clears the transition window when resetRootView throws', () => {
32+
jest.useFakeTimers();
33+
34+
const globalObj: any = {};
35+
const guard = createAngularRootTransitionGuard(globalObj);
36+
37+
expect(() =>
38+
guard.runApplicationResetRootView(
39+
{
40+
resetRootView: () => {
41+
throw new Error('boom');
42+
},
43+
},
44+
() => ({ type: 'RootLayout' }),
45+
'RootLayout',
46+
250,
47+
),
48+
).toThrow('boom');
49+
50+
expect(globalObj.__NS_DEV_ROOT_TRANSITION_IN_PROGRESS__).toBe(true);
51+
expect(globalObj.__NS_DEV_ROOT_TRANSITION_REASON__).toBe('RootLayout');
52+
53+
jest.runAllTimers();
54+
expect(globalObj.__NS_DEV_ROOT_TRANSITION_IN_PROGRESS__).toBeUndefined();
55+
expect(globalObj.__NS_DEV_ROOT_TRANSITION_REASON__).toBeUndefined();
56+
});
57+
});

‎packages/angular/src/lib/root-transition-guard.ts‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
type RootTransitionGlobal = {
2+
__NS_DEV_ROOT_TRANSITION_IN_PROGRESS__?: boolean;
3+
__NS_DEV_ROOT_TRANSITION_REASON__?: string;
4+
};
5+
6+
type RootTransitionTimers = {
7+
setTimeout: typeof setTimeout;
8+
clearTimeout: typeof clearTimeout;
9+
};
10+
11+
type ResetRootViewLike = {
12+
resetRootView: (entry?: any) => unknown;
13+
};
14+
15+
export function createAngularRootTransitionGuard(
16+
globalObj: RootTransitionGlobal = globalThis as RootTransitionGlobal,
17+
timers: RootTransitionTimers = { setTimeout, clearTimeout },
18+
) {
19+
let clearTimer: ReturnType<typeof setTimeout> | null = null;
20+
21+
const clear = () => {
22+
if (clearTimer) {
23+
timers.clearTimeout(clearTimer);
24+
clearTimer = null;
25+
}
26+
27+
delete globalObj.__NS_DEV_ROOT_TRANSITION_IN_PROGRESS__;
28+
delete globalObj.__NS_DEV_ROOT_TRANSITION_REASON__;
29+
};
30+
31+
const mark = (detail: string) => {
32+
clear();
33+
globalObj.__NS_DEV_ROOT_TRANSITION_IN_PROGRESS__ = true;
34+
globalObj.__NS_DEV_ROOT_TRANSITION_REASON__ = detail;
35+
};
36+
37+
const scheduleClear = (delayMs = 250) => {
38+
if (clearTimer) {
39+
timers.clearTimeout(clearTimer);
40+
}
41+
42+
clearTimer = timers.setTimeout(() => {
43+
clearTimer = null;
44+
delete globalObj.__NS_DEV_ROOT_TRANSITION_IN_PROGRESS__;
45+
delete globalObj.__NS_DEV_ROOT_TRANSITION_REASON__;
46+
}, delayMs);
47+
};
48+
49+
const runApplicationResetRootView = (
50+
applicationLike: ResetRootViewLike,
51+
createRoot: () => unknown,
52+
detail: string,
53+
delayMs = 250,
54+
) => {
55+
mark(detail);
56+
57+
try {
58+
return applicationLike.resetRootView({ create: () => createRoot() });
59+
} finally {
60+
scheduleClear(delayMs);
61+
}
62+
};
63+
64+
return {
65+
clear,
66+
mark,
67+
scheduleClear,
68+
runApplicationResetRootView,
69+
};
70+
}

0 commit comments

Comments
 (0)