feat(compiler-sfc): support intersection and union types in macros

close vuejs#7553

packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineEmits.spec.ts.snap

@@ -191,6 +191,22 @@ export default /*#__PURE__*/_defineComponent({
 
     
     
+return { emit }
+}
+
+})"
+`;
+
+exports[`defineEmits > w/ type (union) 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  emits: [\\"foo\\", \\"bar\\", \\"baz\\"],
+  setup(__props, { expose: __expose, emit }) {
+  __expose();
+
+    
+    
 return { emit }
 }
 

packages/compiler-sfc/__tests__/compileScript/defineEmits.spec.ts

@@ -47,13 +47,13 @@ const emit = defineEmits(['a', 'b'])
 
   test('w/ type (union)', () => {
     const type = `((e: 'foo' | 'bar') => void) | ((e: 'baz', id: number) => void)`
-    expect(() =>
-      compile(`
+    const { content } = compile(`
     <script setup lang="ts">
     const emit = defineEmits<${type}>()
     </script>
     `)
-    ).toThrow()
+    assertCode(content)
+    expect(content).toMatch(`emits: ["foo", "bar", "baz"]`)
   })
 
   test('w/ type (type literal w/ call signatures)', () => {

packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts

@@ -0,0 +1,179 @@
+import { TSTypeAliasDeclaration } from '@babel/types'
+import { parse } from '../../src'
+import { ScriptCompileContext } from '../../src/script/context'
+import {
+  inferRuntimeType,
+  resolveTypeElements
+} from '../../src/script/resolveType'
+
+describe('resolveType', () => {
+  test('type literal', () => {
+    const { elements, callSignatures } = resolve(`type Target = {
+      foo: number // property
+      bar(): void // method
+      'baz': string // string literal key
+      (e: 'foo'): void // call signature
+      (e: 'bar'): void
+    }`)
+    expect(elements).toStrictEqual({
+      foo: ['Number'],
+      bar: ['Function'],
+      baz: ['String']
+    })
+    expect(callSignatures?.length).toBe(2)
+  })
+
+  test('reference type', () => {
+    expect(
+      resolve(`
+    type Aliased = { foo: number }
+    type Target = Aliased
+    `).elements
+    ).toStrictEqual({
+      foo: ['Number']
+    })
+  })
+
+  test('reference exported type', () => {
+    expect(
+      resolve(`
+    export type Aliased = { foo: number }
+    type Target = Aliased
+    `).elements
+    ).toStrictEqual({
+      foo: ['Number']
+    })
+  })
+
+  test('reference interface', () => {
+    expect(
+      resolve(`
+    interface Aliased { foo: number }
+    type Target = Aliased
+    `).elements
+    ).toStrictEqual({
+      foo: ['Number']
+    })
+  })
+
+  test('reference exported interface', () => {
+    expect(
+      resolve(`
+    export interface Aliased { foo: number }
+    type Target = Aliased
+    `).elements
+    ).toStrictEqual({
+      foo: ['Number']
+    })
+  })
+
+  test('reference interface extends', () => {
+    expect(
+      resolve(`
+    export interface A { a(): void }
+    export interface B extends A { b: boolean }
+    interface C { c: string }
+    interface Aliased extends B, C { foo: number }
+    type Target = Aliased
+    `).elements
+    ).toStrictEqual({
+      a: ['Function'],
+      b: ['Boolean'],
+      c: ['String'],
+      foo: ['Number']
+    })
+  })
+
+  test('function type', () => {
+    expect(
+      resolve(`
+    type Target = (e: 'foo') => void
+    `).callSignatures?.length
+    ).toBe(1)
+  })
+
+  test('reference function type', () => {
+    expect(
+      resolve(`
+    type Fn = (e: 'foo') => void
+    type Target = Fn
+    `).callSignatures?.length
+    ).toBe(1)
+  })
+
+  test('intersection type', () => {
+    expect(
+      resolve(`
+    type Foo = { foo: number }
+    type Bar = { bar: string }
+    type Baz = { bar: string | boolean }
+    type Target = { self: any } & Foo & Bar & Baz
+    `).elements
+    ).toStrictEqual({
+      self: ['Unknown'],
+      foo: ['Number'],
+      // both Bar & Baz has 'bar', but Baz['bar] is wider so it should be
+      // preferred
+      bar: ['String', 'Boolean']
+    })
+  })
+
+  // #7553
+  test('union type', () => {
+    expect(
+      resolve(`
+    interface CommonProps {
+      size?: 'xl' | 'l' | 'm' | 's' | 'xs'
+    }
+
+    type ConditionalProps =
+      | {
+          color: 'normal' | 'primary' | 'secondary'
+          appearance: 'normal' | 'outline' | 'text'
+        }
+      | {
+          color: number
+          appearance: 'outline'
+          note: string
+        }
+
+    type Target = CommonProps & ConditionalProps
+    `).elements
+    ).toStrictEqual({
+      size: ['String'],
+      color: ['String', 'Number'],
+      appearance: ['String'],
+      note: ['String']
+    })
+  })
+
+  // describe('built-in utility types', () => {
+
+  // })
+
+  describe('errors', () => {
+    test('error on computed keys', () => {
+      expect(() => resolve(`type Target = { [Foo]: string }`)).toThrow(
+        `computed keys are not supported in types referenced by SFC macros`
+      )
+    })
+  })
+})
+
+function resolve(code: string) {
+  const { descriptor } = parse(`<script setup lang="ts">${code}</script>`)
+  const ctx = new ScriptCompileContext(descriptor, { id: 'test' })
+  const targetDecl = ctx.scriptSetupAst!.body.find(
+    s => s.type === 'TSTypeAliasDeclaration' && s.id.name === 'Target'
+  ) as TSTypeAliasDeclaration
+  const raw = resolveTypeElements(ctx, targetDecl.typeAnnotation)
+  const elements: Record<string, string[]> = {}
+  for (const key in raw) {
+    elements[key] = inferRuntimeType(ctx, raw[key])
+  }
+  return {
+    elements,
+    callSignatures: raw.__callSignatures,
+    raw
+  }
+}

packages/compiler-sfc/src/script/defineProps.ts

@@ -193,20 +193,15 @@ function resolveRuntimePropsFromType(
   const elements = resolveTypeElements(ctx, node)
   for (const key in elements) {
     const e = elements[key]
-    let type: string[] | undefined
+    let type = inferRuntimeType(ctx, e)
     let skipCheck = false
-    if (e.type === 'TSMethodSignature') {
-      type = ['Function']
-    } else if (e.typeAnnotation) {
-      type = inferRuntimeType(ctx, e.typeAnnotation.typeAnnotation)
-      // skip check for result containing unknown types
-      if (type.includes(UNKNOWN_TYPE)) {
-        if (type.includes('Boolean') || type.includes('Function')) {
-          type = type.filter(t => t !== UNKNOWN_TYPE)
-          skipCheck = true
-        } else {
-          type = ['null']
-        }
+    // skip check for result containing unknown types
+    if (type.includes(UNKNOWN_TYPE)) {
+      if (type.includes('Boolean') || type.includes('Function')) {
+        type = type.filter(t => t !== UNKNOWN_TYPE)
+        skipCheck = true
+      } else {
+        type = ['null']
       }
     }
     props.push({

packages/compiler-sfc/src/script/resolveType.ts

@@ -16,7 +16,8 @@ import { UNKNOWN_TYPE } from './utils'
 import { ScriptCompileContext } from './context'
 import { ImportBinding } from '../compileScript'
 import { TSInterfaceDeclaration } from '@babel/types'
-import { hasOwn } from '@vue/shared'
+import { hasOwn, isArray } from '@vue/shared'
+import { Expression } from '@babel/types'
 
 export interface TypeScope {
   filename: string
@@ -63,24 +64,37 @@ function innerResolveTypeElements(
       addCallSignature(ret, node)
       return ret
     }
-    case 'TSExpressionWithTypeArguments':
+    case 'TSExpressionWithTypeArguments': // referenced by interface extends
     case 'TSTypeReference':
       return resolveTypeElements(ctx, resolveTypeReference(ctx, node))
+    case 'TSUnionType':
+    case 'TSIntersectionType':
+      return mergeElements(
+        node.types.map(t => resolveTypeElements(ctx, t)),
+        node.type
+      )
   }
   ctx.error(`Unsupported type in SFC macro: ${node.type}`, node)
 }
 
 function addCallSignature(
   elements: ResolvedElements,
-  node: TSCallSignatureDeclaration | TSFunctionType
+  node:
+    | TSCallSignatureDeclaration
+    | TSFunctionType
+    | (TSCallSignatureDeclaration | TSFunctionType)[]
 ) {
   if (!elements.__callSignatures) {
     Object.defineProperty(elements, '__callSignatures', {
       enumerable: false,
-      value: [node]
+      value: isArray(node) ? node : [node]
     })
   } else {
-    elements.__callSignatures.push(node)
+    if (isArray(node)) {
+      elements.__callSignatures.push(...node)
+    } else {
+      elements.__callSignatures.push(node)
+    }
   }
 }
 
@@ -112,6 +126,45 @@ function typeElementsToMap(
   return ret
 }
 
+function mergeElements(
+  maps: ResolvedElements[],
+  type: 'TSUnionType' | 'TSIntersectionType'
+): ResolvedElements {
+  const res: ResolvedElements = Object.create(null)
+  for (const m of maps) {
+    for (const key in m) {
+      if (!(key in res)) {
+        res[key] = m[key]
+      } else {
+        res[key] = createProperty(res[key].key, type, [res[key], m[key]])
+      }
+    }
+    if (m.__callSignatures) {
+      addCallSignature(res, m.__callSignatures)
+    }
+  }
+  return res
+}
+
+function createProperty(
+  key: Expression,
+  type: 'TSUnionType' | 'TSIntersectionType',
+  types: Node[]
+): TSPropertySignature {
+  return {
+    type: 'TSPropertySignature',
+    key,
+    kind: 'get',
+    typeAnnotation: {
+      type: 'TSTypeAnnotation',
+      typeAnnotation: {
+        type,
+        types: types as TSType[]
+      }
+    }
+  }
+}
+
 function resolveInterfaceMembers(
   ctx: ScriptCompileContext,
   node: TSInterfaceDeclaration
@@ -252,6 +305,11 @@ export function inferRuntimeType(
       }
       return types.size ? Array.from(types) : ['Object']
     }
+    case 'TSPropertySignature':
+      if (node.typeAnnotation) {
+        return inferRuntimeType(ctx, node.typeAnnotation.typeAnnotation)
+      }
+    case 'TSMethodSignature':
     case 'TSFunctionType':
       return ['Function']
     case 'TSArrayType':