unmount react root (#893)

Co-authored-by: L <[email protected]>
PlasmoHQ · Mar 7, 2024 · e1047bd · e1047bd
1 parent ca4b863
commit e1047bd
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git 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
@@ -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
@@ -28,6 +28,7 @@ const render = createRender(
   observer?.mountState,
   async (anchor, rootContainer) => {
     const root = createRoot(rootContainer)
+    anchor.root = root
 
     const Layout = getLayout(RawMount)