glass-easel-devtools-panel 0.10.1 → 0.12.0

package/src/pages/tree/element.ts

@@ -11,7 +11,7 @@ import {
 } from '../../events'
 import { sendRequest } from '../../message_channel'
 import { error, warn } from '../../utils'
-import { store } from '../store'
+import { store, type UserConfig } from '../store'
 
 type AttributeMeta = { name: string; value: string; isProperty: boolean; updateAniTs: number }
 
@@ -19,6 +19,7 @@ const enum DisplayKind {
   Text = 0,
   Tag = 1,
   VirtualTag = 2,
+  InheritVirtualTag = 3,
 }
 
 export const compDef = Component()
@@ -27,6 +28,7 @@ export const compDef = Component()
     propertyPassingDeepCopy: DeepCopyKind.None,
     propertyEarlyInit: true,
   })
+  .property('isShadowRoot', Boolean)
   .property('nodeInfo', {
     type: Object,
     value: null as protocol.dom.Node | null,
@@ -44,6 +46,7 @@ export const compDef = Component()
     children: [] as protocol.dom.Node[],
     tagVarName: '',
     tagUpdateHighlight: false,
+    hideSelf: false,
   }))
   .init((ctx) => {
     // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -60,7 +63,7 @@ export const compDef = Component()
     // store bindings
     initStoreBindings(ctx, {
       store,
-      fields: ['selectedNodeId', 'highlightNodeId'],
+      fields: ['selectedNodeId', 'highlightNodeId', 'userConfig'],
     })
 
     // child nodes listeners
@@ -206,8 +209,9 @@ export const compDef = Component()
       } else {
         let tagName = nodeInfo?.nodeName ?? ''
         if (nodeType === protocol.dom.GlassEaselNodeType.Unknown) tagName = 'unknown'
+        const isInherit = nodeType === protocol.dom.GlassEaselNodeType.InheritVirtualNode
         setData({
-          kind: DisplayKind.VirtualTag,
+          kind: isInherit ? DisplayKind.InheritVirtualTag : DisplayKind.VirtualTag,
           tagName,
         })
       }
@@ -228,11 +232,42 @@ export const compDef = Component()
       }
     })
 
+    // hide self node mode for virtual nodes
+    observer(
+      ['kind', 'isShadowRoot', 'userConfig'] as any,
+      (kind: DisplayKind, isShadowRoot: boolean, userConfig: UserConfig) => {
+        let hideSelf = false
+        if (userConfig) {
+          if (
+            userConfig.showComposed &&
+            (kind === DisplayKind.InheritVirtualTag || kind === DisplayKind.VirtualTag)
+          ) {
+            hideSelf = true
+          } else if (!isShadowRoot) {
+            if (userConfig.hideVirtual) {
+              if (kind === DisplayKind.InheritVirtualTag || kind === DisplayKind.VirtualTag) {
+                hideSelf = true
+              }
+            } else if (userConfig.hideInherit) {
+              if (kind === DisplayKind.InheritVirtualTag) hideSelf = true
+            }
+          }
+        }
+        if (!data.hideSelf && hideSelf) {
+          // eslint-disable-next-line @typescript-eslint/no-floating-promises, promise/catch-or-return
+          Promise.resolve().then(updateChildren)
+        }
+        setData({ hideSelf })
+      },
+    )
+
     // toggle children events
     const updateChildren = async () => {
       const distributedNodes = data.nodeInfo?.distributedNodes
       if (distributedNodes) {
-        const { nodes } = await sendRequest('DOM.getGlassEaselComposedChildren', { nodeId })
+        const { nodes } = await sendRequest('DOM.getGlassEaselNonInheritComposedChildren', {
+          nodeId,
+        })
         setData({ children: nodes })
       } else {
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -248,7 +283,8 @@ export const compDef = Component()
         Promise.resolve().then(updateChildren)
       }
     })
