@dimina-kit/inspect 0.4.0-dev.20260716163758 → 0.4.0-dev.20260716214527

package/dist/panel-view.js

@@ -6,7 +6,12 @@ import { useCallback, useEffect, useRef, useState } from 'react';
  * - 路径式 tag（含 `/`）= 页面或自定义组件，默认展开（让用户一眼看清组件层级）
  * - 普通 DOM 节点（view/text 等）默认折叠，需要用户手动点开
  */
-function isDefaultExpanded(node) {
+function isDefaultExpanded(node, depth) {
+    // The root always opens expanded: collapsed, it hides the entire tree
+    // behind one ▸ row and the panel reads as blank — regardless of what tag
+    // shape the runtime gives the root (plain `page`, a component path, …).
+    if (depth === 0)
+        return true;
     if (node.tagName === '#shadow-root')
         return true;
     if (node.tagName.includes('/'))
@@ -28,7 +33,7 @@ function WxmlFragmentNode({ node, depth, inspectedSid, onInspect }) {
 // Shadow root — synthetic boundary for custom component internals.
 // Clickable to collapse like WeChat DevTools; default expanded; no closing tag.
 function WxmlShadowRootNode({ node, depth, inspectedSid, onInspect }) {
-    const [expanded, setExpanded] = useState(() => isDefaultExpanded(node));
+    const [expanded, setExpanded] = useState(() => isDefaultExpanded(node, depth));
     const indent = depth * 16;
     const hasShadowChildren = (node.children ?? []).length > 0;
     return (_jsxs("div", { children: [_jsxs("div", { className: "py-px leading-[18px] hover:bg-surface-2 cursor-pointer", style: { paddingLeft: indent }, onClick: () => hasShadowChildren && setExpanded(!expanded), children: [_jsx("span", { className: "text-text-dim w-3 shrink-0 inline-block text-center select-none", children: hasShadowChildren ? (expanded ? '▾' : '▸') : ' ' }), _jsx("span", { className: "text-text-dim italic", children: "#shadow-root" })] }), expanded && node.children.map((child, i) => (_jsx(WxmlTreeNode, { node: child, depth: depth + 1, inspectedSid: inspectedSid, onInspect: onInspect }, i)))] }));
@@ -47,7 +52,7 @@ function WxmlBlockRow({ node, depth, indent, attrEntries, hasChildren, expanded,
 }
 // Ordinary element node — decides between the inline-text and block layouts.
 function WxmlElementNode({ node, depth, inspectedSid, onInspect }) {
-    const [expanded, setExpanded] = useState(() => isDefaultExpanded(node));
+    const [expanded, setExpanded] = useState(() => isDefaultExpanded(node, depth));
     const indent = depth * 16;
     const isInspected = Boolean(node.sid && node.sid === inspectedSid);
     const hasChildren = (node.children ?? []).length > 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimina-kit/inspect",
-  "version": "0.4.0-dev.20260716163758",
+  "version": "0.4.0-dev.20260716214527",
   "description": "Host-agnostic WXML tree extraction and inspection for dimina render layers: Vue runtime walk, stable-id registry, mutation-observing inspector, and a React tree panel.",
   "keywords": [
     "dimina",

package/src/panel-view-root-expand.test.tsx

@@ -0,0 +1,53 @@
+/**
+ * WxmlPanel root-expansion contract: the tree's root node renders expanded by
+ * default. A collapsed root hides the ENTIRE tree behind a single ▸ row, so
+ * the panel would open showing no structure at all — the first level must be
+ * visible without a manual expand click. Guards against expand heuristics
+ * that key off tag shape (e.g. component-path tags) and silently stop
+ * matching the root when the runtime's tag naming changes.
+ */
+import { describe, expect, it } from 'vitest'
+import { render } from '@testing-library/react'
+import { WxmlPanel } from './panel-view.js'
+import type { WxmlNode } from './types.js'
+
+const TREE: WxmlNode = {
+  tagName: 'page',
+  attrs: {},
+  children: [
+    { tagName: 'view', attrs: { class: 'container' }, children: [] },
+  ],
+}
+
+describe('WxmlPanel: root renders expanded by default', () => {
+  it('shows the root children without a manual expand click', () => {
+    const { container } = render(<WxmlPanel tree={TREE} />)
+    const text = container.textContent ?? ''
+    expect(text).toContain('page')
+    expect(
+      text,
+      'the first tree level must be visible on open — a collapsed root leaves the panel blank',
+    ).toContain('container')
+  })
+
+  it('keeps non-root plain-tag nodes collapsed by default', () => {
+    const nested: WxmlNode = {
+      tagName: 'page',
+      attrs: {},
+      children: [
+        {
+          tagName: 'view',
+          attrs: { class: 'outer' },
+          children: [{ tagName: 'text', attrs: { class: 'inner-marker' }, children: [] }],
+        },
+      ],
+    }
+    const { container } = render(<WxmlPanel tree={nested} />)
+    const text = container.textContent ?? ''
+    expect(text).toContain('outer')
+    expect(
+      text,
+      'depth-1 plain tags keep the collapsed default — root expansion must not cascade',
+    ).not.toContain('inner-marker')
+  })
+})

package/src/panel-view.tsx

@@ -22,7 +22,11 @@ interface WxmlTreeNodeProps {
  * - 路径式 tag（含 `/`）= 页面或自定义组件，默认展开（让用户一眼看清组件层级）
  * - 普通 DOM 节点（view/text 等）默认折叠，需要用户手动点开
  */
-function isDefaultExpanded(node: WxmlNode): boolean {
+function isDefaultExpanded(node: WxmlNode, depth: number): boolean {
+  // The root always opens expanded: collapsed, it hides the entire tree
+  // behind one ▸ row and the panel reads as blank — regardless of what tag
+  // shape the runtime gives the root (plain `page`, a component path, …).
+  if (depth === 0) return true
   if (node.tagName === '#shadow-root') return true
   if (node.tagName.includes('/')) return true
   return false
@@ -77,7 +81,7 @@ function WxmlFragmentNode({ node, depth, inspectedSid, onInspect }: WxmlTreeNode
 // Shadow root — synthetic boundary for custom component internals.
 // Clickable to collapse like WeChat DevTools; default expanded; no closing tag.
 function WxmlShadowRootNode({ node, depth, inspectedSid, onInspect }: WxmlTreeNodeProps) {
-  const [expanded, setExpanded] = useState(() => isDefaultExpanded(node))
+  const [expanded, setExpanded] = useState(() => isDefaultExpanded(node, depth))
   const indent = depth * 16
   const hasShadowChildren = (node.children ?? []).length > 0
   return (
@@ -206,7 +210,7 @@ function WxmlBlockRow({
 
 // Ordinary element node — decides between the inline-text and block layouts.
 function WxmlElementNode({ node, depth, inspectedSid, onInspect }: WxmlTreeNodeProps) {
-  const [expanded, setExpanded] = useState(() => isDefaultExpanded(node))
+  const [expanded, setExpanded] = useState(() => isDefaultExpanded(node, depth))
   const indent = depth * 16
   const isInspected = Boolean(node.sid && node.sid === inspectedSid)
   const hasChildren = (node.children ?? []).length > 0