@dimina-kit/devtools 0.3.0 → 0.3.1-dev.20260515105504

package/dist/preload/instrumentation/wxml-extract.js

@@ -1,3 +1,4 @@
+import { registerSyntheticSid } from '../runtime/bridge.js';
 const INTERNAL_CLASSES = new Set([
     'dd-swiper-wrapper', 'dd-swiper-slides', 'dd-swiper-slide-frame', 'dd-swiper-dots',
     'dd-picker-overlay', 'dd-picker-container', 'dd-picker-header', 'dd-picker-body',
@@ -24,10 +25,44 @@ function resolveTemplateNameFromParent(instance) {
     }
     return null;
 }
+/**
+ * Convert a PascalCase / camelCase identifier to kebab-case. Matches the
+ * upstream `camelCaseToUnderscore` (dimina/fe/packages/common) so a name
+ * already normalized by `withInstall` round-trips identically.
+ * `View` -> `view`, `ScrollView` -> `scroll-view`, `CoverImage` -> `cover-image`.
+ */
+function pascalToKebab(name) {
+    return name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+/**
+ * Read the page's source path off Vue's provide/inject. dimina runtime.js 在
+ * dd-page 的 setup() 里调用 `provide('path', path)`，Vue 把它存到
+ * `instance.provides`。我们利用这个把页面节点的 tagName 从硬编码 `page`
+ * 升级为页面全路径（如 `pages/index/index`），对齐微信开发者工具。
+ */
+function resolvePagePath(instance) {
+    // dimina runtime 在 dd-page 的 setup 里 `instance.proxy.__page__ = true` 并
+    // `provide('path', path)`。两个标记同时具备才视为页面层级，避免 dd-page
+    // 的子节点继承 provides.path 后被误判（Vue 用 Object.create 链式 provides）。
+    const proxy = instance.proxy;
+    if (proxy?.__page__ !== true)
+        return null;
+    const provides = instance.provides;
+    const path = provides?.path;
+    if (typeof path !== 'string' || !path)
+        return null;
+    return path.startsWith('/') ? path.slice(1) : path;
+}
 function resolveTagName(instance) {
     const type = instance.type;
     if (!type)
         return 'unknown';
+    // 页面层级优先：dd-page 没有 __tagName/__name，且 home 页等无 usingComponents
+    // 的页面 type.components 为 undefined，会落到 resolveTemplateNameFromParent
+    // 回到 'page'。在那之前直接用 provide('path') 的路径升级 tag 名。
+    const pagePath = resolvePagePath(instance);
+    if (pagePath)
+        return pagePath;
     if (typeof type.__tagName === 'string')
         return type.__tagName;
     const name = (type.__name || type.name);
@@ -42,8 +77,16 @@ function resolveTagName(instance) {
         return 'page';
     if (name.startsWith('dd-'))
         return name.slice(3);
+    // Reverse-map Dimina component names back to their miniprogram tag names.
+    // The installer (`withInstall`) sets `__tagName = camelCaseToUnderscore(__name)`,
+    // but in dev builds, custom registrations, or when the installer hasn't run,
+    // we may only see the raw `__name`/`name` (e.g. `View`, `ScrollView`, `DdButton`).
+    // Without this fallback the WXML panel would surface the upstream Vue name
+    // verbatim, defeating the panel's purpose of showing source-level tags.
     if (name.startsWith('Dd') && name.length > 2)
-        return name.slice(2).toLowerCase();
+        return pascalToKebab(name.slice(2));
+    if (/^[A-Z]/.test(name))
+        return pascalToKebab(name);
     return name;
 }
 function extractProps(instance) {
@@ -79,7 +122,12 @@ function isInternalElement(vnode) {
 function getElementSid(instance) {
     const subTree = instance.subTree;
     const el = subTree?.el;
-    return el?.getAttribute ? el.getAttribute('data-sid') ?? undefined : undefined;
+    if (!el?.getAttribute)
+        return undefined;
+    const sid = el.getAttribute('data-sid');
+    if (sid)
+        return sid;
+    return registerSyntheticSid(el);
 }
 function isTransparentComponent(instance, tagName) {
     if (tagName === 'unknown')
@@ -97,9 +145,29 @@ function isTransparentComponent(instance, tagName) {
     }
     return false;
 }
+/**
+ * 检测 Vue 的 Comment vnode（`v-if`/`v-else`/`v-for` 占位锚点）。
+ * Vue 在条件不成立时会留下 `<!-- v-if -->` 这样的注释 vnode 用作 DOM 锚点。
+ * 这些 vnode 不是用户内容，必须从 wxml 树里剔除。
+ *
+ * - dev build：type 是 `Symbol('Comment')`，description = 'Comment' 或 'v-cmt'
+ * - prod build：description 可能丢失，但 children 一般是 'v-if'/'v-else' 等 marker
+ */
+function isCommentVNode(vnode) {
+    const type = vnode.type;
+    if (typeof type !== 'symbol')
+        return false;
+    const desc = type.description;
+    if (desc === 'Comment' || desc === 'v-cmt')
+        return true;
+    const children = typeof vnode.children === 'string' ? vnode.children : '';
+    return /^v-(if|else|else-if|for)$/.test(children);
+}
 function extractChildrenFromVNode(vnode, depth) {
     if (!vnode || depth > 50)
         return [];
+    if (isCommentVNode(vnode))
+        return [];
     if (vnode.component) {
         const result = walkInstance(vnode.component, depth + 1);
         return result ? (Array.isArray(result) ? result : [result]) : [];
@@ -157,6 +225,69 @@ function extractChildrenFromVNode(vnode, depth) {
     }
     return result;
 }
+/**
+ * Reverse-map Dimina's `<wrapper name="/components/foo/foo">` (used to host
+ * every user-defined component) back to the source-level tag the user wrote
+ * in WXML (e.g. `<foo>`).
+ *
+ * The wrapper carries the registered component path in its `name` Vue prop.
+ * By convention (also followed by miniprogram tooling), the registered key is
+ * the last path segment, optionally stripping a trailing `/index`. We can't
+ * see the page's `usingComponents` map from inside the Vue instance, so this
+ * convention-based recovery is best-effort: if the user picked a different
+ * registration key than the directory name (e.g. `usingComponents:
+ * { myCounter: '/components/counter/counter' }`), the panel will show
+ * `counter`, not `myCounter`.
+ *
+ * The path heuristic also resolves a name-collision risk: a user-written
+ * `<counter name="x">` would land in the same `attrs.name` slot as the
+ * wrapper-internal path. We only unwrap when the value looks like an absolute
+ * component path (leading `/`), which dimina always emits but a user would
+ * almost never type as a literal attr.
+ */
+function unwrapCustomComponent(node) {
+    if (node.tagName !== 'wrapper')
+        return node;
+    const path = node.attrs?.name;
+    if (typeof path !== 'string' || !path.startsWith('/'))
+        return node;
+    // 去掉前导 `/` 后保留原路径形式（保留所有斜杠，不做 kebab/dash 转换）。
+    // 仅当路径以 `/index` 结尾且剥离后仍至少剩一段时才剥（`/index` 单独存在则
+    // 退回 wrapper，避免出现空 tagName）。
+    const stripped = path.replace(/^\//, '');
+    const withoutIndex = stripped.endsWith('/index') ? stripped.slice(0, -'/index'.length) : stripped;
+    const recovered = withoutIndex || stripped;
+    if (!recovered || recovered === 'index')
+        return node;
+    const nextAttrs = {};
+    for (const [k, v] of Object.entries(node.attrs)) {
+        if (k === 'name')
+            continue;
+        nextAttrs[k] = v;
+    }
+    return { ...node, tagName: recovered, attrs: nextAttrs };
+}
+/**
+ * 把"用户授权"层级（页面 / 自定义组件，tagName 以路径形式呈现，含 `/`）
+ * 的 children 包一层合成 `#shadow-root`，对齐微信开发者工具：组件本身
+ * 与内部实现之间用 shadow-root 边界视觉分隔。
+ *
+ * 内置组件（view/text/button 等）和合成节点（#text/#fragment）tagName 都
+ * 不含 `/`，自然不会被包裹。children 为空也不插入（避免空壳）。重复调用
+ * 是幂等的：若 children[0] 已经是 #shadow-root 就跳过。
+ */
+function wrapInShadowRoot(node) {
+    if (!node.tagName.includes('/'))
+        return node;
+    if (node.children.length === 0)
+        return node;
+    if (node.children[0]?.tagName === '#shadow-root')
+        return node;
+    return {
+        ...node,
+        children: [{ tagName: '#shadow-root', attrs: {}, children: node.children }],
+    };
+}
 export function walkInstance(instance, depth) {
     if (depth > 50)
         return null;
@@ -168,6 +299,6 @@ export function walkInstance(instance, depth) {
     const sid = getElementSid(instance);
     if (sid)
         node.sid = sid;
-    return node;
+    return wrapInShadowRoot(unwrapCustomComponent(node));
 }
 //# sourceMappingURL=wxml-extract.js.map

package/dist/preload/runtime/bridge.d.ts

@@ -1,3 +1,4 @@
+import type { ElementInspection } from '../../shared/ipc-channels.js';
 export interface WxmlNode {
     tagName: string;
     attrs: Record<string, string>;
@@ -20,7 +21,8 @@ interface SimulatorBridgeState {
     wxml: Snapshot<WxmlNode | WxmlNode[] | null>;
     refreshHandler: ((type: RefreshTarget) => void) | null;
 }
-declare function highlightElement(sid: string): void;
+export declare function registerSyntheticSid(el: HTMLElement): string;
+declare function highlightElement(sid: string): ElementInspection | null;
 declare function unhighlightElement(): void;
 export { highlightElement, unhighlightElement };
 export declare const simulatorBridge: SimulatorBridgeState;

package/dist/preload/runtime/bridge.js

@@ -7,6 +7,38 @@ const state = {
 };
 let highlightOverlay = null;
 let exposedApi = null;
+// 合成 sid 注册表：用 WeakMap 把元素 ↔ sid 双向绑定，避免在源 DOM 上写
+// `data-*` 属性（提取本应只读，且属性形式会污染用户的快照/选择器）。
+// elBySyntheticSid 为反向查找用 WeakRef，元素被 GC 后下次 lookup 自动清理。
+const SYNTHETIC_SID_PREFIX = 'devtools-';
+const syntheticSidByEl = new WeakMap();
+const elBySyntheticSid = new Map();
+let nextSyntheticSid = 1;
+export function registerSyntheticSid(el) {
+    const existing = syntheticSidByEl.get(el);
+    if (existing)
+        return existing;
+    const synthetic = `${SYNTHETIC_SID_PREFIX}${nextSyntheticSid++}`;
+    syntheticSidByEl.set(el, synthetic);
+    elBySyntheticSid.set(synthetic, new WeakRef(el));
+    return synthetic;
+}
+function findElementBySid(doc, sid) {
+    if (sid.startsWith(SYNTHETIC_SID_PREFIX)) {
+        const ref = elBySyntheticSid.get(sid);
+        if (!ref)
+            return null;
+        const el = ref.deref();
+        if (!el || !el.isConnected) {
+            elBySyntheticSid.delete(sid);
+            return null;
+        }
+        if (el.ownerDocument !== doc)
+            return null;
+        return el;
+    }
+    return doc.querySelector(`[data-sid="${CSS.escape(sid)}"]`);
+}
 function clone(value) {
     try {
         return JSON.parse(JSON.stringify(value));
@@ -27,18 +59,20 @@ function ensureOverlay(doc) {
     highlightOverlay.style.cssText =
         'position:fixed;pointer-events:none;z-index:999999;' +
             'border:2px solid #1a73e8;background:rgba(26,115,232,0.12);' +
-            'transition:all 0.1s ease;display:none;border-radius:2px;';
+            'transition:all 0.1s ease;display:none;border-radius:2px;box-sizing:border-box;';
     doc.body.appendChild(highlightOverlay);
     return highlightOverlay;
 }
 function highlightElement(sid) {
+    if (!sid)
+        return null;
     const iframe = getPageIframe();
     if (!iframe?.contentDocument)
-        return;
+        return null;
     const doc = iframe.contentDocument;
-    const el = doc.querySelector(`[data-sid="${sid}"]`);
+    const el = findElementBySid(doc, sid);
     if (!el)
-        return;
+        return null;
     const rect = el.getBoundingClientRect();
     const overlay = ensureOverlay(doc);
     overlay.style.left = `${rect.left}px`;
@@ -46,6 +80,23 @@ function highlightElement(sid) {
     overlay.style.width = `${rect.width}px`;
     overlay.style.height = `${rect.height}px`;
     overlay.style.display = 'block';
+    const style = el.ownerDocument.defaultView?.getComputedStyle(el);
+    if (!style)
+        return null;
+    return {
+        sid,
+        rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+        style: {
+            display: style.display,
+            position: style.position,
+            boxSizing: style.boxSizing,
+            margin: style.margin,
+            padding: style.padding,
+            color: style.color,
+            backgroundColor: style.backgroundColor,
+            fontSize: style.fontSize,
+        },
+    };
 }
 function unhighlightElement() {
     if (highlightOverlay)

package/dist/preload/runtime/custom-apis.d.ts

@@ -0,0 +1,6 @@
+export interface DiminaCustomApisBridge {
+    list(): Promise<string[]>;
+    invoke(name: string, params: unknown): Promise<unknown>;
+}
+export declare function installCustomApisBridge(): void;
+//# sourceMappingURL=custom-apis.d.ts.map

package/dist/preload/runtime/custom-apis.js

@@ -0,0 +1,18 @@
+import { contextBridge, ipcRenderer } from 'electron';
+import { SimulatorCustomApiChannel } from '../../shared/ipc-channels.js';
+function buildBridge() {
+    return {
+        list: () => ipcRenderer.invoke(SimulatorCustomApiChannel.List),
+        invoke: (name, params) => ipcRenderer.invoke(SimulatorCustomApiChannel.Invoke, name, params),
+    };
+}
+export function installCustomApisBridge() {
+    const bridge = buildBridge();
+    try {
+        contextBridge.exposeInMainWorld('__diminaCustomApis', bridge);
+    }
+    catch {
+        window.__diminaCustomApis = bridge;
+    }
+}
+//# sourceMappingURL=custom-apis.js.map

package/dist/preload/runtime/host.d.ts

@@ -1,3 +1,4 @@
 export declare function sendToHost(channel: string, data: unknown): void;
+export declare function onHostMessage(channel: string, handler: (...args: unknown[]) => void): () => void;
 export declare function safeSerialize(val: unknown): unknown;
 //# sourceMappingURL=host.d.ts.map

package/dist/preload/runtime/host.js

@@ -2,6 +2,19 @@ import { ipcRenderer } from 'electron';
 export function sendToHost(channel, data) {
     ipcRenderer.sendToHost(channel, data);
 }
+export function onHostMessage(channel, handler) {
+    let active = true;
+    const wrapped = (_event, ...args) => {
+        if (!active)
+            return;
+        handler(...args);
+    };
+    ipcRenderer.on(channel, wrapped);
+    return () => {
+        active = false;
+        ipcRenderer.removeListener(channel, wrapped);
+    };
+}
 export function safeSerialize(val) {
     if (val === null || val === undefined)
         return val;

package/dist/preload/shared/types.d.ts

@@ -5,6 +5,7 @@
  * window by our preload/instrumentation code.
  */
 import type { Snapshot, StorageSnapshot, WxmlNode } from '../runtime/bridge.js';
+import type { ElementInspection } from '../../shared/ipc-channels.js';
 /** The simulator data bridge exposed via contextBridge. */
 export interface SimulatorDataBridge {
     getAppdata: () => Record<string, unknown>;
@@ -16,7 +17,7 @@ export interface SimulatorDataBridge {
     getWxmlSnapshot: () => Snapshot<WxmlNode | WxmlNode[] | null>;
     getWxmlGen: () => number;
     refresh: (type: 'wxml' | 'appdata' | 'storage') => void;
-    highlightElement: (sid: string) => void;
+    highlightElement: (sid: string) => ElementInspection | null;
     unhighlightElement: () => void;
 }
 /** Hook interface for app data interception. */

package/dist/preload/windows/main.cjs

@@ -0,0 +1,47 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/preload/windows/main.ts
+var main_exports = {};
+module.exports = __toCommonJS(main_exports);
+var import_electron = require("electron");
+var api = {
+  ipc: {
+    invoke: (channel, ...args) => import_electron.ipcRenderer.invoke(channel, ...args),
+    send: (channel, ...args) => {
+      import_electron.ipcRenderer.send(channel, ...args);
+    },
+    on: (channel, listener) => {
+      import_electron.ipcRenderer.on(channel, listener);
+      return () => import_electron.ipcRenderer.removeListener(channel, listener);
+    },
+    once: (channel, listener) => {
+      import_electron.ipcRenderer.once(channel, listener);
+    },
+    removeListener: (channel, listener) => {
+      import_electron.ipcRenderer.removeListener(channel, listener);
+    }
+  }
+};
+import_electron.contextBridge.exposeInMainWorld("devtools", api);
+if (process.env.NODE_ENV === "test") {
+  import_electron.contextBridge.exposeInMainWorld("__testIpc", {
+    emit: (channel, ...args) => {
+      ;
+      import_electron.ipcRenderer.emit(channel, ...args);
+    }
+  });
+}
+//# sourceMappingURL=main.cjs.map

package/dist/preload/windows/main.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/preload/windows/main.ts"],
+  "sourcesContent": ["/**\n * Preload bridge for the main window, settings window, settings overlay\n * view, and popover overlay view. Exposes a minimal, typed `window.devtools`\n * surface so the renderer never has to call `window.require('electron')`.\n *\n * This file is bundled by esbuild to CJS at `dist/preload/windows/main.js`\n * (see package.json `build:preload`). It must remain a leaf module \u2014 do\n * NOT import other preload files via `.js` ESM specifiers; everything goes\n * through the Electron `contextBridge` / `ipcRenderer` runtime.\n *\n * Channel governance lives in the main process: `sender-policy.ts` plus the\n * per-handler zod schemas decide what's accepted. The preload layer is a\n * thin pass-through \u2014 a renderer inventing channel names will just hit a\n * main-side rejection, so duplicating an allowlist here added no real\n * defense for a devtool that loads user-trusted mini-programs.\n */\nimport { contextBridge, ipcRenderer, type IpcRendererEvent } from 'electron'\n\nconst api = {\n  ipc: {\n    invoke: (channel: string, ...args: unknown[]) => ipcRenderer.invoke(channel, ...args),\n    send: (channel: string, ...args: unknown[]) => {\n      ipcRenderer.send(channel, ...args)\n    },\n    on: (\n      channel: string,\n      listener: (event: IpcRendererEvent, ...args: unknown[]) => void,\n    ) => {\n      ipcRenderer.on(channel, listener)\n      return () => ipcRenderer.removeListener(channel, listener)\n    },\n    once: (\n      channel: string,\n      listener: (event: IpcRendererEvent, ...args: unknown[]) => void,\n    ) => {\n      ipcRenderer.once(channel, listener)\n    },\n    removeListener: (\n      channel: string,\n      listener: (...args: unknown[]) => void,\n    ) => {\n      ipcRenderer.removeListener(channel, listener)\n    },\n  },\n}\n\n// All host windows that load this preload run with `contextIsolation: true`\n// (main / settings / view-manager), so `contextBridge` is the path that\n// reaches the renderer's `window`. The simulator <webview> uses a separate\n// preload (`simulator.ts`).\ncontextBridge.exposeInMainWorld('devtools', api)\n\n// Test-only hatch: e2e helpers emit synthetic IPC events on the renderer's\n// ipcRenderer instance to trigger handlers registered via `devtools.ipc.on`\n// without round-tripping through the main process. Gated on NODE_ENV so\n// production builds never expose it.\nif (process.env.NODE_ENV === 'test') {\n  contextBridge.exposeInMainWorld('__testIpc', {\n    emit: (channel: string, ...args: unknown[]) => {\n      ;(ipcRenderer as unknown as { emit: (c: string, ...a: unknown[]) => void }).emit(channel, ...args)\n    },\n  })\n}\n\nexport type DevtoolsApi = typeof api\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAgBA,sBAAkE;AAElE,IAAM,MAAM;AAAA,EACV,KAAK;AAAA,IACH,QAAQ,CAAC,YAAoB,SAAoB,4BAAY,OAAO,SAAS,GAAG,IAAI;AAAA,IACpF,MAAM,CAAC,YAAoB,SAAoB;AAC7C,kCAAY,KAAK,SAAS,GAAG,IAAI;AAAA,IACnC;AAAA,IACA,IAAI,CACF,SACA,aACG;AACH,kCAAY,GAAG,SAAS,QAAQ;AAChC,aAAO,MAAM,4BAAY,eAAe,SAAS,QAAQ;AAAA,IAC3D;AAAA,IACA,MAAM,CACJ,SACA,aACG;AACH,kCAAY,KAAK,SAAS,QAAQ;AAAA,IACpC;AAAA,IACA,gBAAgB,CACd,SACA,aACG;AACH,kCAAY,eAAe,SAAS,QAAQ;AAAA,IAC9C;AAAA,EACF;AACF;AAMA,8BAAc,kBAAkB,YAAY,GAAG;AAM/C,IAAI,QAAQ,IAAI,aAAa,QAAQ;AACnC,gCAAc,kBAAkB,aAAa;AAAA,IAC3C,MAAM,CAAC,YAAoB,SAAoB;AAC7C;AAAC,MAAC,4BAA0E,KAAK,SAAS,GAAG,IAAI;AAAA,IACnG;AAAA,EACF,CAAC;AACH;",
+  "names": []
+}