From 6da7d90e256d220db79e245228b91d5fa8e41984 Mon Sep 17 00:00:00 2001
From: Igor Randjelovic <rigor789@gmail.com>
Date: Thu, 4 Feb 2021 16:55:16 +0100
Subject: [PATCH] fix(page): frame getter for custom Frames (#9195)

---
 packages/core/ui/frame/frame-common.ts  |  4 ++++
 packages/core/ui/frame/frame-helpers.ts | 19 +++++++++++++++++++
 packages/core/ui/page/page-common.ts    |  5 +++--
 3 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 packages/core/ui/frame/frame-helpers.ts

diff --git a/packages/core/ui/frame/frame-common.ts b/packages/core/ui/frame/frame-common.ts
index 415e9c57a..c4fe18679 100644
--- 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
new file mode 100644
index 000000000..73d996d58
--- /dev/null
+++ 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
index dc5e6f893..9fd630d91 100644
--- 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 {