glass-easel-devtools-agent 0.10.2 → 0.12.0

package/dist/mount_point.d.ts

@@ -140,6 +140,7 @@ export declare class MountPointsManager {
     private useInConsole;
     generateNodeId(): NodeId;
     private getNodeId;
+    private getActiveNodeId;
     private queryActiveNode;
     private getMaybeBackendNode;
     private startWatch;

package/dist/protocol/dom.d.ts

@@ -21,7 +21,7 @@ export type AgentRequestKind = {
     getAttributes: GetAttributes;
     getGlassEaselAttributes: GetGlassEaselAttributes;
     useGlassEaselAttributeInConsole: UseGlassEaselAttributeInConsole;
-    getGlassEaselComposedChildren: GetGlassEaselComposedChildren;
+    getGlassEaselNonInheritComposedChildren: GetGlassEaselNonInheritComposedChildren;
     requestChildNodes: RequestChildNodes;
     removeNode: RemoveNode;
     resolveNode: ResolveNode;
@@ -48,7 +48,8 @@ export declare const enum GlassEaselNodeType {
     TextNode = 257,
     NativeNode = 258,
     Component = 259,
-    VirtualNode = 260
+    VirtualNode = 260,
+    InheritVirtualNode = 261
 }
 export declare const glassEaselNodeTypeToCDP: (t: GlassEaselNodeType) => CDPNodeType.ELEMENT_NODE | CDPNodeType.TEXT_NODE | CDPNodeType.DOCUMENT_NODE;
 /**
@@ -76,6 +77,8 @@ export type Node = BackendNode & {
     nodeId: NodeId;
     /** Node id of its parent (if any); for shadow-root, this is its host. */
     parentId?: NodeId;
+    /** The composed parent (if any). */
+    glassEaselNonInheritComposedParentId?: NodeId;
     /** The local name of the node (for components, it is the component name). */
     localName: string;
     /** The text content (if any). */
@@ -284,7 +287,7 @@ export interface UseGlassEaselAttributeInConsole {
 /**
  * Get the composed children of a node.
  */
-export interface GetGlassEaselComposedChildren extends RequestResponse {
+export interface GetGlassEaselNonInheritComposedChildren extends RequestResponse {
     request: {
         nodeId: NodeId;
     };

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "glass-easel-devtools-agent",
-  "version": "0.10.2",
+  "version": "0.12.0",
   "main": "dist/index.js",
   "peerDependencies": {
-    "glass-easel": "^0.10.2"
+    "glass-easel": ">=0.12.0"
   },
   "devDependencies": {
     "@csstools/css-tokenizer": "^2.4.1",
     "@csstools/selector-specificity": "^3.1.1",
     "@types/node": "^20.16.5",
     "devtools-protocol": "^0.0.1319565",
-    "glass-easel": "^0.10.2",
-    "glass-easel-template-compiler": "^0.10.2",
+    "glass-easel": ">=0.12.0",
+    "glass-easel-template-compiler": ">=0.12.0",
     "postcss-selector-parser": "^6.1.2"
   },
   "scripts": {

package/src/mount_point.ts

@@ -29,7 +29,12 @@ export const enum StaticNodeName {
 const getNodeType = (node: glassEasel.Node): GlassEaselNodeType => {
   if (node.asTextNode()) return GlassEaselNodeType.TextNode
   if (node.asNativeNode()) return GlassEaselNodeType.NativeNode
-  if (node.asVirtualNode()) return GlassEaselNodeType.VirtualNode
+  if (node.asVirtualNode()) {
+    if (node.asVirtualNode()!.isInheritSlots()) {
+      return GlassEaselNodeType.InheritVirtualNode
+    }
+    return GlassEaselNodeType.VirtualNode
+  }
   if (node.asGeneralComponent()) return GlassEaselNodeType.Component
   return GlassEaselNodeType.Unknown
 }
@@ -45,14 +50,21 @@ const getNodeName = (
     const comp = node.asGeneralComponent()!
     return local ? comp.is : comp.tagName
   }
-  if (nodeType === GlassEaselNodeType.VirtualNode) return node.asVirtualNode()!.is
+  if (
+    nodeType === GlassEaselNodeType.VirtualNode ||
+    nodeType === GlassEaselNodeType.InheritVirtualNode
+  ) {
+    return node.asVirtualNode()!.is
+  }
   return StaticNodeName.Unknown
 }
 
 export class MountPointsManager {
   private conn: Connection
   private nodeIdMap = new WeakMap<glassEasel.Node, NodeId>()
+  // active nodes are the nodes that being display and watched
   private activeNodes = Object.create(null) as Record<NodeId, NodeMeta>
+  // backend nodes are the nodes that has being transmitted to the client in arguments but not display
   private activeBackendNodes = Object.create(null) as Record<NodeId, WeakRef<glassEasel.Node>>
   readonly documentNodeId = 1
   private nodeIdInc = 2
@@ -143,7 +155,11 @@ export class MountPointsManager {
       let glassEaselNodeType = GlassEaselNodeType.Unknown
       if (comp) glassEaselNodeType = GlassEaselNodeType.Component
       if (nativeNode) glassEaselNodeType = GlassEaselNodeType.NativeNode
-      if (virtualNode) glassEaselNodeType = GlassEaselNodeType.VirtualNode
+      if (virtualNode) {
+        glassEaselNodeType = virtualNode.isInheritSlots()
+          ? GlassEaselNodeType.InheritVirtualNode
+          : GlassEaselNodeType.VirtualNode
+      }
 
       // collect basic attributes
       const virtual = elem.isVirtual()
@@ -325,17 +341,28 @@ export class MountPointsManager {
       },
     )
 
-    this.conn.setRequestHandler('DOM.getGlassEaselComposedChildren', async ({ nodeId }) => {
-      const { node } = this.queryActiveNode(nodeId)
-      const elem = node.asElement()
-      if (!elem) return { nodes: [] }
-      const nodes: dom.Node[] = []
-      elem.forEachComposedChild((child) => {
-        const nodeMeta = this.activateNode(child)
-        nodes.push(this.collectNodeDetails(nodeMeta, 0, false))
-      })
-      return { nodes }
-    })
+    this.conn.setRequestHandler(
+      'DOM.getGlassEaselNonInheritComposedChildren',
+      async ({ nodeId }) => {
+        const { node } = this.queryActiveNode(nodeId)
+        const elem = node.asElement()
+        if (!elem) return { nodes: [] }
+        const nodes: dom.Node[] = []
+        if (elem.isInheritSlots()) {
+          elem.childNodes.forEach((child) => {
+            const nodeMeta = this.activateNode(child)
+            nodes.push(this.collectNodeDetails(nodeMeta, 0, false))
+          })
+        } else {
+          elem.forEachComposedChild((child) => {
+            if (child.parentNode?.isInheritSlots()) return
+            const nodeMeta = this.activateNode(child)
+            nodes.push(this.collectNodeDetails(nodeMeta, 0, false))
+          })
+        }
+        return { nodes }
+      },
+    )
 
     this.conn.setRequestHandler(
       'DOM.pushNodesByBackendIdsToFrontend',
@@ -648,6 +675,14 @@ export class MountPointsManager {
     return newNodeId
   }
 
+  private getActiveNodeId(node: glassEasel.Node): NodeId | null {
+    const nodeId = this.nodeIdMap.get(node)
+    if (nodeId !== undefined) {
+      return this.activeNodes[nodeId] ? nodeId : null
+    }
+    return null
+  }
+
   private queryActiveNode(nodeId: NodeId): NodeMeta {
     const nodeMeta = this.activeNodes[nodeId]
     if (!nodeMeta) throw new Error(`no active node found for node id ${nodeId}`)
@@ -752,11 +787,32 @@ export class MountPointsManager {
           if (index < 0) return
           const previousNodeId = index === 0 ? 0 : this.getNodeId(parent.childNodes[index - 1])
           const childMeta = this.activateNode(child)
+          const node = this.collectNodeDetails(childMeta, 0, false)
           this.conn.sendEvent('DOM.childNodeInserted', {
             parentNodeId: nodeId,
             previousNodeId,
-            node: this.collectNodeDetails(childMeta, 0, false),
+            node,
           })
+          const composedParent = child.getComposedParent()
+          if (!parent.isInheritSlots() && composedParent && composedParent !== parent) {
+            const composedParentId = this.getActiveNodeId(composedParent)
+            if (composedParentId) {
+              let prev: glassEasel.Node | null = null
+              const found = composedParent.forEachComposedChild((c) => {
+                if (c === child) return false
+                prev = c
+                return true
+              })
+              if (found) {
+                const previousNodeId = prev ? this.getNodeId(prev) : 0
+                this.conn.sendEvent('DOM.childNodeInserted', {
+                  parentNodeId: composedParentId,
+                  previousNodeId,
+                  node,
+                })
+              }
+            }
+          }
         })
         ev.removedNodes?.forEach((child) => {
           this.deactivateNodeTree(child)
@@ -764,6 +820,16 @@ export class MountPointsManager {
             parentNodeId: nodeId,
             nodeId: this.getNodeId(child),
           })
+          const composedParent = child.getComposedParent()
+          if (!parent.isInheritSlots() && composedParent && composedParent !== parent) {
+            const composedParentId = this.getActiveNodeId(composedParent)
+            if (composedParentId) {
+              this.conn.sendEvent('DOM.childNodeRemoved', {
+                parentNodeId: composedParentId,
+                nodeId: this.getNodeId(child),
+              })
+            }
+          }
         })
         return
       }
@@ -886,6 +952,17 @@ export class MountPointsManager {
     else if (node.parentNode) parentId = this.getNodeId(node.parentNode)
     else if (node.asShadowRoot()) parentId = this.getNodeId(node.asShadowRoot()!.getHostNode())
     else parentId = undefined
+    let composedParentId: NodeId | undefined
+    if (isMountPoint) {
+      composedParentId = this.documentNodeId
+    } else if (node.parentNode?.isInheritSlots()) {
+      composedParentId = parentId
+    } else {
+      const composedParent = node.getComposedParent()
+      if (composedParent) {
+        composedParentId = this.addBackendNode(composedParent)
+      }
+    }
     const localName = getNodeName(node, ty, true)
     const nodeValue = node.asTextNode()?.textContent ?? ''
 
@@ -993,6 +1070,7 @@ export class MountPointsManager {
       const elem = node.asElement()!
       distributedNodes = []
       elem.forEachComposedChild((child) => {
+        if (child.parentNode?.isInheritSlots()) return
         const nodeId = this.addBackendNode(child)
         const n = this.collectNodeBasicInfomation(nodeId, child)
         if (n) distributedNodes!.push(n)
@@ -1008,6 +1086,7 @@ export class MountPointsManager {
       inheritSlots,
       nodeId,
       parentId,
+      glassEaselNonInheritComposedParentId: composedParentId,
       localName,
       nodeValue,
       attributes,

package/src/protocol/dom.ts

@@ -23,7 +23,7 @@ export type AgentRequestKind = {
   getAttributes: GetAttributes
   getGlassEaselAttributes: GetGlassEaselAttributes
   useGlassEaselAttributeInConsole: UseGlassEaselAttributeInConsole
-  getGlassEaselComposedChildren: GetGlassEaselComposedChildren
+  getGlassEaselNonInheritComposedChildren: GetGlassEaselNonInheritComposedChildren
   requestChildNodes: RequestChildNodes
   removeNode: RemoveNode
   resolveNode: ResolveNode
@@ -54,6 +54,7 @@ export const enum GlassEaselNodeType {
   NativeNode,
   Component,
   VirtualNode,
+  InheritVirtualNode,
 }
 
 export const glassEaselNodeTypeToCDP = (t: GlassEaselNodeType) => {
@@ -61,6 +62,7 @@ export const glassEaselNodeTypeToCDP = (t: GlassEaselNodeType) => {
   if (t === GlassEaselNodeType.NativeNode) return CDPNodeType.ELEMENT_NODE
   if (t === GlassEaselNodeType.Component) return CDPNodeType.ELEMENT_NODE
   if (t === GlassEaselNodeType.VirtualNode) return CDPNodeType.ELEMENT_NODE
+  if (t === GlassEaselNodeType.InheritVirtualNode) return CDPNodeType.ELEMENT_NODE
   if (t === GlassEaselNodeType.Unknown) return CDPNodeType.DOCUMENT_NODE
   return CDPNodeType.DOCUMENT_NODE
 }
@@ -91,6 +93,8 @@ export type Node = BackendNode & {
   nodeId: NodeId
   /** Node id of its parent (if any); for shadow-root, this is its host. */
   parentId?: NodeId
+  /** The composed parent (if any). */
+  glassEaselNonInheritComposedParentId?: NodeId
   /** The local name of the node (for components, it is the component name). */
   localName: string
   /** The text content (if any). */
@@ -248,7 +252,7 @@ export interface UseGlassEaselAttributeInConsole {
 /**
  * Get the composed children of a node.
  */
-export interface GetGlassEaselComposedChildren extends RequestResponse {
+export interface GetGlassEaselNonInheritComposedChildren extends RequestResponse {
   request: { nodeId: NodeId }
   response: { nodes: Node[] }
 }