-    const visitChildNodePath = method(async (nodePath: protocol.dom.Node[]) => {
+    const visitChildNodePath = method(async (nodePath: protocol.dom.Node[], composed: boolean) => {
+      console.info('!!!', nodePath)
       const [node, ...childPath] = nodePath
       if (childPath.length === 0) {
         setData({ children: node.children })
@@ -259,9 +295,12 @@ export const compDef = Component()
         showChildNodes: true,
         children: node.children,
       })
+      if (composed && data.nodeInfo?.distributedNodes) {
+        await updateChildren()
+      }
       const childComp = self.selectComponent(`#child-${childPath[0].nodeId}`, compDef)
       if (childComp) {
-        await childComp.visitChildNodePath(childPath)
+        await childComp.visitChildNodePath(childPath, composed)
       } else {
         error(`cannot find child node id ${childPath[0].nodeId}`)
       }

package/src/pages/tree/element.wxml

@@ -1,44 +1,52 @@
-<view wx:if="{{ kind === 1 || kind === 2 }}" class="tag {{ tagUpdateHighlight ? 'updated' : '' }}">
-  <view class="fold-arrow">
-    <view wx:if="{{ hasChildNodes || hasSlotContent || hasShadowRoot }}" class="fold-arrow-icon {{ showChildNodes ? 'fold-arrow-icon_open' : '' }}" catch:tap="toggleChildren">▶</view>
-  </view>
+<view wx:if="{{ kind === 1 || kind === 2 || kind === 3 || kind === 4 }}" class="tag {{ tagUpdateHighlight ? 'updated' : '' }}">
+  <block wx:if="{{ hideSelf }}"></block>
+  <block wx:else>
+    <view class="fold-arrow">
+      <view wx:if="{{ hasChildNodes || hasSlotContent || hasShadowRoot }}" class="fold-arrow-icon {{ showChildNodes ? 'fold-arrow-icon_open' : '' }}" catch:tap="toggleChildren">▶</view>
+    </view>
 
-  <view
-    class="tag-body {{ selectedNodeId === nodeInfo.nodeId ? 'tag-body_selected' : '' }} {{ highlightNodeId === nodeInfo.nodeId ? 'tag-body_highlight' : '' }}"
-    hover-class="tag-body_hover"
-    catch:tap="selectTag"
-    bind:mouseenter="startHoverTag"
-    bind:mouseleave="endHoverTag"
-  >
-    <block wx:if="{{ kind === 1 }}">
-      <view class="tag-text">&lt;</view>
-      <view class="tag-name">{{ tagName }}</view>
-      <block wx:for="{{ attributes }}">
-        <view class="attribute">
-          <block>{{ ' ' }}</block>
-          <view class="attribute-name {{ item.isProperty ? 'attribute-name_property' : '' }}">{{ item.name }}</view>
-          <block>{{ '="' }}</block>
-          <view class="attribute-value {{ item.updateAniTs ? 'updated' : '' }}">{{ item.value }}</view>
-          <block>{{ '"' }}</block>
-        </view>
+    <view
+      class="tag-body {{ selectedNodeId === nodeInfo.nodeId ? 'tag-body_selected' : '' }} {{ highlightNodeId === nodeInfo.nodeId ? 'tag-body_highlight' : '' }}"
+      hover-class="tag-body_hover"
+      catch:tap="selectTag"
+      bind:mouseenter="startHoverTag"
+      bind:mouseleave="endHoverTag"
+    >
+      <block wx:if="{{ kind === 1 }}">
+        <view class="tag-text">&lt;</view>
+        <view class="tag-name">{{ tagName }}</view>
+        <block wx:for="{{ attributes }}">
+          <view class="attribute">
+            <block>{{ ' ' }}</block>
+            <view class="attribute-name {{ item.isProperty ? 'attribute-name_property' : '' }}">{{ item.name }}</view>
+            <block>{{ '="' }}</block>
+            <view class="attribute-value {{ item.updateAniTs ? 'updated' : '' }}">{{ item.value }}</view>
+            <block>{{ '"' }}</block>
+          </view>
+        </block>
+        <view class="tag-text">&gt;</view>
       </block>
-      <view class="tag-text">&gt;</view>
-    </block>
-    <block wx:else>
-      <view class="virtual-tag-name">{{ tagName }}</view>
-    </block>
-  </view>
+      <block wx:else>
+        <view class="virtual-tag-name">{{ tagName }}</view>
+      </block>
+    </view>
 
-  <view class="tag-var-name-wrapper" hidden="{{ selectedNodeId !== nodeInfo.nodeId }}">
-    <view wx:if="{{ tagVarName }}" class="tag-var-name">={{ tagVarName }}</view>
-    <view wx:else class="tag-var-name" hover-class="tag-var-name_hover" catch:tap="useElementInConsole">↖</view>
-  </view>
+    <view class="tag-var-name-wrapper" hidden="{{ selectedNodeId !== nodeInfo.nodeId }}">
+      <view wx:if="{{ tagVarName }}" class="tag-var-name">={{ tagVarName }}</view>
+      <view wx:else class="tag-var-name" hover-class="tag-var-name_hover" catch:tap="useElementInConsole">↖</view>
+    </view>
+  </block>
 
-  <view hidden="{{ !showChildNodes }}" class="children">
+  <view
+    hidden="{{ !showChildNodes && !hideSelf }}"
+    class="children {{ hideSelf ? '' : 'children_indent' }}"
+  >
     <view wx:if="{{ hasShadowRoot }}" class="shadow-roots">
-      <element wx:for="{{ shadowRoots }}" wx:key="nodeId" id="child-{{ item.nodeId }}" node-info="{{ item }}" />
+      <element is-shadow-root wx:for="{{ shadowRoots }}" wx:key="nodeId" id="child-{{ item.nodeId }}" node-info="{{ item }}" />
     </view>
-    <element wx:for="{{ children }}" wx:key="nodeId" id="child-{{ item.nodeId }}" node-info="{{ item }}" />
+    <block wx:if="{{ !userConfig.showComposed || isShadowRoot || !hasShadowRoot || nodeInfo.distributedNodes != undefined }}">
+      <element wx:for="{{ children }}" wx:key="nodeId" id="child-{{ item.nodeId }}" node-info="{{ item }}" />
+    </block>
   </view>
 </view>
 

package/src/pages/tree/element.wxss

@@ -31,6 +31,7 @@
   line-height: 1em;
   color: #444;
   text-align: center;
+  user-select: none;
 }
 .fold-arrow-icon {
   width: 1em;
@@ -94,7 +95,7 @@
   .color-mode(color, @attribute-value);
 }
 
-.children {
+.children_indent {
   margin-left: 1em;
 }
 

package/typings/miniprogram.d.ts

@@ -1,6 +1,11 @@
-import type { PageConstructor, ComponentConstructor } from 'glass-easel-miniprogram-adapter'
+import type {
+  PageConstructor,
+  ComponentConstructor,
+  BehaviorConstructor,
+} from 'glass-easel-miniprogram-adapter'
 
 declare global {
   const Page: PageConstructor
   const Component: ComponentConstructor
+  const Behavior: BehaviorConstructor
 }