types(defineComponent): DefineComponent refactor

package.json

@@ -79,7 +79,7 @@
     "semver": "^7.3.2",
     "serve": "^12.0.0",
     "ts-jest": "^26.2.0",
-    "typescript": "^4.2.2",
+    "typescript": "^4.4.2",
     "yorkie": "^2.0.0"
   }
 }

packages/compiler-core/__tests__/transforms/vSlot.spec.ts

@@ -780,9 +780,7 @@ describe('compiler: transform component slots', () => {
     })
 
     test('<slot w/ nested component>', () => {
-      const { slots } = parseWithSlots(
-        `<Comp><Comp><slot/></Comp></Comp>`
-      )
+      const { slots } = parseWithSlots(`<Comp><Comp><slot/></Comp></Comp>`)
       expect(slots).toMatchObject(toMatch)
     })
   })

packages/compiler-sfc/src/cssVars.ts

@@ -12,7 +12,8 @@ import { PluginCreator } from 'postcss'
 import hash from 'hash-sum'
 
 export const CSS_VARS_HELPER = `useCssVars`
-export const cssVarRE = /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g
+export const cssVarRE =
+  /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g
 
 export function genCssVarsFromList(
   vars: string[],

packages/runtime-core/src/apiDefineComponent.ts

@@ -11,7 +11,10 @@ import {
 import {
   SetupContext,
   AllowedComponentProps,
-  ComponentCustomProps
+  ComponentCustomProps,
+  Component,
+  GlobalDirectives,
+  GlobalComponents
 } from './component'
 import {
   ExtractPropTypes,
@@ -25,11 +28,17 @@ import {
   CreateComponentPublicInstance,
   ComponentPublicInstanceConstructor
 } from './componentPublicInstance'
+import { Slots } from './componentSlots'
+import { Directive } from './directives'
 
 export type PublicProps = VNodeProps &
   AllowedComponentProps &
   ComponentCustomProps
 
+type FixS<T extends EmitsOptions> = T extends string[]
+  ? Record<T[number], null>
+  : T
+
 export type DefineComponent<
   PropsOrPropOptions = {},
   RawBindings = {},
@@ -38,10 +47,14 @@ export type DefineComponent<
   M extends MethodOptions = MethodOptions,
   Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
   Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
-  E extends EmitsOptions = Record<string, any>,
+  E extends EmitsOptions = {},
   EE extends string = string,
+  S = any,
+  LC extends Record<string, Component> = {},
+  Directives extends Record<string, Directive> = {},
+  Exposed extends string = string,
   PP = PublicProps,
-  Props = Readonly<ExtractPropTypes<PropsOrPropOptions>> & EmitsToProps<E>,
+  Props = Readonly<ExtractPropTypes<PropsOrPropOptions>>,
   Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>
 > = ComponentPublicInstanceConstructor<
   CreateComponentPublicInstance<
@@ -52,14 +65,19 @@ export type DefineComponent<
     M,
     Mixin,
     Extends,
-    E,
+    FixS<E>,
+    S,
     PP & Props,
     Defaults,
-    true
+    true,
+    LC & GlobalComponents,
+    Directives & GlobalDirectives,
+    Exposed
   > &
-    Props
-> &
-  ComponentOptionsBase<
+    Readonly<ExtractPropTypes<PropsOrPropOptions>>
+> & /**
+ * just typescript
+ */ { __isDefineComponent?: true } & ComponentOptionsBase<
     Props,
     RawBindings,
     D,
@@ -69,6 +87,10 @@ export type DefineComponent<
     Extends,
     E,
     EE,
+    S,
+    LC & GlobalComponents,
+    Directives & GlobalDirectives,
+    Exposed,
     Defaults
   > &
   PP
@@ -80,12 +102,17 @@ export type DefineComponent<
 
 // overload 1: direct setup function
 // (uses user defined props interface)
-export function defineComponent<Props, RawBindings = object>(
+export function defineComponent<
+  Props,
+  RawBindings = object,
+  E extends EmitsOptions = {},
+  S = {}
+>(
   setup: (
     props: Readonly<Props>,
-    ctx: SetupContext
+    ctx: SetupContext<E, Slots<S>>
   ) => RawBindings | RenderFunction
-): DefineComponent<Props, RawBindings>
+): DefineComponent<Props, RawBindings, {}, any, any, any, any, any, string, S>
 
 // overload 2: object format with no props
 // (uses user defined props interface)
@@ -99,7 +126,11 @@ export function defineComponent<
   Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
   Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
   E extends EmitsOptions = EmitsOptions,
-  EE extends string = string
+  EE extends string = string,
+  S = any,
+  LC extends Record<string, Component> = {},
+  Directives extends Record<string, Directive> = {},
+  Exposed extends string = string
 >(
   options: ComponentOptionsWithoutProps<
     Props,
@@ -110,9 +141,27 @@ export function defineComponent<
     Mixin,
     Extends,
     E,
-    EE
+    EE,
+    S,
+    LC,
+    Directives,
+    Exposed
   >
-): DefineComponent<Props, RawBindings, D, C, M, Mixin, Extends, E, EE>
+): DefineComponent<
+  Props,
+  RawBindings,
+  D,
+  C,
+  M,
+  Mixin,
+  Extends,
+  E,
+  EE,
+  S,
+  LC,
+  Directives,
+  Exposed
+>
 
 // overload 3: object format with array props declaration
 // props inferred as { [key in PropNames]?: any }
@@ -125,8 +174,12 @@ export function defineComponent<
   M extends MethodOptions = {},
   Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
   Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
-  E extends EmitsOptions = Record<string, any>,
-  EE extends string = string
+  E extends EmitsOptions = {},
+  EE extends string = string,
+  S = any,
+  LC extends Record<string, Component> = {},
+  Directives extends Record<string, Directive> = {},
+  Exposed extends string = string
 >(
   options: ComponentOptionsWithArrayProps<
     PropNames,
@@ -137,7 +190,11 @@ export function defineComponent<
     Mixin,
     Extends,
     E,
-    EE
+    EE,
+    S,
+    LC,
+    Directives,
+    Exposed
   >
 ): DefineComponent<
   Readonly<{ [key in PropNames]?: any }>,
@@ -148,7 +205,11 @@ export function defineComponent<
   Mixin,
   Extends,
   E,
-  EE
+  EE,
+  S,
+  LC,
+  Directives,
+  Exposed
 >
 
 // overload 4: object format with object props declaration
@@ -163,8 +224,14 @@ export function defineComponent<
   M extends MethodOptions = {},
   Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
   Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
-  E extends EmitsOptions = Record<string, any>,
-  EE extends string = string
+  E extends EmitsOptions = {},
+  EE extends string = string,
+  S = any,
+  LC extends Record<string, Component> = {},
+  Directives extends Record<string, Directive> = {},
+  Exposed extends string = string,
+  Props = Readonly<ExtractPropTypes<PropsOptions>>,
+  Defaults = ExtractDefaultPropTypes<PropsOptions>
 >(
   options: ComponentOptionsWithObjectProps<
     PropsOptions,
@@ -175,9 +242,31 @@ export function defineComponent<
     Mixin,
     Extends,
     E,
-    EE
+    EE,
+    S,
+    LC,
+    Directives,
+    Exposed,
+    Props,
+    Defaults
   >
-): DefineComponent<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>
+): DefineComponent<
+  PropsOptions,
+  RawBindings,
+  D,
+  C,
+  M,
+  Mixin,
+  Extends,
+  E,
+  EE,
+  S,
+  LC,
+  Directives,
+  Exposed,
+  Props,
+  Defaults
+>
 
 // implementation, close to no-op
 export function defineComponent(options: unknown) {

packages/runtime-core/src/compat/componentFunctional.ts

@@ -13,7 +13,9 @@ const normalizedFunctionalComponentMap = new Map<
   FunctionalComponent
 >()
 
-export const legacySlotProxyHandlers: ProxyHandler<InternalSlots> = {
+export const legacySlotProxyHandlers: ProxyHandler<
+  InternalSlots<Record<string, null>>
+> = {
   get(target, key: string) {
     const slot = target[key]
     return slot && slot()

packages/runtime-core/src/component.ts

@@ -33,6 +33,7 @@ import { Directive, validateDirectiveName } from './directives'
 import {
   applyOptions,
   ComponentOptions,
+  ComponentOptionsMixin,
   ComputedOptions,
   MethodOptions
 } from './componentOptions'
@@ -70,6 +71,40 @@ export type Data = Record<string, unknown>
  */
 export interface ComponentCustomProps {}
 
+/**
+ * For globally defined Directives
+ * Here is an example of adding a directive `VTooltip` as global directive:
+ *
+ * @example
+ * ```ts
+ * import VTooltip from 'v-tooltip'
+ *
+ * declare module '@vue/runtime-core' {
+ *   interface GlobalDirectives {
+ *     VTooltip
+ *   }
+ * }
+ * ```
+ */
+export interface GlobalDirectives extends Record<string, Directive> {}
+
+/**
+ * For globally defined Components
+ * Here is an example of adding a component `RouterView` as global component:
+ *
+ * @example
+ * ```ts
+ * import { RouterView } from 'vue-router'
+ *
+ * declare module '@vue/runtime-core' {
+ *   interface GlobalComponents {
+ *     RouterView
+ *   }
+ * }
+ * ```
+ */
+export interface GlobalComponents extends Record<string, Component> {}
+
 /**
  * Default allowed non-declared props on component in TSX
  */
@@ -103,10 +138,13 @@ export interface ComponentInternalOptions {
   __file?: string
 }
 
-export interface FunctionalComponent<P = {}, E extends EmitsOptions = {}>
-  extends ComponentInternalOptions {
+export interface FunctionalComponent<
+  P = {},
+  E extends EmitsOptions = {},
+  S extends Slots = Slots
+> extends ComponentInternalOptions {
   // use of any here is intentional so it can be a valid JSX Element constructor
-  (props: P, ctx: Omit<SetupContext<E>, 'expose'>): any
+  (props: P, ctx: Omit<SetupContext<E, P, S>, 'expose'>): any
   props?: ComponentPropsOptions<P>
   emits?: E | (keyof E)[]
   inheritAttrs?: boolean
@@ -129,10 +167,13 @@ export type ConcreteComponent<
   RawBindings = any,
   D = any,
   C extends ComputedOptions = ComputedOptions,
-  M extends MethodOptions = MethodOptions
+  M extends MethodOptions = MethodOptions,
+  Mixin extends ComponentOptionsMixin = any,
+  Extends extends ComponentOptionsMixin = any,
+  E extends EmitsOptions = any
 > =
-  | ComponentOptions<Props, RawBindings, D, C, M>
-  | FunctionalComponent<Props, any>
+  | ComponentOptions<Props, RawBindings, D, C, M, Mixin, Extends, E>
+  | FunctionalComponent<Props, E>
 
 /**
  * A type used in public APIs where a component type is expected.
@@ -169,10 +210,14 @@ export const enum LifecycleHooks {
   SERVER_PREFETCH = 'sp'
 }
 
-export interface SetupContext<E = EmitsOptions> {
+export interface SetupContext<
+  E = EmitsOptions,
+  P = {},
+  S extends Slots = Slots
+> {
   attrs: Data
-  slots: Slots
-  emit: EmitFn<E>
+  slots: S
+  emit: EmitFn<E, P>
   expose: (exposed?: Record<string, any>) => void
 }