add Extract component Options

vuejs · pikax · Nov 6, 2023 · Nov 6, 2023 · Nov 6, 2023 · Nov 6, 2023
commit e7c0383e28a649c8782e8c66800196f70de0811f
diff --git a/packages/dts-test/componentTypeHelpers.test-d.ts b/packages/dts-test/componentTypeHelpers.test-d.ts
@@ -1,30 +1,154 @@
-// import { expectType, describe } from './utils'
+import { expectType, describe } from './utils'
 
-// import {
-//   ExtractComponentOptions,
-//   ExtractComponentSlots,
-//   ExtractComponentEmits,
-//   defineComponent
-// } from 'vue'
+import {
+  ExtractComponentOptions,
+  ExtractComponentSlots,
+  ExtractComponentEmits,
+  defineComponent,
+  defineAsyncComponent
+} from 'vue'
 
-// describe('Extract Component Options', () => {
-//   describe('define Component', () => {
-//     // const comp = {
-//     //   props: ['bar']
-//     // } as const
+declare function extractComponentOptions<T>(comp: T): ExtractComponentOptions<T>
 
-//     const Comp = defineComponent({
-//       props: ['bar']
-//     })
+declare function extractComponentSlots<T>(comp: T): ExtractComponentSlots<T>
+describe('Extract Component Options', () => {
+  describe('defineComponent', () => {
+    const propsOptions = {
+      props: {
+        a: String,
+        b: Boolean,
 
-//     const a = {} as unknown as ExtractComponentOptions<typeof Comp>
+        bb: {
+          type: Boolean,
+          required: true
+        }
+      },
+      slots: {
+        default(arg: { msg: string }) {}
+      },
+      foo: 'bar',
+      data() {
+        return {
+          test: 1
+        }
+      }
+    }
+    // Component with props
+    const CompProps = defineComponent(propsOptions)
+    expectType<ExtractComponentOptions<typeof CompProps>>(propsOptions)
+    // @ts-expect-error checking if is not any
+    expectType<ExtractComponentOptions<typeof CompProps>>({ bar: 'foo' })
 
-//     a.props
+    // component array props
+    const arrayOptions = {
+      props: ['a', 'b', 'c'],
+      slots: {
+        default(arg: { msg: string }) {}
+      },
+      foo: 'bar',
+      data() {
+        return {
+          test: 1
+        }
+      }
+    }
+    const CompPropsArray = defineComponent(arrayOptions)
+    expectType<ExtractComponentOptions<typeof CompPropsArray>>(arrayOptions)
+    // @ts-expect-error checking if is not any
+    expectType<ExtractComponentOptions<typeof CompPropsArray>>({ bar: 'foo' })
 
-//     // expectType<ExtractComponentOptions<typeof Comp>>(comp)
-//   })
+    // component no props
+    const noPropsOptions = {
+      slots: {
+        default(arg: { msg: string }) {}
+      },
+      foo: 'bar',
+      data() {
+        return {
+          test: 1
+        }
+      }
+    }
+    const CompNoProps = defineComponent(noPropsOptions)
+    expectType<ExtractComponentOptions<typeof CompNoProps>>(noPropsOptions)
+    // @ts-expect-error checking if is not any
+    expectType<ExtractComponentOptions<typeof CompNoProps>>({ bar: 'foo' })
+  })
 
-//   describe('async component', () => {})
+  describe('async component', () => {
+    const Component = defineAsyncComponent({
+      loader: () =>
+        Promise.resolve(
+          defineComponent({
+            foo: 'bar'
+          })
+        )
+    })
 
-//   describe('options object', () => {})
-// })
+    // NOTE not sure if this is the intention since Component.foo is undefined
+    expectType<ExtractComponentOptions<typeof Component>>({
+      foo: 'bar'
+    })
+  })
+
+  describe('options object', () => {
+    const propsOptions = {
+      props: {
+        a: String,
+        b: Boolean,
+
+        bb: {
+          type: Boolean,
+          required: true
+        }
+      },
+      slots: {
+        default(arg: { msg: string }) {}
+      },
+      foo: 'bar',
+      data() {
+        return {
+          test: 1
+        }
+      }
+    }
+
+    // Component with props
+    expectType<ExtractComponentOptions<typeof propsOptions>>(propsOptions)
+    // @ts-expect-error checking if is not any
+    expectType<ExtractComponentOptions<typeof propsOptions>>({ bar: 'foo' })
+
+    // component array props
+    const arrayOptions = {
+      props: ['a', 'b', 'c'],
+      slots: {
+        default(arg: { msg: string }) {}
+      },
+      foo: 'bar',
+      data() {
+        return {
+          test: 1
+        }
+      }
+    }
+    expectType<ExtractComponentOptions<typeof arrayOptions>>(arrayOptions)
+    // @ts-expect-error checking if is not any
+    expectType<ExtractComponentOptions<typeof arrayOptions>>({ bar: 'foo' })
+
+    // component no props
+    const noPropsOptions = {
+      slots: {
+        default(arg: { msg: string }) {}
+      },
+      foo: 'bar',
+      data() {
+        return {
+          test: 1
+        }
+      }
+    }
+    expectType<ExtractComponentOptions<typeof noPropsOptions>>(noPropsOptions)
+    // @ts-expect-error checking if is not any
+    expectType<ExtractComponentOptions<typeof noPropsOptions>>({ bar: 'foo' })
+  })
+})
diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
@@ -1358,12 +1358,12 @@ describe('function syntax w/ runtime props', () => {
     }
   )
 
