Skip to content

Commit 7c22ffe

Browse files
manoldonevmanoldonev
committed
fix(hmr): support for multi module replacement
1 parent 4d6733d commit 7c22ffe

8 files changed

Lines changed: 152 additions & 102 deletions

File tree

‎tests/app/livesync/livesync-button-page.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Button {
2+
color: cyan;
3+
}

‎tests/app/livesync/livesync-tests.ts‎

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import * as app from "tns-core-modules/application/application";
55
import * as frame from "tns-core-modules/ui/frame";
66

77
import { Color } from "tns-core-modules/color";
8-
import { isAndroid } from "tns-core-modules/platform";
98
import { createViewFromEntry } from "tns-core-modules/ui/builder";
109
import { Page } from "tns-core-modules/ui/page";
1110
import { Frame } from "tns-core-modules/ui/frame";
@@ -20,6 +19,7 @@ const buttonHtmlPageFileName = "./livesync/livesync-button-page.html";
2019
const buttonXmlPageFileName = "./livesync/livesync-button-page.xml";
2120
const buttonJsPageFileName = "./livesync/livesync-button-page.js";
2221
const buttonTsPageFileName = "./livesync/livesync-button-page.ts";
22+
const buttonScssPageFileName = "./livesync/livesync-button-page.scss";
2323
const labelPageModuleName = "livesync/livesync-label-page";
2424

2525
const green = new Color("green");
@@ -60,6 +60,36 @@ export function test_onLiveSync_ModuleContext_Markup_XmlFile() {
6060
_test_onLiveSync_ModuleReplace({ type: "markup", path: buttonXmlPageFileName });
6161
}
6262

