types: simplify options types

packages/core/src/component.ts

@@ -29,8 +29,6 @@ export interface FunctionalComponent<P = {}> {
 
 export type ComponentType = ComponentClass | FunctionalComponent
 
-// this interface is merged with the class type
-// to represent a mounted component
 export interface ComponentInstance<P = {}, D = {}> extends InternalComponent {
   $vnode: MountedVNode
   $data: D
@@ -40,7 +38,7 @@ export interface ComponentInstance<P = {}, D = {}> extends InternalComponent {
   $slots: Slots
   $root: ComponentInstance
   $children: ComponentInstance[]
-  $options: ComponentOptions<P, D>
+  $options: ComponentOptions<this>
 
   data?(): Partial<D>
   render(props: Readonly<P>, slots: Slots, attrs: Data): any

packages/core/src/componentComputed.ts

@@ -1,4 +1,4 @@
-import { EMPTY_OBJ } from './utils'
+import { EMPTY_OBJ, NOOP } from './utils'
 import { computed, stop, ComputedGetter } from '@vue/observer'
 import { ComponentClass, ComponentInstance } from './component'
 import { ComponentComputedOptions } from './componentOptions'
@@ -43,7 +43,9 @@ export function initializeComputed(
   > = (instance._computedGetters = {})
   const proxy = instance.$proxy
   for (const key in computedOptions) {
-    handles[key] = computed(computedOptions[key], proxy)
+    const option = computedOptions[key]
+    const getter = typeof option === 'function' ? option : option.get || NOOP
+    handles[key] = computed(getter, proxy)
   }
   instance.$computed = new Proxy(
     {},

packages/core/src/componentOptions.ts

@@ -1,20 +1,14 @@
-import { MergedComponent, ComponentInstance } from './component'
+import { ComponentInstance } from './component'
 import { Slots } from './vdom'
 
 export type Data = Record<string, any>
 
-export interface ComponentOptions<
+export interface ComponentOptions<This = ComponentInstance> {
-  P = {},
+  data?(): object
-  D = {},
+  props?: ComponentPropsOptions
-  M = {},
-  C = {},
-  This = MergedComponent<P, D> & M & C
-> {
-  data?: (this: This) => Partial<D>
-  props?: ComponentPropsOptions<P>
   computed?: ComponentComputedOptions<This>
   watch?: ComponentWatchOptions<This>
-  render?: (this: This, props: Readonly<P>, slots: Slots, attrs: Data) => any
+  render?: (this: This, props: Readonly<Data>, slots: Slots, attrs: Data) => any
   inheritAttrs?: boolean
   displayName?: string
   // TODO other options
@@ -39,7 +33,13 @@ export interface PropOptions<T = any> {
 }
 
 export interface ComponentComputedOptions<This = ComponentInstance> {
-  [key: string]: (this: This, c: any) => any
+  [key: string]: ((this: This, c: This) => any) | SingleComputedOptions<This>
+}
+
+type SingleComputedOptions<This> = {
+  get: (this: This, c: This) => any
+  set?: (value: any) => void
+  cache?: boolean
 }
 
 export interface ComponentWatchOptions<This = ComponentInstance> {

packages/vue/__tests__/compat.spec.ts

@@ -7,7 +7,7 @@ describe('2.x compat build', async () => {
     const root = document.createElement('div')
     document.body.appendChild(root)
 
-    const instance = new Vue<any>({
+    const instance = new Vue({
       data() {
         return { count: 0 }
       },

packages/vue/src/index.ts

@@ -3,22 +3,16 @@ import {
   render,
   nextTick,
   Component,
-  ComponentOptions,
   createComponentInstance
 } from '@vue/renderer-dom'
-import { MergedComponent } from '../../core/src/component'
 
-class Vue<
+// Note: typing for this is intentionally loose, as it will be using 2.x types.
-  P extends object = {},
+class Vue extends Component {
-  D extends object = {},
-  M extends object = {},
-  C extends object = {}
-> extends Component {
   static h = h
   static render = render
   static nextTick = nextTick
 
-  constructor(options: ComponentOptions<P, D, M, C> & { el?: any }) {
+  constructor(options: any) {
     super()
     if (!options) {
       return
@@ -49,8 +43,8 @@ class Vue<
   }
 }
 
-interface Vue<P, D, M, C> {
+interface Vue {
-  $mount(el: any): MergedComponent<P, D> & M & C
+  $mount(el: any): any
 }
 
 export default Vue