vite-plugin-vue-testid 1.0.7 → 1.0.9

package/dist/index.d.ts

@@ -1,64 +1,57 @@
-import type { RootNode, TemplateChildNode } from '@vue/compiler-core';
-export interface VueTestIdTransformOptions {
-    /**
-     * 需要注入 testId 的组件标签列表（kebab-case）
-     * @default ant-design-vue 常用表单组件
-     */
-    components?: string[];
-    /**
-     * 自定义 testId 生成函数
-     * @param tagName  组件标签名
-     * @param count    全局递增序号
-     * @returns testId 字符串
-     */
-    generateId?: (tagName: string, count: number) => string;
+/**
+ * vite-plugin-vue-testid
+ *
+ * 为 ant-design-vue 组件的 DOM 元素自动注入 data-testid 属性，
+ * 全运行时实现，无需编译期模版转换。
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts — 无需特殊配置
+ * import vue from '@vitejs/plugin-vue'
+ * export default defineConfig({ plugins: [vue()] })
+ *
+ * // main.ts — 启动运行时注入
+ * import { setupAntTestIds } from 'vite-plugin-vue-testid/runtime'
+ * createApp(App).mount('#app')
+ * setupAntTestIds()
+ * ```
+ */
+import type { Plugin } from 'vite';
+export type { RuntimeOptions, PanelContext, PanelInjectStrategy } from './runtime';
+export interface VueTestIdPluginOptions {
     /**
      * testId 属性名
      * @default 'data-testid'
      */
     attributeName?: string;
-    /**
-     * 需要同时注入 id + testId 的组件（如弹窗、日期选择器等 teleport 组件）
-     * @default ['a-date-picker', 'a-range-picker', 'a-time-picker', 'a-modal']
-     */
-    idComponents?: string[];
-    /**
-     * teleport 组件的 id 属性名
-     * @default 'id'
-     */
-    idAttributeName?: string;
 }
 /**
- * 创建 Vue 编译器 nodeTransform 函数。
- * 直接传给 `@vitejs/plugin-vue` 的 `template.compilerOptions.nodeTransforms`。
+ * Vite 插件（可选）。
+ * 当前仅作为占位，实际 testid 注入完全由运行时 `setupAntTestIds()` 完成。
  *
- * @example
- * ```ts
- * // vite.config.ts
- * import vue from '@vitejs/plugin-vue'
- * import { createVueTestIdTransform } from 'vite-plugin-vue-testid'
+ * 如果需要在构建时做额外配置，可通过此插件传入选项。
+ */
+export declare function vueTestIdPlugin(_opts?: VueTestIdPluginOptions): Plugin;
+/**
+ * @deprecated 此函数已废弃。testid 注入现在完全在运行时进行，
+ * 不再需要编译期 AST transform。请从 vite.config.ts 中移除 `nodeTransforms` 配置，
+ * 改为在 main.ts 中调用 `setupAntTestIds()`。
  *
- * export default defineConfig({
- *   plugins: [
- *     vue({
- *       template: {
- *         compilerOptions: {
- *           nodeTransforms: [createVueTestIdTransform()]
- *         }
- *       }
- *     })
- *   ]
- * })
- * ```
+ * @example 迁移方式
+ * ```diff
+ * // vite.config.ts
+ * - import { createVueTestIdTransform } from 'vite-plugin-vue-testid'
+ * - vue({ template: { compilerOptions: { nodeTransforms: [
+ * -   createVueTestIdTransform()
+ * - ]}}})
+
+ * + import vue from '@vitejs/plugin-vue'
+ * + vue()
  *
- * @example 自定义配置
- * ```ts
- * createVueTestIdTransform({
- *   components: ['a-input', 'a-select', 'el-input'],
- *   generateId: (tag, n) => `myapp-${tag}-${n}`,
- *   attributeName: 'data-cy',
- * })
+ * // main.ts
+ * + import { setupAntTestIds } from 'vite-plugin-vue-testid/runtime'
+ * + setupAntTestIds()
  * ```
  */
-export declare function createVueTestIdTransform(rawOpts?: VueTestIdTransformOptions): (node: RootNode | TemplateChildNode) => void;
+export declare function createVueTestIdTransform(): () => void;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAIV,QAAQ,EAER,iBAAiB,EAClB,MAAM,oBAAoB,CAAA;AAI3B,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAEvD;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IAEvB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAyMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,CAAC,EAAE,yBAAyB,GAClC,CAAC,IAAI,EAAE,QAAQ,GAAG,iBAAiB,KAAK,IAAI,CAG9C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIlC,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAA;AAIlF,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,sBAAsB,GAAG,MAAM,CAItE;AAID;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,IAAI,CASrD"}

package/dist/index.js

@@ -1,161 +1,19 @@
 // src/index.ts
-import { ConstantTypes, NodeTypes } from "@vue/compiler-core";
-var DEFAULT_COMPONENTS = [
-  "a-input",
-  "a-textarea",
-  "a-input-number",
-  "a-select",
-  "a-cascader",
-  "a-tree-select",
-  "a-radio-group",
-  "a-checkbox-group",
-  "a-date-picker",
-  "a-range-picker",
-  "a-time-picker",
-  "a-switch",
-  "a-slider",
-  "a-rate",
-  "a-upload",
-  "a-form-item",
-  "a-button",
-  "a-modal",
-  "a-menu",
-  "a-menu-item",
-  "a-sub-menu",
-  "a-menu-item-group"
-];
-var DEFAULT_ID_COMPONENTS = [
-  "a-date-picker",
-  "a-range-picker",
-  "a-time-picker",
-  "a-modal",
-  "a-upload",
-  "a-menu-item",
-  "a-sub-menu",
-  "a-menu-item-group"
-];
-function resolveOptions(raw) {
+function vueTestIdPlugin(_opts) {
   return {
-    components: raw?.components ?? DEFAULT_COMPONENTS,
-    generateId: raw?.generateId ?? ((tag, n) => `${tag}-${n}`),
-    attributeName: raw?.attributeName ?? "data-testid",
-    idComponents: raw?.idComponents ?? DEFAULT_ID_COMPONENTS,
-    idAttributeName: raw?.idAttributeName ?? "id"
+    name: "vite-plugin-vue-testid"
   };
 }
-function ensureSlotIndex(exp) {
-  if (!exp) return;
-  if (exp.type === NodeTypes.SIMPLE_EXPRESSION) {
-    if (!/\bindex\b/.test(exp.content)) {
-      exp.content = exp.content.replace(/\s*\}$/, ", index}");
-    }
-  } else if (exp.type === NodeTypes.COMPOUND_EXPRESSION) {
-    const hasIndex = exp.children.some((c) => {
-      if (typeof c === "string") return /\bindex\b/.test(c);
-      if (typeof c === "symbol") return false;
-      if (c.type === NodeTypes.TEXT || c.type === NodeTypes.SIMPLE_EXPRESSION) {
-        return /\bindex\b/.test(c.content);
-      }
-      return false;
-    });
-    if (hasIndex) return;
-    for (let i = exp.children.length - 1; i >= 0; i--) {
-      const c = exp.children[i];
-      if (typeof c === "string") {
-        exp.children[i] = c.replace(/}$/, ", index}");
-        break;
-      }
-      if (typeof c !== "symbol" && c.type === NodeTypes.TEXT) {
-        c.content = c.content.replace(/}$/, ", index}");
-        break;
-      }
-    }
+function createVueTestIdTransform() {
+  if (typeof console !== "undefined") {
+    console.warn(
+      "[vite-plugin-vue-testid] createVueTestIdTransform() is deprecated. Remove nodeTransforms from vite.config.ts and call setupAntTestIds() in main.ts instead. See https://github.com/... for migration guide."
+    );
   }
-}
-function hasExistingTestId(node, attrName) {
-  return node.props.some(
-    (p) => p.type === NodeTypes.ATTRIBUTE && p.name === attrName || p.type === NodeTypes.DIRECTIVE && p.name === "bind" && p.arg && p.arg.type === NodeTypes.SIMPLE_EXPRESSION && p.arg.content === attrName
-  );
-}
-function createStaticAttr(name, value, loc) {
-  return {
-    type: NodeTypes.ATTRIBUTE,
-    name,
-    nameLoc: loc,
-    value: { type: NodeTypes.TEXT, content: value, loc },
-    loc
+  return () => {
   };
 }
-function createBindDirective(attrName, exprContent, loc) {
-  return {
-    type: NodeTypes.DIRECTIVE,
-    name: "bind",
-    arg: {
-      type: NodeTypes.SIMPLE_EXPRESSION,
-      content: attrName,
-      isStatic: true,
-      constType: ConstantTypes.CAN_STRINGIFY,
-      loc
-    },
-    exp: {
-      type: NodeTypes.SIMPLE_EXPRESSION,
-      content: exprContent,
-      isStatic: false,
-      constType: ConstantTypes.NOT_CONSTANT,
-      loc
-    },
-    modifiers: [],
-    loc
-  };
-}
-function createASTTransform(opts) {
-  let count = 0;
-  let insideTableDepth = 0;
-  let insideBodyCellDepth = 0;
-  const componentSet = new Set(opts.components);
-  const idComponentSet = new Set(opts.idComponents);
-  return (node) => {
-    if (node.type !== NodeTypes.ELEMENT) return;
-    const tagName = node.tag.toLowerCase();
-    if (tagName === "a-table") {
-      insideTableDepth++;
-      return () => {
-        insideTableDepth--;
-      };
-    }
-    if (tagName === "template" && insideTableDepth > 0) {
-      const slotDir = node.props.find(
-        (p) => p.type === NodeTypes.DIRECTIVE && p.name === "slot" && p.arg && p.arg.type === NodeTypes.SIMPLE_EXPRESSION && p.arg.content === "bodyCell"
-      );
-      if (slotDir && slotDir.type === NodeTypes.DIRECTIVE) {
-        ensureSlotIndex(slotDir.exp);
-        insideBodyCellDepth++;
-        return () => {
-          insideBodyCellDepth--;
-        };
-      }
-    }
-    if (insideTableDepth > 0 && insideBodyCellDepth === 0) return;
-    if (!componentSet.has(tagName)) return;
-    if (hasExistingTestId(node, opts.attributeName)) return;
-    const testIdValue = opts.generateId(tagName, count++);
-    if (insideBodyCellDepth > 0) {
-      const expr = `\`\${column?.dataIndex || column?.key || 'cell'}-\${index}-${testIdValue}\``;
-      node.props.push(createBindDirective(opts.attributeName, expr, node.loc));
-      return;
-    }
-    if (idComponentSet.has(tagName)) {
-      node.props.push(createStaticAttr(opts.idAttributeName, testIdValue, node.loc));
-      node.props.push(createStaticAttr(opts.attributeName, testIdValue, node.loc));
-      return;
-    }
-    node.props.push(createStaticAttr(opts.attributeName, testIdValue, node.loc));
-  };
-}
-function createVueTestIdTransform(rawOpts) {
-  const opts = resolveOptions(rawOpts);
-  return createASTTransform(opts);
-}
 export {
-  createVueTestIdTransform
+  createVueTestIdTransform,
+  vueTestIdPlugin
 };

package/dist/runtime.d.ts

@@ -1,20 +1,36 @@
 /**
- * 运行时辅助模块：为 ant-design-vue teleport 弹出层（日期选择器、级联选择器等）
- * 中的 DOM 元素注入 data-testid，解决编译期无法处理的定位问题。
+ * 运行时 testid 注入：通过 MutationObserver 为 ant-design-vue 组件的 DOM 元素
+ * 自动注入 data-testid，解决编译期注入的诸多限制。
  *
- * 使用方式（在 main.ts 或入口文件中调用一次即可）：
+ * 使用方式（在 main.ts 中调用一次即可）：
  * ```ts
- * import { setupAntDropdownTestIds } from 'vite-plugin-vue-testid/runtime'
+ * import { setupAntTestIds } from 'vite-plugin-vue-testid/runtime'
  *
- * setupAntDropdownTestIds()
+ * createApp(App).mount('#app')
+ * setupAntTestIds()
  * ```
  */
 export interface RuntimeOptions {
     /**
-     * testId 属性名，需与编译期插件保持一致
+     * testId 属性名
      * @default 'data-testid'
      */
     attributeName?: string;
+    /**
+     * 自定义组件 CSS 选择器 → testid 前缀映射。
+     * 会与默认映射合并（自定义覆盖默认）。
+     *
+     * @example
+     * ```ts
+     * setupAntTestIds({
+     *   components: {
+     *     '.el-input': 'el-input',
+     *     '.el-button': 'el-button',
+     *   }
+     * })
+     * ```
+     */
+    components?: Record<string, string>;
     /**
      * 需要监听的 teleport 面板 CSS 选择器映射
      * key: 面板容器选择器
@@ -34,41 +50,31 @@ export interface PanelContext {
 }
 export type PanelInjectStrategy = (ctx: PanelContext) => void;
 /**
- * 为 teleport 弹出层面板注入 testId。
- * 使用 MutationObserver 监听 DOM 新增节点，自动识别 ant-design 弹出面板。
+ * 启动全运行时 testid 注入。
+ *
+ * 覆盖范围：
+ * - 所有 ant-design-vue 组件根元素（input / select / button / picker / ...）
+ * - teleport 弹出层面板（日期选择器 / 级联选择器 / 下拉选择器）
+ * - Menu 子元素（inheritAttrs:false 兜底）
+ * - Upload 内部 &lt;input type="file"&gt;
+ *
+ * @returns 清理函数，调用后停止监听
  *
  * @example
  * ```ts
  * // main.ts
- * import { setupAntDropdownTestIds } from 'vite-plugin-vue-testid/runtime'
+ * import { setupAntTestIds } from 'vite-plugin-vue-testid/runtime'
  *
  * createApp(App).mount('#app')
- * setupAntDropdownTestIds()
- * ```
- *
- * testId 注入结果示例：
- * ```
- * // 日期面板（初始）
- * a-date-picker-0-dropdown                  // 面板容器
- * a-date-picker-0-dropdown-prev             // 上月/上一级
- * a-date-picker-0-dropdown-next             // 下月/下一级
- * a-date-picker-0-dropdown-header-date      // header 容器
- * a-date-picker-0-dropdown-header-month-btn // header 内的月份按钮（"Jun"/"6月"）
- * a-date-picker-0-dropdown-header-year-btn  // header 内的年份按钮（"2026"）
- * a-date-picker-0-dropdown-date-2026-06-15  // 日期单元格
- * a-date-picker-0-dropdown-ok               // 确定按钮
- *
- * // 点击月份按钮 → 月面板（MutationObserver 自动重注入）
- * a-date-picker-0-dropdown-header-month     // header 容器
- * a-date-picker-0-dropdown-header-year-btn  // header 内的年份按钮
- * a-date-picker-0-dropdown-month-06         // 6月按钮
- *
- * // 点击年份按钮 → 年面板
- * a-date-picker-0-dropdown-header-year      // header 容器
- * a-date-picker-0-dropdown-year-2026        // 2026年按钮
+ * setupAntTestIds()
  * ```
  */
-export declare function setupAntDropdownTestIds(opts?: RuntimeOptions): () => void;
+export declare function setupAntTestIds(opts?: RuntimeOptions): () => void;
+/**
+ * @deprecated 使用 {@link setupAntTestIds} 替代。
+ * 保留此别名以兼容现有代码。
+ */
+export declare const setupAntDropdownTestIds: typeof setupAntTestIds;
 /**
  * 手动为当前已存在或即将出现的弹出面板注入 testId（一次性补丁）。
  * 适用于 SSR/hydration 或不想用 MutationObserver 的场景。

package/dist/runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,GAAG,SAAS,CAAC,CAAA;CACzD;AAED,MAAM,WAAW,YAAY;IAC3B,kBAAkB;IAClB,SAAS,EAAE,WAAW,CAAA;IACtB,iBAAiB;IACjB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,oBAAoB;IACpB,aAAa,EAAE,MAAM,CAAA;IACrB,iBAAiB;IACjB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAA;AA+a7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,GAAE,cAAmB,GAAG,MAAM,IAAI,CAkF7E;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,GAAE,cAAmB,GAAG,IAAI,CA+CtE"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAIH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAEnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,GAAG,SAAS,CAAC,CAAA;CACzD;AAED,MAAM,WAAW,YAAY;IAC3B,kBAAkB;IAClB,SAAS,EAAE,WAAW,CAAA;IACtB,iBAAiB;IACjB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,oBAAoB;IACpB,aAAa,EAAE,MAAM,CAAA;IACrB,iBAAiB;IACjB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAA;AA6c7D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,eAAe,CAAC,IAAI,GAAE,cAAmB,GAAG,MAAM,IAAI,CA4KrE;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,wBAAkB,CAAA;AAMtD;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,GAAE,cAAmB,GAAG,IAAI,CA4GtE"}

package/dist/runtime.js

@@ -1,4 +1,68 @@
 // src/runtime.ts
+var DEFAULT_COMPONENT_MATCHERS = [
+  // ── 输入框变体（按 specificity 降序）──
+  { selector: ".ant-input-search", prefix: "a-input-search" },
+  { selector: ".ant-input-affix-wrapper", prefix: "a-input" },
+  { selector: ".ant-input-textarea", prefix: "a-textarea" },
+  { selector: ".ant-input-number", prefix: "a-input-number" },
+  // ── 选择器 ──
+  { selector: ".ant-select", prefix: "a-select", withId: true },
+  { selector: ".ant-cascader", prefix: "a-cascader", withId: true },
+  { selector: ".ant-tree-select", prefix: "a-tree-select" },
+  // ── 日期/时间 ──
+  { selector: ".ant-picker", prefix: "a-date-picker", withId: true },
+  // ── 表单组件 ──
+  { selector: ".ant-radio-group", prefix: "a-radio-group" },
+  { selector: ".ant-radio-wrapper", prefix: "a-radio" },
+  { selector: ".ant-checkbox-group", prefix: "a-checkbox-group" },
+  { selector: ".ant-checkbox-wrapper", prefix: "a-checkbox" },
+  { selector: ".ant-switch", prefix: "a-switch" },
+  { selector: ".ant-slider", prefix: "a-slider" },
+  { selector: ".ant-rate", prefix: "a-rate" },
+  { selector: ".ant-form-item", prefix: "a-form-item" },
+  // ── 按钮 & 上传 ──
+  { selector: ".ant-btn", prefix: "a-button" },
+  { selector: ".ant-upload", prefix: "a-upload", withId: true },
+  // ── 弹窗 ──
+  { selector: ".ant-modal-wrap", prefix: "a-modal", withId: true },
+  // ── 菜单 ──
+  { selector: ".ant-menu", prefix: "a-menu" },
+  // ── 纯 input / textarea（必须排在最后）──
+  // 只有不在其他组件包裹内时才注入（通过 closest 排除）
+  { selector: "input.ant-input", prefix: "a-input" },
+  { selector: "textarea.ant-input", prefix: "a-textarea" }
+];
+var SKIP_PARENT_SELECTORS = [
+  ".ant-input-affix-wrapper",
+  ".ant-input-textarea",
+  ".ant-input-search",
+  ".ant-input-number",
+  ".ant-picker",
+  ".ant-select",
+  ".ant-cascader"
+];
+function isInnerInput(el) {
+  if (el.tagName !== "INPUT" && el.tagName !== "TEXTAREA") return false;
+  for (const sel of SKIP_PARENT_SELECTORS) {
+    if (el.closest(sel)) return true;
+  }
+  return false;
+}
+function injectComponentRoots(root, matchers, attrName, counter) {
+  for (const { selector, prefix, withId } of matchers) {
+    const candidates = root.matches(selector) ? [root] : Array.from(root.querySelectorAll(selector));
+    for (const el of candidates) {
+      if (!(el instanceof HTMLElement)) continue;
+      if (el.hasAttribute(attrName)) continue;
+      if (isInnerInput(el)) continue;
+      const testId = `${prefix}-${counter.value++}`;
+      el.setAttribute(attrName, testId);
+      if (withId && !el.hasAttribute("id")) {
+        el.setAttribute("id", testId);
+      }
+    }
+  }
+}
 function getPanelMode(panel) {
   if (panel.classList.contains("ant-picker-month-panel")) return "month";
   if (panel.classList.contains("ant-picker-year-panel")) return "year";
@@ -42,23 +106,6 @@ function injectHeaderViewButtons(panel, prefix, attrName, suffix) {
     el.setAttribute(attrName, `${prefix}-${name}${suffix}`);
   });
 }
-var _observedContainers = /* @__PURE__ */ new WeakSet();
-function injectSinglePanel(panel, prefix, attrName, suffix) {
-  const mode = getPanelMode(panel);
-  const setAttr = (selector, name) => {
-    const el = panel.querySelector(selector);
-    if (el && !el.hasAttribute(attrName)) {
-      el.setAttribute(attrName, `${prefix}-${name}${suffix}`);
-    }
-  };
-  setAttr(".ant-picker-header-super-prev-btn", "super-prev");
-  setAttr(".ant-picker-header-prev-btn", "prev");
-  setAttr(".ant-picker-header-next-btn", "next");
-  setAttr(".ant-picker-header-super-next-btn", "super-next");
-  setAttr(".ant-picker-header-view", `header-${mode}`);
-  injectHeaderViewButtons(panel, prefix, attrName, suffix);
-  injectPanelCells(panel, prefix, attrName, suffix);
-}
 function injectPanelCells(panel, prefix, attrName, suffix) {
   const mode = getPanelMode(panel);
   const cells = panel.querySelectorAll(".ant-picker-cell-inner");
@@ -73,20 +120,32 @@ function injectPanelCells(panel, prefix, attrName, suffix) {
         el.setAttribute(attrName, `${prefix}-month-${label}${suffix}`);
         break;
       case "year":
-        label = raw;
-        el.setAttribute(attrName, `${prefix}-year-${label}${suffix}`);
+        el.setAttribute(attrName, `${prefix}-year-${raw}${suffix}`);
         break;
       case "decade":
-        label = raw;
-        el.setAttribute(attrName, `${prefix}-decade-${label}${suffix}`);
+        el.setAttribute(attrName, `${prefix}-decade-${raw}${suffix}`);
         break;
       default:
-        label = raw;
-        el.setAttribute(attrName, `${prefix}-date-${label}${suffix}`);
+        el.setAttribute(attrName, `${prefix}-date-${raw}${suffix}`);
         break;
     }
   });
-  injectMenuItems(attrName);
+}
+function injectSinglePanel(panel, prefix, attrName, suffix) {
+  const mode = getPanelMode(panel);
+  const setAttr = (selector, name) => {
+    const el = panel.querySelector(selector);
+    if (el && !el.hasAttribute(attrName)) {
+      el.setAttribute(attrName, `${prefix}-${name}${suffix}`);
+    }
+  };
+  setAttr(".ant-picker-header-super-prev-btn", "super-prev");
+  setAttr(".ant-picker-header-prev-btn", "prev");
+  setAttr(".ant-picker-header-next-btn", "next");
+  setAttr(".ant-picker-header-super-next-btn", "super-next");
+  setAttr(".ant-picker-header-view", `header-${mode}`);
+  injectHeaderViewButtons(panel, prefix, attrName, suffix);
+  injectPanelCells(panel, prefix, attrName, suffix);
 }
 function injectPickerPanel(ctx) {
   const { container, triggerTestId, attrName } = ctx;
@@ -202,14 +261,39 @@ function injectSelectPanel(ctx) {
     observer.observe(container, { childList: true, subtree: true });
   }
 }
+function injectMenuItems(attrName, root = document) {
+  const itemRules = [
+    { selector: ".ant-menu-item", prefix: "a-menu-item-" },
+    { selector: ".ant-menu-submenu", textSelector: ".ant-menu-submenu-title", prefix: "a-sub-menu-" },
+    { selector: ".ant-menu-item-group", textSelector: ".ant-menu-item-group-title", prefix: "a-menu-item-group-" }
+  ];
+  for (const rule of itemRules) {
+    const items = root.querySelectorAll(rule.selector);
+    items.forEach((item) => {
+      const el = item;
+      if (el.hasAttribute(attrName)) return;
+      const id = el.getAttribute("id");
+      if (id) {
+        el.setAttribute(attrName, id);
+        return;
+      }
+      const textTarget = rule.textSelector ? el.querySelector(rule.textSelector) : el;
+      const text = (textTarget?.textContent || "").trim().replace(/\s+/g, "-");
+      if (text) {
+        el.setAttribute(attrName, rule.prefix + text);
+      }
+    });
+  }
+}
 var DEFAULT_PANELS = {
   ".ant-picker-dropdown": injectPickerPanel,
   ".ant-cascader-dropdown": injectCascaderPanel,
   ".ant-select-dropdown": injectSelectPanel
 };
+var _observedContainers = /* @__PURE__ */ new WeakSet();
 function getTriggerTestId(trigger, attrName) {
-  if (!trigger) return "unknown-picker";
-  return trigger.getAttribute(attrName) || trigger.getAttribute("id") || "unknown-picker";
+  if (!trigger) return "unknown";
+  return trigger.getAttribute(attrName) || trigger.getAttribute("id") || "unknown";
 }
 function findActiveTrigger(attrName) {
   const focused = document.querySelector(".ant-picker-focused");
@@ -230,90 +314,137 @@ function findActiveTrigger(attrName) {
   if (expanded) return expanded;
   return null;
 }
-function injectMenuItems(attrName, root = document) {
-  const itemRules = [
-    { selector: ".ant-menu-item", prefix: "a-menu-item-" },
-    { selector: ".ant-menu-submenu", textSelector: ".ant-menu-submenu-title", prefix: "a-sub-menu-" },
-    { selector: ".ant-menu-item-group", textSelector: ".ant-menu-item-group-title", prefix: "a-menu-item-group-" }
-  ];
-  const injectSingle = (el, rule) => {
-    if (el.hasAttribute(attrName)) return;
-    const id = el.getAttribute("id");
-    if (id) {
-      el.setAttribute(attrName, id);
-      return;
+function setupAntTestIds(opts = {}) {
+  const attrName = opts.attributeName ?? "data-testid";
+  const panels = { ...DEFAULT_PANELS, ...opts.panels };
+  let matchers = DEFAULT_COMPONENT_MATCHERS;
+  if (opts.components) {
+    const customKeys = new Set(Object.keys(opts.components));
+    matchers = matchers.filter((m) => !customKeys.has(m.selector));
+    for (const [selector, prefix] of Object.entries(opts.components)) {
+      matchers.push({ selector, prefix });
     }
-    const textTarget = rule.textSelector ? el.querySelector(rule.textSelector) : el;
-    const text = (textTarget?.textContent || "").trim().replace(/\s+/g, "-");
-    if (text) {
-      el.setAttribute(attrName, rule.prefix + text);
+  }
+  const counter = { value: 0 };
+  function processNode(node) {
+    if (!(node instanceof HTMLElement)) return;
+    injectComponentRoots(node, matchers, attrName, counter);
+    injectMenuItems(attrName, node);
+    for (const [selector, strategy] of Object.entries(panels)) {
+      const containers = node.matches(selector) ? [node] : Array.from(node.querySelectorAll(selector));
+      for (const container of containers) {
+        if (!(container instanceof HTMLElement)) continue;
+        if (container.hasAttribute(attrName)) continue;
+        if (strategy) {
+          queueMicrotask(() => {
+            const trigger = findActiveTrigger(attrName);
+            const triggerTestId = getTriggerTestId(trigger, attrName);
+            strategy({ container, trigger, triggerTestId, attrName });
+          });
+        }
+      }
     }
-  };
-  for (const rule of itemRules) {
-    if (root instanceof HTMLElement && root.matches(rule.selector)) {
-      injectSingle(root, rule);
+    const inputNumbers = node.matches(`.ant-input-number[${attrName}]`) ? [node] : Array.from(node.querySelectorAll(`.ant-input-number[${attrName}]`));
+    for (const inputNumber of inputNumbers) {
+      if (!(inputNumber instanceof HTMLElement)) continue;
+      const testId = inputNumber.getAttribute(attrName) || "";
+      if (!testId) continue;
+      const input = inputNumber.querySelector(".ant-input-number-input");
+      if (input && !input.hasAttribute(attrName)) {
+        input.setAttribute(attrName, testId);
+      }
+      const upHandler = inputNumber.querySelector(".ant-input-number-handler-up");
+      if (upHandler && !upHandler.hasAttribute(attrName)) {
+        upHandler.setAttribute(attrName, `${testId}-up`);
+      }
+      const downHandler = inputNumber.querySelector(".ant-input-number-handler-down");
+      if (downHandler && !downHandler.hasAttribute(attrName)) {
+        downHandler.setAttribute(attrName, `${testId}-down`);
+      }
+    }
+    const sliders = node.matches(`.ant-slider[${attrName}]`) ? [node] : Array.from(node.querySelectorAll(`.ant-slider[${attrName}]`));
+    for (const slider of sliders) {
+      if (!(slider instanceof HTMLElement)) continue;
+      const testId = slider.getAttribute(attrName) || "";
+      if (!testId) continue;
+      const handles = slider.querySelectorAll(".ant-slider-handle");
+      handles.forEach((h, i) => {
+        const el = h;
+        if (!el.hasAttribute(attrName)) {
+          el.setAttribute(attrName, `${testId}-handle-${i}`);
+        }
+      });
+    }
+    const rates = node.matches(`.ant-rate[${attrName}]`) ? [node] : Array.from(node.querySelectorAll(`.ant-rate[${attrName}]`));
+    for (const rate of rates) {
+      if (!(rate instanceof HTMLElement)) continue;
+      const testId = rate.getAttribute(attrName) || "";
+      if (!testId) continue;
+      const stars = rate.querySelectorAll(".ant-rate-star");
+      stars.forEach((s, i) => {
+        const el = s;
+        if (!el.hasAttribute(attrName)) {
+          el.setAttribute(attrName, `${testId}-star-${i}`);
+        }
+      });
+    }
+    const uploadByTestId = node.matches(`.ant-upload[${attrName}]`) ? [node] : Array.from(node.querySelectorAll(`.ant-upload[${attrName}]`));
+    const uploadById = uploadByTestId.length === 0 ? node.matches(".ant-upload[id]") ? [node] : Array.from(node.querySelectorAll(".ant-upload[id]")) : [];
+    for (const upload of [...uploadByTestId, ...uploadById]) {
+      if (!(upload instanceof HTMLElement)) continue;
+      const testId = upload.getAttribute(attrName) || upload.getAttribute("id") || "";
+      if (!testId) continue;
+      const input = upload.querySelector('input[type="file"]');
+      if (input && !input.hasAttribute(attrName)) {
+        input.setAttribute(attrName, `${testId}-input`);
+        if (!upload.hasAttribute(attrName)) {
+          upload.setAttribute(attrName, testId);
+        }
+      }
     }
-    const items = root.querySelectorAll(rule.selector);
-    items.forEach((item) => {
-      injectSingle(item, rule);
-    });
   }
-}
-function setupAntDropdownTestIds(opts = {}) {
-  const attrName = opts.attributeName ?? "data-testid";
-  const panels = { ...DEFAULT_PANELS, ...opts.panels };
+  let pending = false;
+  let pendingNodes = [];
+  const flushPending = () => {
+    pending = false;
+    const nodes = pendingNodes;
+    pendingNodes = [];
+    for (const node of nodes) {
+      processNode(node);
+    }
+  };
   const observer = new MutationObserver((mutations) => {
     for (const mutation of mutations) {
       for (const node of mutation.addedNodes) {
-        if (!(node instanceof HTMLElement)) continue;
-        for (const [selector, strategy] of Object.entries(panels)) {
-          const containers = node.matches(selector) ? [node] : Array.from(node.querySelectorAll(selector));
-          for (const container of containers) {
-            if (!(container instanceof HTMLElement)) continue;
-            if (container.hasAttribute(attrName)) continue;
-            if (strategy) {
-              queueMicrotask(() => {
-                const trigger = findActiveTrigger(attrName);
-                const triggerTestId = getTriggerTestId(trigger, attrName);
-                const ctx = {
-                  container,
-                  trigger,
-                  triggerTestId,
-                  attrName
-                };
-                strategy(ctx);
-              });
-            }
-          }
-        }
-        const uploadByTestId = node.matches(`.ant-upload[${attrName}]`) ? [node] : Array.from(node.querySelectorAll(`.ant-upload[${attrName}]`));
-        const uploadById = uploadByTestId.length === 0 ? node.matches(`.ant-upload[id]`) ? [node] : Array.from(node.querySelectorAll(`.ant-upload[id]`)) : [];
-        const uploads = [...uploadByTestId, ...uploadById];
-        for (const upload of uploads) {
-          if (!(upload instanceof HTMLElement)) continue;
-          const testId = upload.getAttribute(attrName) || upload.getAttribute("id") || "";
-          if (!testId) continue;
-          const input = upload.querySelector('input[type="file"]');
-          if (input && !input.hasAttribute(attrName)) {
-            input.setAttribute(attrName, `${testId}-input`);
-            if (!upload.hasAttribute(attrName)) {
-              upload.setAttribute(attrName, testId);
-            }
-          }
-        }
-        injectMenuItems(attrName, node instanceof HTMLElement ? node : document);
+        pendingNodes.push(node);
       }
     }
+    if (!pending) {
+      pending = true;
+      requestAnimationFrame(flushPending);
+    }
   });
   observer.observe(document.body, { childList: true, subtree: true });
-  requestAnimationFrame(() => {
-    injectMenuItems(attrName);
-  });
-  return () => observer.disconnect();
+  processNode(document.body);
+  return () => {
+    observer.disconnect();
+    pendingNodes = [];
+  };
 }
+var setupAntDropdownTestIds = setupAntTestIds;
 function injectCurrentDropdowns(opts = {}) {
   const attrName = opts.attributeName ?? "data-testid";
   const panels = { ...DEFAULT_PANELS, ...opts.panels };
+  const counter = { value: 0 };
+  let matchers = DEFAULT_COMPONENT_MATCHERS;
+  if (opts.components) {
+    const customKeys = new Set(Object.keys(opts.components));
+    matchers = matchers.filter((m) => !customKeys.has(m.selector));
+    for (const [selector, prefix] of Object.entries(opts.components)) {
+      matchers.push({ selector, prefix });
+    }
+  }
+  injectComponentRoots(document.body, matchers, attrName, counter);
   for (const [selector, strategy] of Object.entries(panels)) {
     const containers = document.querySelectorAll(selector);
     containers.forEach((container) => {
@@ -325,9 +456,53 @@ function injectCurrentDropdowns(opts = {}) {
       strategy({ container, trigger, triggerTestId, attrName });
     });
   }
+  const inputNumbers = document.querySelectorAll(`.ant-input-number[${attrName}]`);
+  inputNumbers.forEach((inputNumber) => {
+    if (!(inputNumber instanceof HTMLElement)) return;
+    const testId = inputNumber.getAttribute(attrName) || "";
+    if (!testId) return;
+    const input = inputNumber.querySelector(".ant-input-number-input");
+    if (input && !input.hasAttribute(attrName)) {
+      input.setAttribute(attrName, testId);
+    }
+    const upHandler = inputNumber.querySelector(".ant-input-number-handler-up");
+    if (upHandler && !upHandler.hasAttribute(attrName)) {
+      upHandler.setAttribute(attrName, `${testId}-up`);
+    }
+    const downHandler = inputNumber.querySelector(".ant-input-number-handler-down");
+    if (downHandler && !downHandler.hasAttribute(attrName)) {
+      downHandler.setAttribute(attrName, `${testId}-down`);
+    }
+  });
+  const sliders = document.querySelectorAll(`.ant-slider[${attrName}]`);
+  sliders.forEach((slider) => {
+    if (!(slider instanceof HTMLElement)) return;
+    const testId = slider.getAttribute(attrName) || "";
+    if (!testId) return;
+    const handles = slider.querySelectorAll(".ant-slider-handle");
+    handles.forEach((h, i) => {
+      const el = h;
+      if (!el.hasAttribute(attrName)) {
+        el.setAttribute(attrName, `${testId}-handle-${i}`);
+      }
+    });
+  });
+  const rates = document.querySelectorAll(`.ant-rate[${attrName}]`);
+  rates.forEach((rate) => {
+    if (!(rate instanceof HTMLElement)) return;
+    const testId = rate.getAttribute(attrName) || "";
+    if (!testId) return;
+    const stars = rate.querySelectorAll(".ant-rate-star");
+    stars.forEach((s, i) => {
+      const el = s;
+      if (!el.hasAttribute(attrName)) {
+        el.setAttribute(attrName, `${testId}-star-${i}`);
+      }
+    });
+  });
   const uploads = [
     ...Array.from(document.querySelectorAll(`.ant-upload[${attrName}]`)),
-    ...Array.from(document.querySelectorAll(`.ant-upload[id]`))
+    ...Array.from(document.querySelectorAll(".ant-upload[id]"))
   ];
   const seen = /* @__PURE__ */ new Set();
   uploads.forEach((upload) => {
@@ -348,5 +523,6 @@ function injectCurrentDropdowns(opts = {}) {
 }
 export {
   injectCurrentDropdowns,
-  setupAntDropdownTestIds
+  setupAntDropdownTestIds,
+  setupAntTestIds
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vue-testid",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Vite plugin to auto-inject data-testid into Vue component templates for E2E testing",
   "type": "module",
   "main": "./dist/index.js",
@@ -42,12 +42,9 @@
     "vite": ">=5.0.0",
     "vue": ">=3.3.0"
   },
-  "dependencies": {
-    "@vue/compiler-core": "^3.5.0"
-  },
   "devDependencies": {
     "tsup": "^8.5.1",
     "typescript": "~6.0.2",
     "vite": "^8.0.12"
   }
-}
+}