Merge pull request #548 from lejunyang/main

fix: inject vue inspector attributes via compiler transform

Author: zh-lx

packages/core/src/server/index.ts

@@ -1,3 +1,6 @@
-export { transformCode } from './transform';
+export {
+  createVueInspectorNodeTransform,
+  transformCode,
+} from './transform';
 export * from './use-client';
-export * from './server';
+export * from './server';

packages/core/src/server/transform/index.ts

@@ -4,6 +4,7 @@ import { transformJsx } from './transform-jsx';
 import { transformMdx } from './transform-mdx';
 import { transformSvelte } from './transform-svelte';
 import { transformVue } from './transform-vue';
+export { createVueInspectorNodeTransform } from './vue-node-transform';
 import { EscapeTags, PathType, isIgnoredFile } from '../../shared';
 import { getRelativeOrAbsolutePath } from '../server';
 

packages/core/src/server/transform/vue-node-transform.ts

@@ -0,0 +1,114 @@
+import type {
+  AttributeNode,
+  ElementNode,
+  NodeTransform,
+  SourceLocation,
+  TemplateChildNode,
+  TextNode,
+  TransformContext,
+} from '@vue/compiler-dom';
+import type { EscapeTags, PathType } from '../../shared';
+import {
+  PathName,
+  getMappingFilePath,
+  isEscapeTags,
+  normalizePath,
+} from '../../shared';
+import { getRelativeOrAbsolutePath } from '../server';
+
+const VueElementType = 1;
+const VueTextType = 2;
+const VueAttributeType = 6;
+
+const CodeInspectorEscapeTags = [
+  'style',
+  'script',
+  'template',
+  'transition',
+  'keepalive',
+  'keep-alive',
+  'component',
+  'slot',
+  'teleport',
+  'transition-group',
+  'transitiongroup',
+  'suspense',
+  'fragment',
+];
+
+type VueInspectorNodeTransformOptions = {
+  escapeTags?: EscapeTags;
+  pathType?: PathType;
+  mappings?:
+    | Record<string, string>
+    | Array<{ find: string | RegExp; replacement: string }>;
+};
+
+function hasInspectorPath(node: ElementNode) {
+  return node.props.some(
+    (prop) => prop.type === VueAttributeType && prop.name === PathName,
+  );
+}
+
+function createTextNode(content: string, loc: SourceLocation): TextNode {
+  return {
+    type: VueTextType,
+    content,
+    loc,
+  } as TextNode;
+}
+
+function createAttributeNode(
+  name: string,
+  content: string,
+  loc: SourceLocation,
+): AttributeNode {
+  return {
+    type: VueAttributeType,
+    name,
+    nameLoc: loc,
+    value: createTextNode(content, loc),
+    loc,
+  } as AttributeNode;
+}
+
+function getNodeFilePath(
+  context: TransformContext,
+  options: VueInspectorNodeTransformOptions,
+) {
+  const filename = normalizePath(context.filename || '');
+  const mappedFilePath = getMappingFilePath(filename, options.mappings);
+  return getRelativeOrAbsolutePath(
+    mappedFilePath,
+    options.pathType ?? 'relative',
+  );
+}
+
+export function createVueInspectorNodeTransform(
+  options: VueInspectorNodeTransformOptions = {},
+): NodeTransform {
+  const finalEscapeTags = [
+    ...CodeInspectorEscapeTags,
+    ...(options.escapeTags || []),
+  ];
+
+  return ((node: TemplateChildNode, context: TransformContext) => {
+    if (
+      node.type !== VueElementType ||
+      hasInspectorPath(node) ||
+      isEscapeTags(finalEscapeTags, node.tag)
+    ) {
+      return;
+    }
+
+    const { line, column } = node.loc.start;
+    const filePath = getNodeFilePath(context, options);
+    node.props.unshift(
+      createAttributeNode(
+        PathName,
+        `${filePath}:${line}:${column}:${node.tag}`,
+        node.loc,
+      ),
+    );
+  }) as NodeTransform;
+}

packages/core/types/server/index.d.ts

@@ -1,3 +1,3 @@
-export { transformCode } from './transform';
+export { createVueInspectorNodeTransform, transformCode, } from './transform';
 export * from './use-client';
 export * from './server';

packages/core/types/server/transform/index.d.ts

