Add option 'exposeFilename' to plugin-vue

vitejs · Nov 3, 2021 · c437b9a · c437b9a
1 parent 4d3bfae
commit c437b9a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/packages/plugin-vue/README.md b/packages/plugin-vue/README.md
@@ -46,6 +46,19 @@ export interface Options {
    */
   refTransform?: boolean | string | RegExp | (string | RegExp)[]
 
+  /**
+   * In non-production environments, @vitejs/plugin-vue injects a __file property to components
+   * for better debugging experience. If the name property is missing in a component,
+   * Vue will infer it from the __file field to display in console warnings.
+   * This property is stripped in production builds by default.
+   * But you may want to retain it if you are developing a component library
+   * and don't want to bother specifying name in each component.
+   * Then you can turn this option on.
+   *
+   * @default false
+   */
+  exposeFilename?: boolean,
+
   // options to pass on to vue/compiler-sfc
   script?: Partial<SFCScriptCompileOptions>
   template?: Partial<SFCTemplateCompileOptions>

diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts
@@ -56,6 +56,19 @@ export interface Options {
    */
   refTransform?: boolean | string | RegExp | (string | RegExp)[]
 
+  /**
+   * In non-production environments, @vitejs/plugin-vue injects a __file property to components
+   * for better debugging experience. If the name property is missing in a component,
+   * Vue will infer it from the __file field to display in console warnings.
+   * This property is stripped in production builds by default.
+   * But you may want to retain it if you are developing a component library
+   * and don't want to bother specifying name in each component.
+   * Then you can turn this option on.
+   *
+   * @default false
+   */
+  exposeFilename?: boolean,
+
   /**
    * @deprecated the plugin now auto-detects whether it's being invoked for ssr.
    */
@@ -73,7 +86,8 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
     include = /\.vue$/,
     exclude,
     customElement = /\.ce\.vue$/,
-    refTransform = false
+    refTransform = false,
+    exposeFilename = false
   } = rawOptions
 
   const filter = createFilter(include, exclude)
@@ -100,6 +114,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
     exclude,
     customElement,
     refTransform,
+    exposeFilename,
     root: process.cwd(),
     sourceMap: true
   }

diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
@@ -27,7 +27,7 @@ export async function transformMain(
   ssr: boolean,
   asCustomElement: boolean
 ) {
-  const { devServer, isProduction } = options
+  const { devServer, isProduction, exposeFilename } = options
 
   // prev descriptor is only set and used for hmr
   const prevDescriptor = getPrevDescriptor(filename)
@@ -101,7 +101,7 @@ export async function transformMain(
   if (hasScoped) {
     attachedProps.push([`__scopeId`, JSON.stringify(`data-v-${descriptor.id}`)])
   }
-  if (devServer && !isProduction) {
+  if (devServer && !isProduction || exposeFilename) {
     // expose filename during serve for devtools to pickup
     attachedProps.push([`__file`, JSON.stringify(filename)])
   }