63+
export function test_onLiveSync_ModuleContext_Markup_Script_XmlFile() {
64+
_test_onLiveSync_ModuleReplace_Multiple([
65+
{ type: "script", path: buttonTsPageFileName },
66+
{ type: "markup", path: buttonXmlPageFileName }
67+
]);
68+
}
69+
70+
export function test_onLiveSync_ModuleContext_Markup_Script_Style_XmlFile() {
71+
_test_onLiveSync_ModuleReplace_Multiple([
72+
{ type: "script", path: buttonTsPageFileName },
73+
{ type: "markup", path: buttonXmlPageFileName },
74+
{ type: "style", path: buttonScssPageFileName }
75+
]);
76+
}
77+
78+
export function test_onLiveSync_ModuleContext_Markup_Script_HtmlFile() {
79+
_test_onLiveSync_ModuleReplace_Multiple([
80+
{ type: "script", path: buttonTsPageFileName },
81+
{ type: "markup", path: buttonHtmlPageFileName }
82+
]);
83+
}
84+
85+
export function test_onLiveSync_ModuleContext_Markup_Script_Style_HtmlFile() {
86+
_test_onLiveSync_ModuleReplace_Multiple([
87+
{ type: "script", path: buttonTsPageFileName },
88+
{ type: "markup", path: buttonHtmlPageFileName },
89+
{ type: "style", path: buttonScssPageFileName }
90+
]);
91+
}
92+
6393
export function setUp() {
6494
const labelPage = <Page>createViewFromEntry(({ moduleName: labelPageModuleName }));
6595
helper.navigate(() => labelPage);
@@ -121,6 +151,28 @@ function _test_onLiveSync_ModuleReplace(context: { type, path }) {
121151
TKUnit.assertEqual(pageBeforeNavigation, pageAfterBackNavigation, "Pages are different!");
122152
}
123153

154+
function _test_onLiveSync_ModuleReplace_Multiple(context: { type: string, path: string }[]) {
155+
const pageBeforeNavigation = helper.getCurrentPage();
156+
const buttonPage = <Page>createViewFromEntry(({ moduleName: buttonPageModuleName }));
157+
helper.navigateWithHistory(() => buttonPage);
158+
159+
context.forEach(item => {
160+
global.__onLiveSync(item);
161+
});
162+
163+
const topmostFrame = frame.topmost();
164+
waitUntilLivesyncComplete(topmostFrame);
165+
TKUnit.assertTrue(topmostFrame.currentPage.getViewById("button").isLoaded, "Button page is NOT loaded!");
166+
TKUnit.assertEqual(topmostFrame.backStack.length, 1, "Backstack is clean!");
167+
TKUnit.assertTrue(topmostFrame.canGoBack(), "Can NOT go back!");
168+
169+
helper.goBack();
170+
const pageAfterBackNavigation = helper.getCurrentPage();
171+
TKUnit.assertTrue(topmostFrame.currentPage.getViewById("label").isLoaded, "Label page is NOT loaded!");
172+
TKUnit.assertEqual(topmostFrame.backStack.length, 0, "Backstack is NOT clean!");
173+
TKUnit.assertEqual(pageBeforeNavigation, pageAfterBackNavigation, "Pages are different!");
174+
}
175+
124176
function _test_onLiveSync_ModuleContext_TypeStyle(context: { type, path }) {
125177
const pageBeforeNavigation = helper.getCurrentPage();
126178
const buttonPage = <Page>createViewFromEntry(({ moduleName: buttonPageModuleName }));
@@ -146,5 +198,5 @@ function _test_onLiveSync_ModuleContext_TypeStyle(context: { type, path }) {
146198
}
147199

148200
function waitUntilLivesyncComplete(frame: Frame) {
149-
TKUnit.waitUntilReady(() => frame._executingEntry === null);
201+
TKUnit.waitUntilReady(() => frame.navigationQueueIsEmpty());
150202
}

‎tns-core-modules/ui/frame/fragment.transitions.android.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -735,8 +735,7 @@ function transitionOrAnimationCompleted(entry: ExpandedEntry): void {
735735
// Will be null if Frame is shown modally...
736736
// transitionOrAnimationCompleted fires again (probably bug in android).
737737
if (current) {
738-
const navType = frame.navigationType;
739-
setTimeout(() => frame.setCurrent(current, navType));
738+
setTimeout(() => frame.setCurrent(current));
740739
}
741740
} else {
742741
completedEntries.set(frameId, entry);

‎tns-core-modules/ui/frame/frame-common.ts‎

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { getModuleName } from "../../utils/utils";
1313
export * from "../core/view";
1414

1515
export enum NavigationType {
16+
unset,
1617
back,
1718
forward,
1819
replace
@@ -37,7 +38,9 @@ function buildEntryFromArgs(arg: any): NavigationEntry {
3738

3839
export interface NavigationContext {
3940
entry: BackstackEntry;
41+
// TODO: remove isBackNavigation for NativeScript 6.0
4042
isBackNavigation: boolean;
43+
navigationType: NavigationType
4144
}
4245

4346
@CSSType("Frame")
@@ -51,11 +54,10 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
5154

5255
public actionBarVisibility: "auto" | "never" | "always";
5356
public _currentEntry: BackstackEntry;
54-
public _executingEntry: BackstackEntry;
57+
public _executingContext: NavigationContext;
5558
public _isInFrameStack = false;
5659
public static defaultAnimatedNavigation = true;
5760
public static defaultTransition: NavigationTransition;
58-
public navigationType: NavigationType;
5961

6062
// TODO: Currently our navigation will not be synchronized in case users directly call native navigation methods like Activity.startActivity.
6163

@@ -75,7 +77,8 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
7577
let previousForwardNotInBackstack = false;
7678
this._navigationQueue.forEach(item => {
7779
const entry = item.entry;
78-
if (item.isBackNavigation) {
80+
const isBackNavigation = item.navigationType === NavigationType.back;
81+
if (isBackNavigation) {
7982
previousForwardNotInBackstack = false;
8083
if (!entry) {
8184
backstack--;
@@ -135,7 +138,8 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
135138

136139
const navigationContext: NavigationContext = {
137140
entry: backstackEntry,
138-
isBackNavigation: true
141+
isBackNavigation: true,
142+
navigationType: NavigationType.back
139143
}
140144

141145
this._navigationQueue.push(navigationContext);
@@ -203,7 +207,8 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
203207

204208
const navigationContext: NavigationContext = {
205209
entry: backstackEntry,
206-
isBackNavigation: false
210+
isBackNavigation: false,
211+
navigationType: NavigationType.forward
207212
}
208213

209214
this._navigationQueue.push(navigationContext);
@@ -214,7 +219,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
214219
return this._currentEntry === entry;
215220
}
216221

217-
public setCurrent(entry: BackstackEntry, navigationType: NavigationType): void {
222+
public setCurrent(entry: BackstackEntry): void {
218223
const newPage = entry.resolvedPage;
219224
// In case we navigated forward to a page that was in the backstack
220225
// with clearHistory: true
@@ -225,17 +230,19 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
225230

226231
this._currentEntry = entry;
227232

233+
const navigationContext = this._executingContext || { navigationType: NavigationType.unset };
234+
const navigationType = navigationContext.navigationType;
228235
const isBack = navigationType === NavigationType.back;
229236
if (isBack) {
230237
this._pushInFrameStack();
231238
}
232239

233240
newPage.onNavigatedTo(isBack);
234241

235-
// Reset executing entry after NavigatedTo is raised;
242+
// Reset executing context after NavigatedTo is raised;
236243
// we do not want to execute two navigations in parallel in case
237244
// additional navigation is triggered from the NavigatedTo handler.
238-
this._executingEntry = null;
245+
this._executingContext = null;
239246
}
240247

241248
public _updateBackstack(entry: BackstackEntry, navigationType: NavigationType): void {
@@ -342,13 +349,14 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
342349
}
343350

344351
protected _processNextNavigationEntry() {
345-
if (!this.isLoaded || this._executingEntry) {
352+
if (!this.isLoaded || this._executingContext) {
346353
return;
347354
}
348355

349356
if (this._navigationQueue.length > 0) {
350357
const navigationContext = this._navigationQueue[0];
351-
if (navigationContext.isBackNavigation) {
358+
const isBackNavigation = navigationContext.navigationType === NavigationType.back;
359+
if (isBackNavigation) {
352360
this.performGoBack(navigationContext);
353361
} else {
354362
this.performNavigation(navigationContext);
@@ -358,10 +366,12 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
358366

359367
@profile
360368
public performNavigation(navigationContext: NavigationContext) {
361-
const navContext = navigationContext.entry;
362-
this._executingEntry = navContext;
363-
this._onNavigatingTo(navContext, navigationContext.isBackNavigation);
364-
this._navigateCore(navContext);
369+
this._executingContext = navigationContext;
370+
371+
const backstackEntry = navigationContext.entry;
372+
const isBackNavigation = navigationContext.navigationType === NavigationType.back;
373+
this._onNavigatingTo(backstackEntry, isBackNavigation);
374+
this._navigateCore(backstackEntry);
365375
}
366376

367377
@profile
@@ -373,7 +383,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
373383
navigationContext.entry = backstackEntry;
374384
}
375385

376-
this._executingEntry = backstackEntry;
386+
this._executingContext = navigationContext;
377387
this._onNavigatingTo(backstackEntry, true);
378388
this._goBackCore(backstackEntry);
379389
}
@@ -643,9 +653,6 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
643653
}
644654

645655
protected replacePage(context: ModuleContext): void {
646-
// Set NavigationType.replace for HMR.
647-
// In IOS on `viewDidAppear()` this will be set to NavigationType.forward.
648-
this.navigationType = NavigationType.replace;
649656
const currentBackstackEntry = this._currentEntry;
650657
const contextModuleName = getModuleName(context.path);
651658

@@ -658,10 +665,15 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
658665
frameId: currentBackstackEntry.frameId
659666
};
660667

661-
const navContext: NavigationContext = { entry: newBackstackEntry, isBackNavigation: false };
662-
this.performNavigation(navContext);
663-
}
668+
const navigationContext: NavigationContext = {
669+
entry: newBackstackEntry,
670+
isBackNavigation: false,
671+
navigationType: NavigationType.replace
672+
};
664673

674+
this._navigationQueue.push(navigationContext);
675+
this._processNextNavigationEntry();
676+
}
665677
}
666678

667679
export function getFrameById(id: string): FrameBase {

0 commit comments

Comments
 (0)