From f37d68152265966edde0adec26e7bd3074361e3d Mon Sep 17 00:00:00 2001
From: Amir Zahedi <amir.zahedi@gmail.com>
Date: Fri, 8 Mar 2024 06:21:30 +0800
Subject: [PATCH] chore: Improves shadowed MFe mounting

---
 .changeset/popular-lemons-turn.md |  5 +++++
 packages/gdu/lib/mfe.ts           | 29 +++++++++++------------------
 2 files changed, 16 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/popular-lemons-turn.md

diff --git a/.changeset/popular-lemons-turn.md b/.changeset/popular-lemons-turn.md
new file mode 100644
index 00000000..92552328
--- /dev/null
+++ b/.changeset/popular-lemons-turn.md
@@ -0,0 +1,5 @@
+---
+'gdu': patch
+---
+
+gdu: Fixes mfe mounting
diff --git a/packages/gdu/lib/mfe.ts b/packages/gdu/lib/mfe.ts
index a19c6546..b1ff78f2 100644
--- a/packages/gdu/lib/mfe.ts
+++ b/packages/gdu/lib/mfe.ts
@@ -15,29 +15,21 @@ interface Props {
 	projectName: string;
 }
 
-const queryShadowRoot = (
-	wrapElement: Array<Element>,
-	selector: string,
-): Array<Element> | null => {
+const queryShadowRoot = (wrapElement: Array<Element>, selector: string) => {
 	//Find element with no shadow root
 	if (wrapElement && wrapElement.length > 0) {
 		for (const element of wrapElement) {
-			if (element.childNodes.length === 0) {
-				return Array.from(element.querySelectorAll(selector));
+			// @ts-ignore
+			if (
+				element.firstChild.shadowRoot.firstChild.childNodes.length === 0
+			) {
+				// @ts-ignore
+				return element.firstChild.shadowRoot.querySelector(selector);
 			}
 		}
+	} else {
+		return null;
 	}
-	if (
-		wrapElement &&
-		// @ts-ignore
-		wrapElement.firstChild &&
-		// @ts-ignore
-		wrapElement.firstChild.shadowRoot
-	) {
-		// @ts-ignore
-		return wrapElement.firstChild.shadowRoot.querySelectorAll(selector);
-	}
-	return null;
 };
 export const getMfeMountPoint = ({
 	mountDOMId,
@@ -48,6 +40,7 @@ export const getMfeMountPoint = ({
 		mountDOMId || mountDOMClass,
 		'You must provide a mountDOMId or mountDOMClass',
 	);
+	debugger;
 	let point: HTMLElement | null = null;
 	const wrapElements = Array.from(
 		document.querySelectorAll(`.${mountDOMId || mountDOMClass}-wrap`),
@@ -55,7 +48,7 @@ export const getMfeMountPoint = ({
 	if (typeof mountDOMId === 'string') {
 		point =
 			queryShadowRoot(wrapElements, '#' + mountDOMId) ||
-			document.querySelector('#' + mountDOMId)[0];
+			document.querySelector('#' + mountDOMId);
 	} else if (typeof mountDOMClass === 'string') {
 		const elements =
 			queryShadowRoot(wrapElements, '.' + mountDOMClass) ||