Merge pull request #553 from zh-lx/fix/vue-loader-mode

feat: add vue loader mode option

Author: zh-lx

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

@@ -4,8 +4,13 @@ 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, CodeInspectorEscapeTags } from '../../shared';
+export { createVueInspectorNodeTransform } from './transform-vue-node';
+import {
+  EscapeTags,
+  PathType,
+  isIgnoredFile,
+  CodeInspectorEscapeTags,
+} from '../../shared';
 import { getRelativeOrAbsolutePath } from '../server';
 
 type FileType = 'vue' | 'jsx' | 'svelte' | 'astro' | 'mdx' | unknown;
@@ -44,7 +49,12 @@ export async function transformCode(params: TransformCodeParams) {
     } else if (fileType === 'svelte') {
       return transformSvelte(content, filePath, finalEscapeTags);
     } else if (fileType === 'astro') {
-      return transformAstro(content, filePath, finalEscapeTags, resolveFilePath);
+      return transformAstro(
+        content,
+        filePath,
+        finalEscapeTags,
+        resolveFilePath,
+      );
     } else if (fileType === 'mdx') {
       if (!mdx) {
         return content;

…c/server/transform/vue-node-transform.ts …c/server/transform/transform-vue-node.tspackages/core/src/server/transform/vue-node-transform.ts renamed to packages/core/src/server/transform/transform-vue-node.ts packages/core/src/server/transform/vue-node-transform.ts renamed to packages/core/src/server/transform/transform-vue-node.ts

@@ -58,7 +58,11 @@ function getNodeFilePath(
   context: TransformContext,
   options: VueInspectorNodeTransformOptions,
 ) {
-  const filename = normalizePath(context.filename || '');
+  if (!context.filename) {
+    return '';
+  }
+
+  const filename = normalizePath(context.filename);
   const mappedFilePath = getMappingFilePath(filename, options.mappings);
   return getRelativeOrAbsolutePath(
     mappedFilePath,
@@ -85,6 +89,10 @@ export function createVueInspectorNodeTransform(
 
     const { line, column } = node.loc.start;
     const filePath = getNodeFilePath(context, options);
+    if (!filePath) {
+      return;
+    }
+
     node.props.unshift(
       createAttributeNode(
         PathName,

packages/core/src/shared/type.ts

@@ -144,6 +144,15 @@ export type CodeOptions = {
    * @en Additional files to be compiled (used to make some files in `node_modules` participate in compilation to inject path information)
    */
   include?: Condition;
+  /**
+   * @zh Vue 文件的编译方式，仅对 `webpack/rspack/rsbuild` 项目生效，默认值为 `custom`
+   * - `custom` 表示使用 code-inspector-plugin 自定义的 loader 注入，优点是兼容性强，部分 vue 项目生产环境使用可能导致 scoped css 失效
+   * - `internal` 表示使用 vue-loader 内部 compiler node transform，可以解决生产环境 scoped css 失效问题，但是低版本 vue compiler 不兼容
+   * @en Vue file compilation mode, only effective for `webpack/rspack/rsbuild` projects, default value is `custom`
+   * - `custom` means using code-inspector-plugin's custom loader injection, with strong compatibility, but may cause scoped CSS to fail in some Vue projects in production environment
+   * - `internal` means using vue-loader's internal compiler node transform, which can solve the scoped CSS failure issue in production environment, but is not compatible with lower versions of Vue compiler
+   */
+  vueLoader?: 'custom' | 'internal';
   /**
    * @zh 不参与编译的文件
    * @en Files not to be compiled

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

@@ -1,4 +1,4 @@
-export { createVueInspectorNodeTransform } from './vue-node-transform';
+export { createVueInspectorNodeTransform } from './transform-vue-node';
 import { EscapeTags, PathType } from '../../shared';
 type FileType = 'vue' | 'jsx' | 'svelte' | 'astro' | 'mdx' | unknown;
 type TransformCodeParams = {

…server/transform/vue-node-transform.d.ts …server/transform/transform-vue-node.d.tspackages/core/types/server/transform/vue-node-transform.d.ts renamed to packages/core/types/server/transform/transform-vue-node.d.ts packages/core/types/server/transform/vue-node-transform.d.ts renamed to packages/core/types/server/transform/transform-vue-node.d.ts

@@ -139,6 +139,11 @@ export type CodeOptions = {
      * @en Additional files to be compiled (used to make some files in `node_modules` participate in compilation to inject path information)
      */
     include?: Condition;
+    /**
+     * @zh Vue 文件的注入方式。`custom` 表示使用 loader 注入，`internal` 表示使用 vue-loader 内部 compiler node transform。
+     * @en Vue injection mode. `custom` uses the loader path, `internal` uses vue-loader's internal compiler node transform.
+     */
+    vueLoader?: 'custom' | 'internal';
     /**
      * @zh 不参与编译的文件
      * @en Files not to be compiled

packages/core/types/shared/type.d.ts

@@ -15,7 +15,6 @@ const compatibleDirname = path.dirname(fileURLToPath(import.meta.url));
 
 interface LoaderOptions extends CodeOptions {
   record: RecordInfo;
-  vueCompilerNodeTransform?: boolean;
 }
 
 const baseLoaderPath = path.resolve(compatibleDirname, './loader.js');
@@ -62,21 +61,13 @@ 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 rules = getCompilerRules(compiler);
-  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))
-      ) {
+      if (typeof loader !== 'string' || !isVueLoader(loader)) {
         return;
       }
 
@@ -117,12 +108,8 @@ function applyVueCompilerNodeTransform(options: CodeOptions, compiler: any) {
         });
         nodeTransforms.push(transform);
       }
-
-      applied = true;
     });
   });
-
-  return applied;
 }
 
 function hasRegisteredCodeInspectorLoader(rules: any[]) {
@@ -275,14 +262,11 @@ class WebpackCodeInspectorPlugin {
       }
     }
 
-    const vueCompilerNodeTransform = applyVueCompilerNodeTransform(
-      this.options,
-      compiler,
-    );
-    applyLoader(
-      { ...this.options, record, vueCompilerNodeTransform },
-      compiler,
-    );
+    if (this.options.vueLoader === 'internal') {
+      applyVueCompilerNodeTransform(this.options, compiler);
+    }
+
+    applyLoader({ ...this.options, record }, compiler);
 
     if (
       compiler?.hooks?.emit &&

packages/webpack/src/index.ts

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