feat: add customElement option to compiler

ref: vitejs/vite-plugin-vue@99564d5

Author: sxzz

src/core/handleHotUpdate.ts

@@ -27,6 +27,7 @@ const directRequestRE = /[&?]direct\b/
 export async function handleHotUpdate(
   { file, modules, read }: HmrContext,
   options: ResolvedOptions,
+  customElement: boolean,
 ): Promise<ModuleNode[] | undefined> {
   const prevDescriptor = getDescriptor(file, options, false, true)
   if (!prevDescriptor) {
@@ -43,7 +44,7 @@ export async function handleHotUpdate(
   const templateModule = modules.find((m) => /type=template/.test(m.url))
 
   // trigger resolveScript for descriptor so that we'll have the AST ready
-  resolveScript('vite', descriptor, options, false)
+  resolveScript('vite', descriptor, options, false, customElement)
   const scriptChanged = hasScriptChanged(prevDescriptor, descriptor)
   if (scriptChanged) {
     affectedModules.add(getScriptModule(modules) || mainModule)

src/core/index.ts

@@ -162,7 +162,11 @@ export const plugin = createUnplugin<Options | undefined, false>(
             return handleTypeDepChange(typeDepToSFCMap.get(ctx.file)!, ctx)
           }
           if (filter.value(ctx.file)) {
-            return handleHotUpdate(ctx, options.value)
+            return handleHotUpdate(
+              ctx,
+              options.value,
+              customElementFilter.value(ctx.file),
+            )
           }
         },
 
@@ -308,6 +312,7 @@ export const plugin = createUnplugin<Options | undefined, false>(
               options.value,
               context,
               ssr,
+              customElementFilter.value(filename),
             )
           } else if (query.type === 'style') {
             return transformStyle(

src/core/main.ts

@@ -39,7 +39,7 @@ export async function transformMain(
   options: ResolvedOptions,
   pluginContext: Context,
   ssr: boolean,
-  asCustomElement: boolean,
+  customElement: boolean,
 ) {
   const { devServer, isProduction, devToolsEnabled } = options
 
@@ -80,6 +80,7 @@ export async function transformMain(
     options,
     pluginContext,
     ssr,
+    customElement,
   )
 
   // template
@@ -94,6 +95,7 @@ export async function transformMain(
       options,
       pluginContext,
       ssr,
+      customElement,
     ))
   }
 
@@ -114,7 +116,7 @@ export async function transformMain(
   const stylesCode = await genStyleCode(
     descriptor,
     pluginContext,
-    asCustomElement,
+    customElement,
     attachedProps,
   )
 
@@ -279,6 +281,7 @@ async function genTemplateCode(
   options: ResolvedOptions,
   pluginContext: Context,
   ssr: boolean,
+  customElement: boolean,
 ) {
   const template = descriptor.template!
   const hasScoped = descriptor.styles.some((style) => style.scoped)
@@ -293,6 +296,7 @@ async function genTemplateCode(
       options,
       pluginContext,
       ssr,
+      customElement,
     )
   } else {
     if (template.src) {
@@ -326,6 +330,7 @@ async function genScriptCode(
   options: ResolvedOptions,
   pluginContext: Context,
   ssr: boolean,
+  customElement: boolean,
 ): Promise<{
   code: string
   map: RawSourceMap | undefined
@@ -338,6 +343,7 @@ async function genScriptCode(
     descriptor,
     options,
     ssr,
+    customElement,
   )
   if (script) {
     // If the script is js/ts and has no external src, it can be directly placed
@@ -385,7 +391,7 @@ async function genScriptCode(
 async function genStyleCode(
   descriptor: SFCDescriptor,
   pluginContext: Context,
-  asCustomElement: boolean,
+  customElement: boolean,
   attachedProps: [string, string][],
 ) {
   let stylesCode = ``
@@ -410,12 +416,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.`,
           )
@@ -427,7 +433,7 @@ async function genStyleCode(
         )
         stylesCode += importCode
         Object.assign((cssModulesMap ||= {}), nameMap)
-      } else if (asCustomElement) {
+      } else if (customElement) {
         stylesCode += `\nimport _style_${i} from ${JSON.stringify(
           styleRequest,
         )}`
@@ -436,7 +442,7 @@ async function genStyleCode(
       }
       // TODO SSR critical CSS collection
     }
-    if (asCustomElement) {
+    if (customElement) {
       attachedProps.push([
         `styles`,
         `[${descriptor.styles.map((_, i) => `_style_${i}`).join(',')}]`,

src/core/script.ts

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

src/core/template.ts

@@ -17,11 +17,19 @@ export async function transformTemplateAsModule(
   options: ResolvedOptions,
   pluginContext: Context,
   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: Context,
   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(
@@ -67,9 +83,16 @@ export function compile(
   options: ResolvedOptions,
   pluginContext: Context,
   ssr: boolean,
+  customElement: boolean,
 ) {
   const filename = descriptor.filename
-  resolveScript(pluginContext.framework, descriptor, options, ssr)
+  resolveScript(
+    pluginContext.framework,
+    descriptor,
+    options,
+    ssr,
+    customElement,
+  )
   const result = options.compiler.compileTemplate({
     ...resolveTemplateCompilerOptions(descriptor, options, ssr)!,
     source: code,