feat(plugin-vue): add customElement option to compiler

packages/plugin-vue/src/index.ts

@@ -266,7 +266,14 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
           : getDescriptor(filename, options)!
 
         if (query.type === 'template') {
-          return transformTemplateAsModule(code, descriptor, options, this, ssr)
+          return transformTemplateAsModule(
+            code,
+            descriptor,
+            options,
+            this,
+            ssr,
+            customElementFilter(filename),
+          )
         } else if (query.type === 'style') {
           return transformStyle(
             code,

packages/plugin-vue/src/main.ts

@@ -61,6 +61,7 @@ export async function transformMain(
     options,
     pluginContext,
     ssr,
+    asCustomElement,
   )
 
   // template
@@ -75,6 +76,7 @@ export async function transformMain(
       options,
       pluginContext,
       ssr,
+      asCustomElement,
     ))
   }
 
@@ -262,6 +264,7 @@ async function genTemplateCode(
   options: ResolvedOptions,
   pluginContext: PluginContext,
   ssr: boolean,
+  customElement: boolean,
 ) {
   const template = descriptor.template!
   const hasScoped = descriptor.styles.some((style) => style.scoped)
@@ -276,6 +279,7 @@ async function genTemplateCode(
       options,
       pluginContext,
       ssr,
+      customElement,
     )
   } else {
     if (template.src) {
@@ -309,14 +313,15 @@ async function genScriptCode(
   options: ResolvedOptions,
   pluginContext: PluginContext,
   ssr: boolean,
+  customElement: boolean,
 ): Promise<{
   code: string
   map: RawSourceMap | undefined
 }> {
   let scriptCode = `const ${scriptIdentifier} = {}`
   let map: RawSourceMap | undefined
 
-  const script = resolveScript(descriptor, options, ssr)
+  const script = resolveScript(descriptor, options, ssr, customElement)
   if (script) {
     // If the script is js/ts and has no external src, it can be directly placed
     // in the main module.

packages/plugin-vue/src/script.ts

@@ -48,6 +48,7 @@ export function resolveScript(
   descriptor: SFCDescriptor,
   options: ResolvedOptions,
   ssr: boolean,
+  customElement: boolean,
 ): SFCScriptBlock | null {
   if (!descriptor.script && !descriptor.scriptSetup) {
     return null
@@ -72,6 +73,7 @@ export function resolveScript(
     genDefaultAs: canInlineMain(descriptor, options)
       ? scriptIdentifier
       : undefined,
+    customElement,
   })
 
   if (!options.isProduction && resolved?.deps) {

packages/plugin-vue/src/template.ts

@@ -17,11 +17,19 @@ export async function transformTemplateAsModule(
   options: ResolvedOptions,
   pluginContext: TransformPluginContext,
   ssr: boolean,
+  customElement: boolean,
 ): Promise<{
   code: string
   map: any
 }> {
-  const result = compile(code, descriptor, options, pluginContext, ssr)
+  const result = compile(
+    code,
+    descriptor,
+    options,
+    pluginContext,
+    ssr,
+    customElement,
+  )
 
   let returnCode = result.code
   if (
@@ -50,8 +58,16 @@ export function transformTemplateInMain(
   options: ResolvedOptions,
   pluginContext: PluginContext,
   ssr: boolean,
+  customElement: boolean,
 ): SFCTemplateCompileResults {
-  const result = compile(code, descriptor, options, pluginContext, ssr)
+  const result = compile(
+    code,
+    descriptor,
+    options,
+    pluginContext,
+    ssr,
+    customElement,
+  )
   return {
     ...result,
     code: result.code.replace(
@@ -68,9 +84,10 @@ export function compile(
   options: ResolvedOptions,
   pluginContext: PluginContext,
   ssr: boolean,
+  customElement: boolean,
 ) {
   const filename = descriptor.filename
-  resolveScript(descriptor, options, ssr)
+  resolveScript(descriptor, options, ssr, customElement)
   const result = options.compiler.compileTemplate({
     ...resolveTemplateCompilerOptions(descriptor, options, ssr)!,
     source: code,