fix(page): frame getter for custom Frames (NativeScript#9195)

rigor789 · web-flow · commit 6da7d90e256d · 2021-02-04T07:55:16.000-08:00
diff --git a/packages/core/ui/frame/frame-common.ts b/packages/core/ui/frame/frame-common.ts
@@ -10,6 +10,7 @@ import { getAncestor } from '../core/view-base';
 import { Builder } from '../builder';
 import { sanitizeModuleName } from '../builder/module-name-sanitizer';
 import { profile } from '../../profiling';
+import { FRAME_SYMBOL } from './frame-helpers';
 
 export { NavigationType } from './frame-interfaces';
 export type { AndroidActivityCallbacks, AndroidFragmentCallbacks, AndroidFrame, BackstackEntry, NavigationContext, NavigationEntry, NavigationTransition, TransitionState, ViewEntry, iOSFrame } from './frame-interfaces';
@@ -700,6 +701,9 @@ export class FrameBase extends CustomLayoutView {
 	}
 }
 
+// Mark as a Frame with an unique Symbol
+FrameBase.prototype[FRAME_SYMBOL] = true;
+
 export function getFrameById(id: string): FrameBase {
 	console.log('getFrameById() is deprecated. Use Frame.getFrameById() instead.');
 
diff --git a/packages/core/ui/frame/frame-helpers.ts b/packages/core/ui/frame/frame-helpers.ts
@@ -0,0 +1,19 @@
+/**
+ * Unique symbol to mark Frame instances.
+ *
+ * We use a symbol because in some cases importing the Frame to do
+ * instanceof checks introduces circular references.
+ *
+ * Having the symbol in it's own file prevents any potential circular
+ * references and allows checking if an object is a frame
+ */
+export const FRAME_SYMBOL = Symbol('FRAME_SYMBOL');
+
+/**
+ * Helper to determine if the passed object is a Frame
+ *
+ * @param object
+ */
+export function isFrame(object: any) {
+	return object && object[FRAME_SYMBOL] === true;
+}
diff --git a/packages/core/ui/page/page-common.ts b/packages/core/ui/page/page-common.ts
@@ -7,6 +7,7 @@ import { Style } from '../styling/style';
 import { Color } from '../../color';
 import { EventData } from '../../data/observable';
 import type { Frame } from '../frame';
+import { isFrame } from '../frame/frame-helpers';
 import { ActionBar } from '../action-bar';
 import { KeyframeAnimationInfo } from '../animation/keyframe-animation';
 import { profile } from '../../profiling';
@@ -92,9 +93,9 @@ export class PageBase extends ContentView {
 	}
 
 	get frame(): Frame {
-		const frame = this.parent;
+		const parent = this.parent;
 
-		return frame && frame.constructor.name === 'Frame' ? (frame as Frame) : undefined;
+		return isFrame(parent) ? (parent as Frame) : undefined;
 	}
 
 	private createNavigatedData(eventName: string, isBackNavigation: boolean): NavigatedData {

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ import { getAncestor } from '../core/view-base';`
`10`	`10`	`import { Builder } from '../builder';`
`11`	`11`	`import { sanitizeModuleName } from '../builder/module-name-sanitizer';`
`12`	`12`	`import { profile } from '../../profiling';`
	`13`	`+import { FRAME_SYMBOL } from './frame-helpers';`
`13`	`14`
`14`	`15`	`export { NavigationType } from './frame-interfaces';`
`15`	`16`	`export type { AndroidActivityCallbacks, AndroidFragmentCallbacks, AndroidFrame, BackstackEntry, NavigationContext, NavigationEntry, NavigationTransition, TransitionState, ViewEntry, iOSFrame } from './frame-interfaces';`
`@@ -700,6 +701,9 @@ export class FrameBase extends CustomLayoutView {`
`700`	`701`	`}`
`701`	`702`	`}`
`702`	`703`
	`704`	`+// Mark as a Frame with an unique Symbol`
	`705`	`+FrameBase.prototype[FRAME_SYMBOL] = true;`
	`706`	`+`
`703`	`707`	`export function getFrameById(id: string): FrameBase {`
`704`	`708`	`console.log('getFrameById() is deprecated. Use Frame.getFrameById() instead.');`
`705`	`709`