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

Co-authored-by: 三咲智子 Kevin Deng <[email protected]>

Author: baiwusanyu-c

packages/plugin-vue/src/index.ts

@@ -261,6 +261,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
             options.value,
             this,
             ssr,
+            customElementFilter.value(filename),
           )
         } else if (query.type === 'style') {
           return transformStyle(

packages/plugin-vue/src/main.ts

@@ -33,7 +33,7 @@ export async function transformMain(
   options: ResolvedOptions,
   pluginContext: TransformPluginContext,
   ssr: boolean,
-  asCustomElement: boolean,
+  customElement: boolean,
 ) {
   const { devServer, isProduction, devToolsEnabled } = options
 
@@ -74,6 +74,7 @@ export async function transformMain(
     options,
     pluginContext,
     ssr,
+    customElement,
   )
 
   // template
@@ -88,6 +89,7 @@ export async function transformMain(
       options,
       pluginContext,
       ssr,
+      customElement,
     ))
   }
 
@@ -110,7 +112,7 @@ export async function transformMain(
   const stylesCode = await genStyleCode(
     descriptor,
     pluginContext,
-    asCustomElement,
+    customElement,
     attachedProps,
   )
 
@@ -275,6 +277,7 @@ async function genTemplateCode(
   options: ResolvedOptions,
   pluginContext: PluginContext,
   ssr: boolean,
+  customElement: boolean,
 ) {
   const template = descriptor.template!
   const hasScoped = descriptor.styles.some((style) => style.scoped)
@@ -289,6 +292,7 @@ async function genTemplateCode(
       options,
       pluginContext,
       ssr,
+      customElement,
     )
   } else {
     if (template.src) {
@@ -322,14 +326,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.
@@ -376,7 +381,7 @@ async function genScriptCode(
 async function genStyleCode(
   descriptor: SFCDescriptor,
   pluginContext: PluginContext,
-  asCustomElement: boolean,
+  customElement: boolean,
   attachedProps: [string, string][],
 ) {
   let stylesCode = ``
@@ -401,12 +406,12 @@ async function genStyleCode(
           ? `&src=${descriptor.id}`
           : '&src=true'
         : ''
-      const directQuery = asCustomElement ? `&inline` : ``
+      const directQuery = customElement ? `&inline` : ``
       const scopedQuery = style.scoped ? `&scoped=${descriptor.id}` : ``
       const query = `?vue&type=style&index=${i}${srcQuery}${directQuery}${scopedQuery}`
       const styleRequest = src + query + attrsQuery
       if (style.module) {
-        if (asCustomElement) {
+        if (customElement) {
           throw new Error(
             `<style module> is not supported in custom elements mode.`,
           )
@@ -419,7 +424,7 @@ async function genStyleCode(
         stylesCode += importCode
         Object.assign((cssModulesMap ||= {}), nameMap)
       } else {
-        if (asCustomElement) {
+        if (customElement) {
           stylesCode += `\nimport _style_${i} from ${JSON.stringify(
             styleRequest,
           )}`
@@ -429,7 +434,7 @@ async function genStyleCode(
       }
       // TODO SSR critical CSS collection
     }
-    if (asCustomElement) {
+    if (customElement) {
       attachedProps.push([
         `styles`,
         `[${descriptor.styles.map((_, i) => `_style_${i}`).join(',')}]`,

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
@@ -70,6 +71,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,