feat: resolve components from <script setup>

Author: yyx990803

packages/compiler-sfc/src/compileTemplate.ts

@@ -132,6 +132,7 @@ function actuallyCompile(
       filename: options.filename
     })
   }
+  finalCompilerOptions.bindings = bindings
 
   const { ast, render, staticRenderFns, tips, errors } = compile(
     source,

packages/compiler-sfc/src/types.ts

@@ -1,4 +1,4 @@
-import { WarningMessage } from 'types/compiler'
+import { CompilerOptions, CompiledResult } from 'types/compiler'
 import { SFCDescriptor } from './parseComponent'
 
 export interface StartOfSourceMap {
@@ -31,20 +31,9 @@ export interface VueTemplateCompiler {
 // we'll just shim this much for now - in the future these types
 // should come from vue-template-compiler directly, or this package should be
 // part of the vue monorepo.
-export interface VueTemplateCompilerOptions {
-  modules?: Object[]
-  outputSourceRange?: boolean
-  whitespace?: 'preserve' | 'condense'
-  directives?: { [key: string]: Function }
-}
+export type VueTemplateCompilerOptions = CompilerOptions
 
-export interface VueTemplateCompilerResults {
-  ast: Object | undefined
-  render: string
-  staticRenderFns: string[]
-  errors: (string | WarningMessage)[]
-  tips: (string | WarningMessage)[]
-}
+export type VueTemplateCompilerResults = CompiledResult
 
 export const enum BindingTypes {
   /**

src/compiler/codegen/index.ts

@@ -1,6 +1,6 @@
 import { genHandlers } from './events'
 import baseDirectives from '../directives/index'
-import { camelize, no, extend } from 'shared/util'
+import { camelize, no, extend, capitalize } from 'shared/util'
 import { baseWarn, pluckModuleFunction } from '../helpers'
 import { emptySlotScopeToken } from '../parser/index'
 import {
@@ -13,6 +13,7 @@ import {
   ASTText,
   CompilerOptions
 } from 'types/compiler'
+import { BindingMetadata } from 'sfc/types'
 
 type TransformFunction = (el: ASTElement, code: string) => string
 type DataGenFunction = (el: ASTElement) => string
@@ -98,8 +99,19 @@ export function genElement(el: ASTElement, state: CodegenState): string {
         data = genData(el, state)
       }
 
+      let tag: string | undefined
+      // check if this is a component in <script setup>
+      const bindings = state.options.bindings
+      if (bindings && !bindings.__isScriptSetup) {
+        tag =
+          checkBindingType(bindings, el.tag) ||
+          checkBindingType(bindings, camelize(el.tag)) ||
+          checkBindingType(bindings, capitalize(camelize(el.tag)))
+      }
+      if (!tag) tag = `'${el.tag}'`
+
       const children = el.inlineTemplate ? null : genChildren(el, state, true)
-      code = `_c('${el.tag}'${
+      code = `_c(${tag}${
         data ? `,${data}` : '' // data
       }${
         children ? `,${children}` : '' // children
@@ -113,6 +125,13 @@ export function genElement(el: ASTElement, state: CodegenState): string {
   }
 }
 
+function checkBindingType(bindings: BindingMetadata, key: string) {
+  const type = bindings[key]
+  if (type && type.startsWith('setup')) {
+    return key
+  }
+}
+
 // hoist static sub-trees out
 function genStatic(el: ASTElement, state: CodegenState): string {
   el.staticProcessed = true

src/types/compiler.ts

@@ -31,7 +31,8 @@ export type CompilerOptions = {
   // for ssr optimization compiler
   scopeId?: string
 
-  bindingMetadata?: BindingMetadata
+  // SFC analyzed script bindings from `compileScript()`
+  bindings?: BindingMetadata
 }
 
 export type WarningMessage = {