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

package/dist/main/index.bundle.js

@@ -63,15 +63,31 @@ function setupCdpPort() {
 
 // src/main/app/app.ts
 import { app as app11, BrowserWindow as BrowserWindow3, nativeImage } from "electron";
-import fs4 from "fs";
+import fs5 from "fs";
 import path6 from "path";
 
 // src/main/utils/paths.ts
+import fs2 from "fs";
 import path2 from "path";
 import { fileURLToPath } from "url";
-var __dirname = path2.dirname(fileURLToPath(import.meta.url));
-var rendererDir = path2.join(__dirname, "../../../dist/renderer");
-var defaultPreloadPath = path2.join(__dirname, "../../preload/windows/simulator.js");
+function resolveDevtoolsPackageRoot() {
+  let dir = path2.dirname(fileURLToPath(import.meta.url));
+  const root = path2.parse(dir).root;
+  while (dir !== root) {
+    const pkgPath = path2.join(dir, "package.json");
+    try {
+      const pkg2 = JSON.parse(fs2.readFileSync(pkgPath, "utf8"));
+      if (pkg2.name === "@dimina-kit/devtools") return dir;
+    } catch {
+    }
+    dir = path2.dirname(dir);
+  }
+  throw new Error("@dimina-kit/devtools package root not found from " + fileURLToPath(import.meta.url));
+}
+var devtoolsPackageRoot = resolveDevtoolsPackageRoot();
+var rendererDir = path2.join(devtoolsPackageRoot, "dist/renderer");
+var defaultPreloadPath = path2.join(devtoolsPackageRoot, "dist/preload/windows/simulator.js");
+var simulatorDir = path2.join(devtoolsPackageRoot, "dist/simulator");
 
 // src/main/app/lifecycle.ts
 import { app as app3, globalShortcut } from "electron";
@@ -197,10 +213,7 @@ function wireMainWindowEvents(win, state = {}) {
 
 // src/main/services/default-adapter.ts
 import path3 from "path";
-import { fileURLToPath as fileURLToPath2 } from "url";
 import { app as app5 } from "electron";
-var __dirname2 = path3.dirname(fileURLToPath2(import.meta.url));
-var simulatorDir = path3.resolve(__dirname2, "../../simulator");
 var defaultAdapter = {
   async openProject(opts) {
     const diminaKit = await import("@dimina-kit/devkit");
@@ -228,6 +241,10 @@ var SimulatorStorageChannel = {
   GetSnapshot: "simulator:storage:snapshot",
   Event: "simulator:storage:event"
 };
+var SimulatorElementChannel = {
+  Inspect: "simulator:element:inspect",
+  Clear: "simulator:element:clear"
+};
 var WorkbenchChannel = {
   GetPanelConfig: "workbench:getPanelConfig",
   GetApiNamespaces: "workbench:getApiNamespaces",
@@ -621,7 +638,7 @@ function createViewManager(ctx) {
 // src/main/services/projects/project-repository.ts
 import { app as app6 } from "electron";
 import path5 from "path";
-import fs2 from "fs";
+import fs3 from "fs";
 
 // src/shared/constants.ts
 var DEFAULT_SCENE = 1001;
@@ -671,13 +688,13 @@ function getProjectsFile() {
 }
 function load() {
   try {
-    return JSON.parse(fs2.readFileSync(getProjectsFile(), "utf-8"));
+    return JSON.parse(fs3.readFileSync(getProjectsFile(), "utf-8"));
   } catch {
     return [];
   }
 }
 function save(projects) {
-  fs2.writeFileSync(getProjectsFile(), JSON.stringify(projects, null, 2));
+  fs3.writeFileSync(getProjectsFile(), JSON.stringify(projects, null, 2));
 }
 function listProjects() {
   return load();
@@ -686,14 +703,14 @@ function validateProjectDir(dirPath) {
   if (!dirPath) {
     return "\u5C0F\u7A0B\u5E8F\u76EE\u5F55\u8DEF\u5F84\u4E3A\u7A7A\uFF0C\u8BF7\u9009\u62E9\u5305\u542B\u5C0F\u7A0B\u5E8F\u6E90\u7801\u7684\u76EE\u5F55";
   }
-  if (!fs2.existsSync(dirPath)) {
+  if (!fs3.existsSync(dirPath)) {
     return `\u5C0F\u7A0B\u5E8F\u76EE\u5F55\u4E0D\u5B58\u5728\uFF1A${dirPath}`;
   }
-  if (!fs2.existsSync(path5.join(dirPath, "app.json"))) {
+  if (!fs3.existsSync(path5.join(dirPath, "app.json"))) {
     const configPath = path5.join(dirPath, "project.config.json");
-    if (fs2.existsSync(configPath)) {
+    if (fs3.existsSync(configPath)) {
       try {
-        const cfg = JSON.parse(fs2.readFileSync(configPath, "utf-8"));
+        const cfg = JSON.parse(fs3.readFileSync(configPath, "utf-8"));
         if (cfg.miniprogramRoot) {
           const resolvedRoot = path5.resolve(dirPath, cfg.miniprogramRoot);
           return `\u8BE5\u76EE\u5F55\u7F3A\u5C11 app.json\uFF0Cproject.config.json \u4E2D\u6307\u5B9A\u4E86 miniprogramRoot: "${cfg.miniprogramRoot}"\uFF0C\u8BF7\u5BFC\u5165 ${resolvedRoot}`;
@@ -711,8 +728,8 @@ function addProject(dirPath) {
   let name = path5.basename(dirPath);
   try {
     const configPath = path5.join(dirPath, "project.config.json");
-    if (fs2.existsSync(configPath)) {
-      const cfg = JSON.parse(fs2.readFileSync(configPath, "utf-8"));
+    if (fs3.existsSync(configPath)) {
+      const cfg = JSON.parse(fs3.readFileSync(configPath, "utf-8"));
       if (cfg.projectname) name = cfg.projectname;
     }
   } catch (err) {
@@ -752,7 +769,7 @@ function getProjectPages(dirPath) {
   const appJsonPath = path5.join(dirPath, "app.json");
   try {
     const appJson = JSON.parse(
-      fs2.readFileSync(appJsonPath, "utf-8")
+      fs3.readFileSync(appJsonPath, "utf-8")
     );
     return {
       pages: appJson.pages || [],
@@ -776,7 +793,7 @@ function getProjectSettings(projectPath) {
   }
   try {
     const configPath = path5.join(projectPath, "project.config.json");
-    const config = JSON.parse(fs2.readFileSync(configPath, "utf-8"));
+    const config = JSON.parse(fs3.readFileSync(configPath, "utf-8"));
     return {
       uploadWithSourceMap: !!config.setting?.uploadWithSourceMap
     };
@@ -789,14 +806,14 @@ function updateProjectSettings(projectPath, patch) {
   const configPath = path5.join(projectPath, "project.config.json");
   let config = {};
   try {
-    config = JSON.parse(fs2.readFileSync(configPath, "utf-8"));
+    config = JSON.parse(fs3.readFileSync(configPath, "utf-8"));
   } catch {
   }
   const nextSetting = {
     ...config.setting ?? {},
     ...patch.uploadWithSourceMap === void 0 ? {} : { uploadWithSourceMap: patch.uploadWithSourceMap }
   };
-  fs2.writeFileSync(
+  fs3.writeFileSync(
     configPath,
     JSON.stringify({ ...config, setting: nextSetting }, null, 2)
   );
@@ -992,10 +1009,10 @@ function installAppMenu(ctx) {
 
 // src/main/ipc/app.ts
 import { ipcMain } from "electron";
-import fs3 from "fs";
+import fs4 from "fs";
 function registerAppIpc(ctx) {
   ipcMain.handle(AppChannel.GetPreloadPath, () => {
-    return `file://${fs3.realpathSync(ctx.preloadPath)}`;
+    return `file://${fs4.realpathSync(ctx.preloadPath)}`;
   });
   ipcMain.handle(AppChannel.GetBranding, async () => {
     if (ctx.brandingProvider) return ctx.brandingProvider();
@@ -2373,6 +2390,36 @@ async function getSnapshot() {
     return [];
   }
 }
+function findSimulatorWebContents() {
+  for (const wc of wcStatic.getAllWebContents()) {
+    if (isSimulatorWebview(wc)) return wc;
+  }
+  return null;
+}
+async function inspectElement(sid) {
+  if (!sid) return null;
+  const sim = findSimulatorWebContents();
+  if (!sim) return null;
+  try {
+    const result = await sim.executeJavaScript(
+      `window.__simulatorData && window.__simulatorData.highlightElement ? window.__simulatorData.highlightElement(${JSON.stringify(sid)}) : null`
+    );
+    return result ?? null;
+  } catch (e) {
+    console.warn("[simulator-element] inspect failed:", e.message);
+    return null;
+  }
+}
+async function clearElementInspection() {
+  const sim = findSimulatorWebContents();
+  if (!sim) return;
+  try {
+    await sim.executeJavaScript(
+      "window.__simulatorData && window.__simulatorData.unhighlightElement && window.__simulatorData.unhighlightElement()"
+    );
+  } catch {
+  }
+}
 function setupSimulatorStorage(host) {
   hostWc = host;
   for (const wc of wcStatic.getAllWebContents()) {
@@ -2391,6 +2438,8 @@ function setupSimulatorStorage(host) {
     });
   });
   ipcMain10.handle(SimulatorStorageChannel.GetSnapshot, getSnapshot);
+  ipcMain10.handle(SimulatorElementChannel.Inspect, (_event, sid) => inspectElement(sid));
+  ipcMain10.handle(SimulatorElementChannel.Clear, clearElementInspection);
 }
 
 // src/main/services/update/update-manager.ts
@@ -2606,7 +2655,7 @@ function wireAppWindowEvents(config, instance) {
 function enableDevRendererAutoReload(rendererDir2) {
   if (!app11.isPackaged) {
     let reloadTimer = null;
-    fs4.watch(rendererDir2, { recursive: true }, () => {
+    fs5.watch(rendererDir2, { recursive: true }, () => {
       if (reloadTimer) clearTimeout(reloadTimer);
       reloadTimer = setTimeout(() => {
         for (const win of BrowserWindow3.getAllWindows()) {

package/dist/main/services/default-adapter.js

@@ -1,8 +1,6 @@
 import path from 'path';
-import { fileURLToPath } from 'url';
 import { app } from 'electron';
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const simulatorDir = path.resolve(__dirname, '../../simulator');
+import { simulatorDir } from '../utils/paths.js';
 export const defaultAdapter = {
     async openProject(opts) {
         const diminaKit = await import('@dimina-kit/devkit');

package/dist/main/services/simulator/dir.d.ts

@@ -1,2 +1,2 @@
-export declare const simulatorDir: string;
+export { simulatorDir } from '../../utils/paths.js';
 //# sourceMappingURL=dir.d.ts.map

package/dist/main/services/simulator/dir.js

@@ -1,5 +1,2 @@
-import path from 'path';
-import { fileURLToPath } from 'url';
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-export const simulatorDir = path.join(__dirname, '../../../simulator');
+export { simulatorDir } from '../../utils/paths.js';
 //# sourceMappingURL=dir.js.map

package/dist/main/services/simulator-storage/index.js

@@ -16,7 +16,7 @@
  *     events stop flowing until they close it.
  */
 import { app, ipcMain, webContents as wcStatic } from 'electron';
-import { SimulatorStorageChannel, } from '../../../shared/ipc-channels.js';
+import { SimulatorElementChannel, SimulatorStorageChannel, } from '../../../shared/ipc-channels.js';
 let attachedWc = null;
 let hostWc = null;
 function isSimulatorWebview(wc) {
@@ -108,6 +108,43 @@ async function getSnapshot() {
         return [];
     }
 }
+// Element inspection delegates to the simulator preload's __simulatorData
+// bridge via executeJavaScript. Looked up independently from `attachedWc` so
+// it keeps working when the user opens Chrome DevTools and the storage
+// debugger detaches (debugger.attach is mutually exclusive with F12).
+function findSimulatorWebContents() {
+    for (const wc of wcStatic.getAllWebContents()) {
+        if (isSimulatorWebview(wc))
+            return wc;
+    }
+    return null;
+}
+async function inspectElement(sid) {
+    if (!sid)
+        return null;
+    const sim = findSimulatorWebContents();
+    if (!sim)
+        return null;
+    try {
+        const result = (await sim.executeJavaScript(`window.__simulatorData && window.__simulatorData.highlightElement ? window.__simulatorData.highlightElement(${JSON.stringify(sid)}) : null`));
+        return result ?? null;
+    }
+    catch (e) {
+        console.warn('[simulator-element] inspect failed:', e.message);
+        return null;
+    }
+}
+async function clearElementInspection() {
+    const sim = findSimulatorWebContents();
+    if (!sim)
+        return;
+    try {
+        await sim.executeJavaScript('window.__simulatorData && window.__simulatorData.unhighlightElement && window.__simulatorData.unhighlightElement()');
+    }
+    catch {
+        // best-effort
+    }
+}
 export function setupSimulatorStorage(host) {
     hostWc = host;
     // Attach to any simulator webview that already exists (project may have
@@ -132,5 +169,7 @@ export function setupSimulatorStorage(host) {
         });
     });
     ipcMain.handle(SimulatorStorageChannel.GetSnapshot, getSnapshot);
+    ipcMain.handle(SimulatorElementChannel.Inspect, (_event, sid) => inspectElement(sid));
+    ipcMain.handle(SimulatorElementChannel.Clear, clearElementInspection);
 }
 //# sourceMappingURL=index.js.map

package/dist/main/utils/paths.d.ts

@@ -1,5 +1,7 @@
+export declare const devtoolsPackageRoot: string;
 export declare const rendererDir: string;
 export declare const defaultPreloadPath: string;
+export declare const simulatorDir: string;
 export declare function getRendererDir(): string;
 export declare function getPreloadDir(): string;
 export declare function getRendererHtml(filename: string): string;

package/dist/main/utils/paths.js

@@ -1,13 +1,36 @@
+import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-export const rendererDir = path.join(__dirname, '../../../dist/renderer');
-export const defaultPreloadPath = path.join(__dirname, '../../preload/windows/simulator.js');
+// Hardcoded relative jumps like '../../dist/renderer' break under the
+// esbuild single-file bundle (dist/main/index.bundle.js): every inlined
+// module ends up at the bundle's depth instead of its tsc location, so
+// the math goes off by a directory. Walk up to this package's own
+// package.json so the resolver works for tsc multi-file, the bundle,
+// npm/pnpm node_modules, and asar packaging alike.
+function resolveDevtoolsPackageRoot() {
+    let dir = path.dirname(fileURLToPath(import.meta.url));
+    const root = path.parse(dir).root;
+    while (dir !== root) {
+        const pkgPath = path.join(dir, 'package.json');
+        try {
+            const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+            if (pkg.name === '@dimina-kit/devtools')
+                return dir;
+        }
+        catch { }
+        dir = path.dirname(dir);
+    }
+    throw new Error('@dimina-kit/devtools package root not found from ' + fileURLToPath(import.meta.url));
+}
+export const devtoolsPackageRoot = resolveDevtoolsPackageRoot();
+export const rendererDir = path.join(devtoolsPackageRoot, 'dist/renderer');
+export const defaultPreloadPath = path.join(devtoolsPackageRoot, 'dist/preload/windows/simulator.js');
+export const simulatorDir = path.join(devtoolsPackageRoot, 'dist/simulator');
 export function getRendererDir() {
     return rendererDir;
 }
 export function getPreloadDir() {
-    return path.join(__dirname, '../../preload');
+    return path.join(devtoolsPackageRoot, 'dist/preload');
 }
 export function getRendererHtml(filename) {
     return path.join(rendererDir, filename);

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/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. */