From e1047bd431334aa5b4cf3235278eb2318e8c90d9 Mon Sep 17 00:00:00 2001
From: Alex <lg.owns@gmail.com>
Date: Thu, 7 Mar 2024 07:51:53 +0200
Subject: [PATCH] unmount react root (#893)

Co-authored-by: L <6723574+louisgv@users.noreply.github.com>
---
 cli/plasmo/src/type.ts                                        | 3 +++
 cli/plasmo/templates/static/common/csui.ts                    | 4 +++-
 .../templates/static/react18/content-script-ui-mount.tsx      | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/cli/plasmo/src/type.ts b/cli/plasmo/src/type.ts
index a7ae39371..466c5f70f 100644
--- a/cli/plasmo/src/type.ts
+++ b/cli/plasmo/src/type.ts
@@ -1,4 +1,5 @@
 import type { ManifestContentScript } from "@plasmo/constants/manifest/content-script"
+import type { Root } from "react-dom/client"
 
 // See https://www.plasmo.com/engineering/log/2022.04#update-2022.04.23
 export type PlasmoCSConfig = Omit<Partial<ManifestContentScript>, "js">
@@ -16,12 +17,14 @@ type GetElement = Getter<Element>
 
 type PlasmoCSUIOverlayAnchor = {
   element: Element
+  root?: Root
   type: "overlay"
 }
 
 type PlasmoCSUIInlineAnchor = {
   element: Element
   type: "inline"
+  root?: Root
   insertPosition?: "beforebegin" | "afterbegin" | "beforeend" | "afterend"
 }
 
diff --git a/cli/plasmo/templates/static/common/csui.ts b/cli/plasmo/templates/static/common/csui.ts
index 118161bb2..8a35c2dfc 100644
--- a/cli/plasmo/templates/static/common/csui.ts
+++ b/cli/plasmo/templates/static/common/csui.ts
@@ -158,7 +158,7 @@ export function createAnchorObserver<T>(Mount: PlasmoCSUI<T>) {
 
     // Go through mounted sets and check if they are still mounted
     for (const el of mountState.hostSet) {
-      if (isMounted(el)) {
+      if (isMounted(el)) { 
         const anchor = mountState.hostMap.get(el)
         if (!!anchor) {
           if (anchor.type === "inline") {
@@ -168,6 +168,8 @@ export function createAnchorObserver<T>(Mount: PlasmoCSUI<T>) {
           }
         }
       } else {
+        const anchor = mountState.hostMap.get(el)
+        anchor.root?.unmount();
         mountState.hostSet.delete(el)
       }
     }
diff --git a/cli/plasmo/templates/static/react18/content-script-ui-mount.tsx b/cli/plasmo/templates/static/react18/content-script-ui-mount.tsx
index 70f499039..fbcaf5a80 100644
--- a/cli/plasmo/templates/static/react18/content-script-ui-mount.tsx
+++ b/cli/plasmo/templates/static/react18/content-script-ui-mount.tsx
@@ -28,6 +28,7 @@ const render = createRender(
   observer?.mountState,
   async (anchor, rootContainer) => {
     const root = createRoot(rootContainer)
+    anchor.root = root
 
     const Layout = getLayout(RawMount)