feat: allow to observe attach status for native node

Author: Tidyzq

glass-easel/src/element.ts

@@ -578,20 +578,23 @@ export class Element implements NodeCast {
     const callFunc = function callFunc(node: Node) {
       if (isElement(node) && !node._$attached) {
         node._$attached = true
-        if (isComponent(node)) {
+        const nodeIsComponent = isComponent(node)
+        if (nodeIsComponent) {
           node.triggerLifetime('attached', [])
           if (node._$relation) {
             node._$relation.triggerLinkEvent(RelationType.ParentNonVirtualNode, false)
             node._$relation.triggerLinkEvent(RelationType.ParentComponent, false)
             node._$relation.triggerLinkEvent(RelationType.Ancestor, false)
           }
-          if (node._$mutationObserverTarget) {
-            MutationObserverTarget.callAttachObservers(node, {
-              type: 'attachStatus',
-              target: node,
-              status: 'attached',
-            })
-          }
+        }
+        if (node._$mutationObserverTarget) {
+          MutationObserverTarget.callAttachObservers(node, {
+            type: 'attachStatus',
+            target: node,
+            status: 'attached',
+          })
+        }
+        if (nodeIsComponent) {
           const shadowRoot = node.getShadowRoot()
           if (shadowRoot) callFunc(shadowRoot)
         }
@@ -622,16 +625,16 @@ export class Element implements NodeCast {
             node._$relation.triggerLinkEvent(RelationType.ParentComponent, true)
             node._$relation.triggerLinkEvent(RelationType.Ancestor, true)
           }
-          if (node._$mutationObserverTarget) {
-            MutationObserverTarget.callAttachObservers(node, {
-              type: 'attachStatus',
-              target: node,
-              status: 'detached',
-            })
-          }
         } else {
           node._$attached = false
         }
+        if (node._$mutationObserverTarget) {
+          MutationObserverTarget.callAttachObservers(node, {
+            type: 'attachStatus',
+            target: node,
+            status: 'detached',
+          })
+        }
       }
     }
     callFunc(node)

glass-easel/tests/core/mutation_observer.test.ts

@@ -409,4 +409,26 @@ describe('MutationObserver', () => {
     textNode.textContent = 'def'
     expect(callEv.pop()).toBeUndefined()
   })
+
+  it('observer native node attach status', () => {
+    const elem = glassEasel.Component.createWithContext('root', parentDef, domBackend)
+    const shadowRoot = elem.getShadowRoot()!
+    const child1 = shadowRoot.childNodes[0]!.asInstanceOf(childDef)!
+    const div = child1.childNodes[1]!.asNativeNode()!
+    const callEv = [] as glassEasel.mutationObserver.MutationObserverEvent[]
+    const observer = glassEasel.MutationObserver.create((ev) => {
+      callEv.push(ev)
+    })
+    observer.observe(div, { attachStatus: true })
+    glassEasel.Element.pretendAttached(elem)
+    expect(callEv.pop()).toMatchObject({
+      type: 'attachStatus',
+      status: 'attached'
+    })
+    glassEasel.Element.pretendDetached(elem)
+    expect(callEv.pop()).toMatchObject({
+      type: 'attachStatus',
+      status: 'detached'
+    })
+  })
 })