feat: allow to define props by class

Author: ktsn

example/babel.config.js

@@ -1,3 +1,7 @@
 module.exports = {
   presets: [['@babel/env', { modules: false }]],
+  plugins: [
+    ['@babel/proposal-decorators', { legacy: true }],
+    ['@babel/proposal-class-properties', { loose: true }],
+  ],
 }

example/src/App.vue

@@ -12,13 +12,13 @@
 </template>
 
 <script lang="ts">
-import { props } from '../../src'
+import { Vue } from '../../src'
 
-const Props = props({
-  propMessage: String
-})
+class Props {
+  propMessage!: string
+}
 
-export default class App extends Props {
+export default class App extends Vue.props(Props) {
   // inital data
   msg: number = 123
 

example/tsconfig.json

@@ -1,19 +1,15 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "module": "es2015",
     "moduleResolution": "node",
     "experimentalDecorators": true,
+    "useDefineForClassFields": true,
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "sourceMap": true
   },
-  "include": [
-    "./**/*.ts"
-  ]
+  "include": ["./**/*.ts"]
 }

example/webpack.config.js

@@ -1,4 +1,5 @@
 const { VueLoaderPlugin } = require('vue-loader')
+const babelConfig = require('./babel.config')
 
 module.exports = {
   mode: 'development',
@@ -20,7 +21,10 @@ module.exports = {
         test: /\.tsx?$/,
         exclude: /node_modules/,
         use: [
-          'babel-loader',
+          {
+            loader: 'babel-loader',
+            options: babelConfig,
+          },
           {
             loader: 'ts-loader',
             options: {
@@ -32,18 +36,7 @@ module.exports = {
       },
       {
         test: /\.vue$/,
-        use: [
-          {
-            loader: 'vue-loader',
-            options: {
-              babelParserPlugins: [
-                'jsx',
-                'classProperties',
-                'decorators-legacy',
-              ],
-            },
-          },
-        ],
+        use: ['vue-loader'],
       },
     ],
   },

src/helpers.ts

@@ -1,21 +1,6 @@
-import {
-  ComponentOptions,
-  ComponentObjectPropsOptions,
-  ExtractPropTypes,
-  ExtractDefaultPropTypes,
-  ShallowUnwrapRef,
-  Ref,
-} from 'vue'
+import { ComponentOptions, ShallowUnwrapRef, Ref } from 'vue'
 
-import {
-  ClassComponentHooks,
-  EmitsOptions,
-  ObjectEmitsOptions,
-  Vue,
-  VueBase,
-  VueConstructor,
-  VueMixin,
-} from './vue'
+import { Vue, VueConstructor, VueMixin } from './vue'
 
 export function Options<V extends Vue>(
   options: ComponentOptions & ThisType<V>
@@ -63,25 +48,8 @@ export type UnionToIntersection<U> = (
 
 export type ExtractInstance<T> = T extends VueMixin<infer V> ? V : never
 
-export type NarrowEmit<T extends VueBase> = Omit<
-  T,
-  '$emit' | keyof ClassComponentHooks
-> &
-  // Reassign class component hooks as mapped types makes prototype function (`mounted(): void`) instance function (`mounted: () => void`).
-  ClassComponentHooks & {
-    // Exclude generic $emit type (`$emit: (event: string, ...args: any[]) => void`) if there are another intersected type.
-    $emit: T['$emit'] extends ((event: string, ...args: any[]) => void) &
-      infer R
-      ? unknown extends R
-        ? T['$emit']
-        : R
-      : T['$emit']
-  }
-
 export type MixedVueBase<Mixins extends VueMixin[]> = Mixins extends (infer T)[]
-  ? VueConstructor<
-      NarrowEmit<UnionToIntersection<ExtractInstance<T>> & Vue> & VueBase
-    >
+  ? VueConstructor<UnionToIntersection<ExtractInstance<T>> & Vue>
   : never
 
 export function mixins<T extends VueMixin[]>(...Ctors: T): MixedVueBase<T>
@@ -104,47 +72,6 @@ export function mixins(...Ctors: VueMixin[]): VueConstructor {
   }
 }
 
-export function props<
-  PropNames extends string,
-  Props = Readonly<{ [key in PropNames]?: any }>
->(propNames: PropNames[]): VueConstructor<Vue<Props> & Props>
-
-export function props<
-  PropsOptions extends ComponentObjectPropsOptions,
-  Props = Readonly<ExtractPropTypes<PropsOptions>>,
-  DefaultProps = ExtractDefaultPropTypes<PropsOptions>
->(
-  propsOptions: PropsOptions
-): VueConstructor<Vue<Props, {}, DefaultProps> & Props>
-
-export function props(
-  propsOptions: string[] | ComponentObjectPropsOptions
-): VueConstructor {
-  class PropsMixin extends Vue {
-    static __vccExtend(options: ComponentOptions) {
-      options.props = propsOptions
-    }
-  }
-  return PropsMixin
-}
-
-export function emits<EmitNames extends string>(
-  emitNames: EmitNames[]
-): VueConstructor<Vue<unknown, EmitNames[]>>
-
-export function emits<EmitsOptions extends ObjectEmitsOptions>(
-  emitsOptions: EmitsOptions
-): VueConstructor<Vue<unknown, EmitsOptions>>
-
-export function emits(emitsOptions: EmitsOptions): VueConstructor {
-  class EmitsMixin extends Vue {
-    static __vccExtend(options: ComponentOptions) {
-      options.emits = emitsOptions
-    }
-  }
-  return EmitsMixin
-}
-
 export type UnwrapSetupValue<T> = T extends Ref<infer R>
   ? R
   : ShallowUnwrapRef<T>

src/index.ts

@@ -4,14 +4,9 @@
 
 export { Vue, ClassComponentHooks } from './vue'
 
-export {
-  Options,
-  createDecorator,
-  mixins,
-  props,
-  emits,
-  setup,
-} from './helpers'
+export { Options, createDecorator, mixins, setup } from './helpers'
+
+export { prop } from './props'
 
 /**
  * Other types
@@ -27,11 +22,22 @@ export {
   PublicProps,
 } from './vue'
 
+export {
+  PropOptions,
+  PropOptionsWithDefault,
+  PropOptionsWithRequired,
+  WithDefault,
+  VueWithProps,
+  DefaultFactory,
+  DefaultKeys,
+  ExtractDefaultProps,
+  ExtractProps,
+} from './props'
+
 export {
   VueDecorator,
   MixedVueBase,
   UnionToIntersection,
   ExtractInstance,
-  NarrowEmit,
   UnwrapSetupValue,
 } from './helpers'

src/props.ts

@@ -0,0 +1,56 @@
+import { Prop, PropType } from 'vue'
+import { Vue } from './vue'
+
+declare const withDefaultSymbol: unique symbol
+
+export interface WithDefault<T> {
+  [withDefaultSymbol]: T
+}
+
+export type DefaultFactory<T> = (
+  props: Record<string, unknown>
+) => T | null | undefined
+
+export interface PropOptions<T = any, D = T> {
+  type?: PropType<T> | true | null
+  required?: boolean
+  default?: D | DefaultFactory<D> | null | undefined | object
+  validator?(value: unknown): boolean
+}
+
+export interface PropOptionsWithDefault<T, D = T> extends PropOptions<T, D> {
+  default: PropOptions<T, D>['default']
+}
+
+export interface PropOptionsWithRequired<T, D = T> extends PropOptions<T, D> {
+  required: true
+}
+
+export type VueWithProps<P> = Vue<ExtractProps<P>, {}, ExtractDefaultProps<P>> &
+  ExtractProps<P>
+
+export type ExtractProps<P> = {
+  [K in keyof P]: P[K] extends WithDefault<infer T> ? T : P[K]
+}
+
+export type DefaultKeys<P> = {
+  [K in keyof P]: P[K] extends WithDefault<any> ? K : never
+}[keyof P]
+
+export type ExtractDefaultProps<P> = {
+  [K in DefaultKeys<P>]: P[K] extends WithDefault<infer T> ? T : never
+}
+
+// With default
+export function prop<T>(options: PropOptionsWithDefault<T>): WithDefault<T>
+
+// With required
+export function prop<T>(options: PropOptionsWithRequired<T>): T
+
+// Others
+export function prop<T>(options: Prop<T>): T
+
+// Actual implementation
+export function prop(options: Prop<unknown>): unknown {
+  return options
+}

src/vue.ts

@@ -8,7 +8,10 @@ import {
   AllowedComponentProps,
   ComponentCustomProps,
   proxyRefs,
+  Prop,
+  ComponentObjectPropsOptions,
 } from 'vue'
+import { VueWithProps } from './props'
 
 function defineGetter<T, K extends keyof T>(
   obj: T,
@@ -82,10 +85,6 @@ export interface VueStatic {
 
   /** @internal */
   __hmrId?: string
-
-  // --- Public APIs
-
-  registerHooks(keys: string[]): void
 }
 
 export type PublicProps = VNodeProps &
@@ -94,7 +93,9 @@ export type PublicProps = VNodeProps &
 
 export type VueBase = Vue<unknown, never[]>
 
-export type VueMixin<V extends VueBase = VueBase> = VueStatic & { prototype: V }
+export type VueMixin<V extends VueBase = VueBase> = VueStatic & {
+  prototype: V
+}
 
 export interface ClassComponentHooks {
   // To be extended on user land
@@ -140,6 +141,14 @@ export type Vue<
 
 export interface VueConstructor<V extends VueBase = Vue> extends VueMixin<V> {
   new (...args: any[]): V
+
+  // --- Public APIs
+
+  registerHooks(keys: string[]): void
+
+  props<P extends { new (): unknown }>(
+    Props: P
+  ): VueConstructor<V & VueWithProps<InstanceType<P>>>
 }
 
 class VueImpl {
@@ -291,6 +300,23 @@ class VueImpl {
     this.__vccHooks.push(...keys)
   }
 
+  static props(Props: { new (): unknown }): VueConstructor {
+    const propsMeta = new Props() as Record<string, Prop<any> | undefined>
+    const props: ComponentObjectPropsOptions = {}
+
+    Object.keys(propsMeta).forEach((key) => {
+      const meta = propsMeta[key]
+      props[key] = meta ?? null
+    })
+
+    class PropsMixin extends this {
+      static __vccExtend(options: ComponentOptions) {
+        options.props = props
+      }
+    }
+    return PropsMixin as VueConstructor
+  }
+
   $props!: Record<string, any>
   $emit!: (event: string, ...args: any[]) => void
   $attrs!: ComponentPublicInstance['$attrs']