+  // @ts-expect-error string prop names don't match
   defineComponent(
     (_props: { msg: string }) => {
       return () => {}
     },
     {
-      // @ts-expect-error string prop names don't match
       props: ['bar']
     }
   )
@@ -1380,14 +1380,14 @@ describe('function syntax w/ runtime props', () => {
     }
   )
 
+  // @ts-expect-error prop keys don't match
   defineComponent(
     (_props: { msg: string }, ctx) => {
       return () => {}
     },
     {
       props: {
         msg: String,
-        // @ts-expect-error prop keys don't match
         bar: String
       }
     }

diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
@@ -41,6 +41,8 @@ type ResolveProps<PropsOrPropOptions, E extends EmitsOptions> = Readonly<
 > &
   ({} extends E ? {} : EmitsToProps<E>)
 
+export declare const RawOptionsSymbol: unique symbol
+
 export type DefineComponent<
   PropsOrPropOptions = {},
   RawBindings = {},
@@ -93,34 +95,16 @@ export type DefineComponent<
       S
     >,
     'props'
-  > & { props: PropsOrPropOptions } & Omit<Options, '__asyncLoader'> &
-  PP
+  > & { props: PropsOrPropOptions } & Omit<Options, 'props'> & {
+    [RawOptionsSymbol]: Options
+  } & PP
 
 // defineComponent is a utility that is primarily used for type inference
 // when declaring components. Type inference is provided in the component
 // options (provided as the argument). The returned value has artificial types
 // for TSX / manual render function / IDE support.
 
 // overload 1: direct setup function
-export function defineComponent<
-  Props extends Record<string, any>,
-  E extends EmitsOptions = {},
-  EE extends string = string,
-  S extends SlotsType = {},
-  Options = {}
->(
-  setup: (
-    props: Props,
-    ctx: SetupContext<E, S>
-  ) => RenderFunction | Promise<RenderFunction>,
-  options?: Options &
-    Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
-      props?: (keyof Props)[]
-      emits?: E | EE[]
-      slots?: S
-    }
-): (props: Props & EmitsToProps<E>) => any
-
 export function defineComponent<
   Props extends Record<string, any>,
   E extends EmitsOptions = {},
@@ -137,54 +121,11 @@ export function defineComponent<
     slots?: S
   }
 ): (props: Props & EmitsToProps<E>) => any
-
-// (uses user defined props interface)
-export function defineComponent<
-  Props extends Record<string, any>,
-  E extends EmitsOptions = {},
-  EE extends string = string,
-  S extends SlotsType = {},
-  Options = {}
->(
-  setup: (
-    props: Props,
-    ctx: SetupContext<E, S>
-  ) => RenderFunction | Promise<RenderFunction>,
-  options?: Options &
-    Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
-      props?: (keyof Props)[]
-      emits?: E | EE[]
-      slots?: S
-    }
-): DefineComponent<
-  Props & EmitsToProps<E>,
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  E,
-  EE,
-  PublicProps,
-  ResolveProps<Props, E>,
-  ExtractDefaultPropTypes<Props>,
-  {},
-  string,
-  S,
-  {
-    name: string
-  } & Options
->
-
-// extend({ name: options.name }, extraOptions, { setup: options }))()
-
 export function defineComponent<
   Props extends Record<string, any>,
   E extends EmitsOptions = {},
   EE extends string = string,
-  S extends SlotsType = {},
-  Options = {}
+  S extends SlotsType = {}
 >(
   setup: (
     props: Props,
@@ -195,26 +136,7 @@ export function defineComponent<
     emits?: E | EE[]
     slots?: S
   }
-): DefineComponent<
-  Props & EmitsToProps<E>,
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  E,
-  EE,
-  PublicProps,
-  ResolveProps<Props, E>,
-  ExtractDefaultPropTypes<Props>,
-  {},
-  string,
-  S,
-  {
-    name: string
-  } & Options
->
+): (props: Props & EmitsToProps<E>) => any
 
 // overload 2: object format with no props
 // (uses user defined props interface)
@@ -338,22 +260,24 @@ export function defineComponent<
   EE extends string = string,
   I extends ComponentInjectOptions = {},
   II extends string = string,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
+  Options = {}
 >(
-  options: ComponentOptionsWithObjectProps<
-    PropsOptions,
-    RawBindings,
-    D,
-    C,
-    M,
-    Mixin,
-    Extends,
-    E,
-    EE,
-    I,
-    II,
-    S
-  >
+  options: Options &
+    ComponentOptionsWithObjectProps<
+      PropsOptions,
+      RawBindings,
+      D,
+      C,
+      M,
+      Mixin,
+      Extends,
+      E,
+      EE,
+      I,
+      II,
+      S
+    >
 ): DefineComponent<
   PropsOptions,
   RawBindings,
@@ -369,7 +293,8 @@ export function defineComponent<
   ExtractDefaultPropTypes<PropsOptions>,
   I,
   II,
-  S
+  S,
+  Options
 >
 
 // implementation, close to no-op