@@ -1,3 +1,4 @@
+export { createVueInspectorNodeTransform } from './vue-node-transform';
 import { EscapeTags, PathType } from '../../shared';
 type FileType = 'vue' | 'jsx' | 'svelte' | 'astro' | 'mdx' | unknown;
 type TransformCodeParams = {
@@ -9,4 +10,3 @@ type TransformCodeParams = {
     mdx?: boolean;
 };
 export declare function transformCode(params: TransformCodeParams): Promise<string>;
-export {};

packages/core/types/server/transform/vue-node-transform.d.ts

@@ -0,0 +1,12 @@
+import type { NodeTransform } from '@vue/compiler-dom';
+import type { EscapeTags, PathType } from '../../shared';
+type VueInspectorNodeTransformOptions = {
+    escapeTags?: EscapeTags;
+    pathType?: PathType;
+    mappings?: Record<string, string> | Array<{
+        find: string | RegExp;
+        replacement: string;
+    }>;
+};
+export declare function createVueInspectorNodeTransform(options?: VueInspectorNodeTransformOptions): NodeTransform;
+export {};

packages/webpack/src/index.ts

@@ -1,6 +1,7 @@
 import {
   CodeOptions,
   RecordInfo,
+  createVueInspectorNodeTransform,
   getCodeWithWebComponent,
   getProjectRecord,
   isDev,
@@ -14,10 +15,111 @@ const compatibleDirname = path.dirname(fileURLToPath(import.meta.url));
 
 interface LoaderOptions extends CodeOptions {
   record: RecordInfo;
+  vueCompilerNodeTransform?: boolean;
 }
 
 const baseLoaderPath = path.resolve(compatibleDirname, './loader.js');
 const injectLoaderPath = path.resolve(compatibleDirname, './inject-loader.js');
+const codeInspectorVueNodeTransform = Symbol.for(
+  'code-inspector.vueNodeTransform',
+);
+
+function getUseItems(rule: any): any[] {
+  if (!rule) {
+    return [];
+  }
+
+  if (Array.isArray(rule.use)) {
+    return rule.use;
+  }
+
+  if (rule.loader) {
+    return [rule];
+  }
+
+  return [];
+}
+
+function walkRules(rules: any[], visitor: (rule: any) => void) {
+  rules.forEach((rule) => {
+    visitor(rule);
+    if (Array.isArray(rule.rules)) {
+      walkRules(rule.rules, visitor);
+    }
+    if (Array.isArray(rule.oneOf)) {
+      walkRules(rule.oneOf, visitor);
+    }
+  });
+}
+
+function isVueLoader(loader: string) {
+  return /(^|[\\/])vue-loader([\\/]|$)/.test(loader);
+}
+
+function isVueTemplateLoader(loader: string) {
+  return /(^|[\\/])vue-loader[\\/]dist[\\/]templateLoader\.js$/.test(loader);
+}
+
+function applyVueCompilerNodeTransform(options: CodeOptions, compiler: any) {
+  const _compiler = compiler?.compiler || compiler;
+  const module = _compiler?.options?.module;
+  const rules = module?.rules || module?.loaders || [];
+  let applied = false;
+
+  walkRules(rules, (rule) => {
+    getUseItems(rule).forEach((item) => {
+      const loader = typeof item === 'string' ? item : item?.loader;
+      if (
+        typeof loader !== 'string' ||
+        (!isVueLoader(loader) && !isVueTemplateLoader(loader))
+      ) {
+        return;
+      }
+
+      if (typeof item === 'string') {
+        return;
+      }
+
+      if (!item.options || typeof item.options !== 'object') {
+        item.options = {};
+      }
+
+      const loaderOptions = item.options;
+      if (
+        !loaderOptions.compilerOptions ||
+        typeof loaderOptions.compilerOptions !== 'object'
+      ) {
+        loaderOptions.compilerOptions = {};
+      }
+
+      const compilerOptions = loaderOptions.compilerOptions;
+      if (!Array.isArray(compilerOptions.nodeTransforms)) {
+        compilerOptions.nodeTransforms = [];
+      }
+
+      const nodeTransforms = compilerOptions.nodeTransforms;
+      const hasRegistered = nodeTransforms.some(
+        (transform: any) => transform?.[codeInspectorVueNodeTransform],
+      );
+
+      if (!hasRegistered) {
+        const transform = createVueInspectorNodeTransform({
+          escapeTags: options.escapeTags,
+          mappings: options.mappings,
+          pathType: options.pathType,
+        });
+        Object.defineProperty(transform, codeInspectorVueNodeTransform, {
+          value: true,
+        });
+        nodeTransforms.push(transform);
+      }
+
+      applied = true;
+    });
+  });
+
+  return applied;
+}
 
 function hasRegisteredCodeInspectorLoader(rules: any[]) {
   return rules.some((rule) =>
@@ -165,14 +267,18 @@ class WebpackCodeInspectorPlugin {
       if (this.options.cache) {
         // 用来在 cache 情况下启动 node server
         record.port =
-          this.options.port || getProjectRecord(record)?.previousPort;
+            this.options.port || getProjectRecord(record)?.previousPort || 0;
         getPureClientCodeString(this.options, record, true);
       } else {
         cache.version = `code-inspector-${Date.now()}`;
       }
     }
 
-    applyLoader({ ...this.options, record }, compiler);
+    const vueCompilerNodeTransform = applyVueCompilerNodeTransform(
+      this.options,
+      compiler,
+    );
+    applyLoader({ ...this.options, record, vueCompilerNodeTransform }, compiler);
 
     if (
       compiler?.hooks?.emit &&

packages/webpack/src/loader.ts

@@ -79,6 +79,9 @@ async function transformWebpackCodeInspectorContent(
     filePath.endsWith('.html') &&
     params.get('type') === 'template' &&
     params.has('vue');
+  if (options.vueCompilerNodeTransform && (isVue || isHtmlVue)) {
+    return content;
+  }
   if (isVue || isHtmlVue) {
     return await transformCode({
       content,

test/core/server/transform/transform-vue.test.ts

@@ -1,16 +1,27 @@
 import { describe, it, expect, vi } from 'vitest';
 import fs from 'fs';
+import { createRequire } from 'node:module';
 import {
   resolveVueCompilerDom,
   transformVue,
 } from '@/core/src/server/transform/transform-vue';
+import {
+  createVueInspectorNodeTransform,
+} from '@/core/src/server/transform/vue-node-transform';
 import { PathName } from '@/core/src/shared/constant';
 
 // Only mock server module, not fs
 vi.mock('@/core/src/server/server', () => ({
   ProjectRootPath: '/mock/project',
+  getRelativeOrAbsolutePath: (filePath: string, pathType?: string) =>
+    pathType === 'relative'
+      ? filePath.replace('/mock/project/', '')
+      : filePath,
 }));
 
+const coreRequire = createRequire(`${process.cwd()}/packages/core/package.json`);
+const { compile } = coreRequire('@vue/compiler-dom') as { compile: any };
+
 describe('transformVue', () => {
   const filePath = 'test/file.vue';
   // Note: don't include 'template' in escapeTags for testing template content
@@ -704,3 +715,44 @@ const count = ref(0);
     });
   });
 });
+
+describe('createVueInspectorNodeTransform', () => {
+  it('should inject data-insp-path through Vue compiler AST without changing source', () => {
+    const source = '<div><span>Hi</span></div>';
+    const result = compile(source, {
+      filename: '/mock/project/src/App.vue',
+      nodeTransforms: [
+        createVueInspectorNodeTransform({
+          pathType: 'relative',
+        }),
+      ],
+    });
+
+    expect(source).toBe('<div><span>Hi</span></div>');
+    expect(result.code).toContain(
+      `"${PathName}": "src/App.vue:1:1:div"`,
+    );
+    expect(result.code).toContain(
+      `"${PathName}": "src/App.vue:1:6:span"`,
+    );
+  });
+
+  it('should respect escapeTags and existing data-insp-path attributes', () => {
+    const result = compile(
+      `<div ${PathName}="existing"><custom-card>Skip</custom-card></div>`,
+      {
+        filename: '/mock/project/src/App.vue',
+        nodeTransforms: [
+          createVueInspectorNodeTransform({
+            escapeTags: [/^custom-/],
+            pathType: 'relative',
+          }),
+        ],
+      },
+    );
+
+    expect(result.code.match(new RegExp(PathName, 'g'))?.length).toBe(1);
+    expect(result.code).toContain(`"${PathName}": "existing"`);
+    expect(result.code).not.toContain(':custom-card');
+  });
+});