bugfix: appContext.unmount() no longer removes portal roots

CrimsonChi · May 29, 2024 · 3487885 · 3487885
1 parent fa61d0f
commit 3487885
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/packages/lib/src/component.ts b/packages/lib/src/component.ts
@@ -5,7 +5,7 @@ import { node, nodeToCtxMap } from "./globals.js"
 export { Component }
 
 abstract class Component<T = Record<string, unknown>> {
-  rootDom?: HTMLElement
+  doNotModifyDom = false
   static [componentSymbol] = true
   state = {} as Record<string, unknown>
   props: T

diff --git a/packages/lib/src/dom.ts b/packages/lib/src/dom.ts
@@ -127,7 +127,7 @@ function setStyleProp(
 }
 
 function updateDom(node: VNode, dom: HTMLElement | SVGElement | Text) {
-  if (node.instance?.rootDom) return node.instance.rootDom
+  if (node.instance?.doNotModifyDom) return node.dom
   const prevProps: Record<string, any> = node.prev?.props ?? {}
   const nextProps: Record<string, any> = node.props ?? {}
 
@@ -164,10 +164,10 @@ type DomParentSearchResult = {
 }
 function getDomParent(node: VNode): DomParentSearchResult {
   let domParentNode: VNode | undefined = node.parent ?? node.prev?.parent
-  let domParent = domParentNode?.instance?.rootDom ?? domParentNode?.dom
+  let domParent = domParentNode?.dom
   while (domParentNode && !domParent) {
     domParentNode = domParentNode.parent
-    domParent = domParentNode?.instance?.rootDom ?? domParentNode?.dom
+    domParent = domParentNode?.dom
   }
 
   if (!domParent || !domParentNode) {
@@ -297,12 +297,14 @@ function commitDeletion(vNode: VNode, deleteSibling = false) {
   const stack: VNode[] = [vNode]
   while (stack.length) {
     const n = stack.pop()!
+    let skipDomRemoval = false
     if (Component.isCtor(n.type) && n.instance) {
       n.instance.componentWillUnmount?.()
+      if (n.instance.doNotModifyDom) skipDomRemoval = true
     }
     while (n.hooks?.length) cleanupHook(n.hooks.pop()!)
     while (n.subs?.length) Signal.unsubscribeNode(n, n.subs.pop()!)
-    if (n.dom?.isConnected) n.dom.remove()
+    if (n.dom?.isConnected && !skipDomRemoval) n.dom.remove()
     delete n.dom
     if (deleteSibling && n.sibling) stack.push(n.sibling)
     if (n.child) stack.push(n.child)

diff --git a/packages/lib/src/portal.ts b/packages/lib/src/portal.ts
@@ -8,9 +8,9 @@ type PortalProps = {
 }
 
 class Portal extends Component<PortalProps> {
+  doNotModifyDom = true
   constructor(props: PortalProps) {
     super(props)
-    this.rootDom = props.container
   }
   componentDidMount(): void {
     this.vNode.dom = this.props.container

diff --git a/sandbox/csr/src/main.ts b/sandbox/csr/src/main.ts
@@ -1,10 +1,20 @@
 import "./index.css"
 import { App } from "./App"
-import { mount, renderToString } from "kaioken"
+import { AppContext, mount, renderToString } from "kaioken"
 
 const root = document.getElementById("app")!
 
-mount(App, { root, maxFrameMs: 16, name: "CSR app" })
+declare global {
+  interface Window {
+    kaiokenInstance: AppContext
+  }
+}
+
+window.kaiokenInstance = await mount(App, {
+  root,
+  maxFrameMs: 16,
+  name: "CSR app",
+})
 
 let testRenderToString = false
 if (testRenderToString) {