feat: fix all cases for h and options type inference

packages/runtime-core/__tests__/apiApp.spec.ts

@@ -23,8 +23,8 @@ describe('api: createApp', () => {
           default: 0
         }
       },
-      render() {
-        return this.count
+      setup(props: { count: number }) {
+        return () => props.count
       }
     }
 

packages/runtime-core/__tests__/apiCreateComponent.spec.tsx

@@ -1,4 +1,4 @@
-import { createComponent, ComponentRenderProxy } from '../src/component'
+import { createComponent } from '../src/component'
 import { ref } from '@vue/reactivity'
 import { PropType } from '../src/componentProps'
 import { h } from '../src/h'
@@ -56,7 +56,7 @@ test('createComponent type inference', () => {
       this.d.e.slice()
       this.cc && this.cc.push('hoo')
       this.dd.push('dd')
-      // return h('div', this.bb)
+      return h('div', this.bb)
     }
   })
   // test TSX props inference
@@ -75,7 +75,7 @@ test('type inference w/ optional props declaration', () => {
       this.$props.msg
       this.msg
       this.a * 2
-      // return h('div', this.msg)
+      return h('div', this.msg)
     }
   })
   ;(<Comp msg="hello"/>)
@@ -118,10 +118,10 @@ test('with legacy options', () => {
       }
     },
     data() {
-      this.a
-      this.b
+      // Limitation: we cannot expose the return result of setup() on `this`
+      // here in data() - somehow that would mess up the inference
       return {
-        c: 234
+        c: this.a || 123
       }
     },
     computed: {
@@ -148,6 +148,13 @@ test('with legacy options', () => {
         this.d * 2
         return (this.a || 0) + this.b + this.c + this.d
       }
+    },
+    render() {
+      this.a && this.a * 2
+      this.b * 2
+      this.c * 2
+      this.d * 2
+      return h('div', (this.a || 0) + this.b + this.c + this.d)
     }
   })
 })

packages/runtime-core/__tests__/apiOptions.spec.ts

@@ -7,12 +7,13 @@ import {
   TestElement,
   nextTick,
   renderToString,
-  ref
+  ref,
+  createComponent
 } from '@vue/runtime-test'
 
 describe('api: options', () => {
   test('data', async () => {
-    const Comp = {
+    const Comp = createComponent({
       data() {
         return {
           foo: 1
@@ -29,7 +30,7 @@ describe('api: options', () => {
           this.foo
         )
       }
-    }
+    })
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
     expect(serializeInner(root)).toBe(`<div>1</div>`)
@@ -40,17 +41,17 @@ describe('api: options', () => {
   })
 
   test('computed', async () => {
-    const Comp = {
+    const Comp = createComponent({
       data() {
         return {
           foo: 1
         }
       },
       computed: {
-        bar() {
+        bar(): number {
           return this.foo + 1
         },
-        baz() {
+        baz(): number {
           return this.bar + 1
         }
       },
@@ -65,7 +66,7 @@ describe('api: options', () => {
           this.bar + this.baz
         )
       }
-    }
+    })
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
     expect(serializeInner(root)).toBe(`<div>5</div>`)
@@ -76,7 +77,7 @@ describe('api: options', () => {
   })
 
   test('methods', async () => {
-    const Comp = {
+    const Comp = createComponent({
       data() {
         return {
           foo: 1
@@ -96,7 +97,7 @@ describe('api: options', () => {
           this.foo
         )
       }
-    }
+    })
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
     expect(serializeInner(root)).toBe(`<div>1</div>`)
@@ -107,7 +108,7 @@ describe('api: options', () => {
   })
 
   test('watch', async () => {
-    function returnThis() {
+    function returnThis(this: any) {
       return this
     }
     const spyA = jest.fn(returnThis)
@@ -188,20 +189,20 @@ describe('api: options', () => {
       render() {
         return [h(ChildA), h(ChildB), h(ChildC), h(ChildD)]
       }
-    }
+    } as any
     const ChildA = {
       inject: ['a'],
       render() {
         return this.a
       }
-    }
+    } as any
     const ChildB = {
       // object alias
       inject: { b: 'a' },
       render() {
         return this.b
       }
-    }
+    } as any
     const ChildC = {
       inject: {
         b: {
@@ -211,7 +212,7 @@ describe('api: options', () => {
       render() {
         return this.b
       }
-    }
+    } as any
     const ChildD = {
       inject: {
         b: {
@@ -222,7 +223,7 @@ describe('api: options', () => {
       render() {
         return this.b
       }
-    }
+    } as any
 
     expect(renderToString(h(Root))).toBe(`<!---->1112<!---->`)
   })
@@ -287,7 +288,7 @@ describe('api: options', () => {
       unmounted() {
         calls.push('mid onUnmounted')
       },
-      render() {
+      render(this: any) {
         return h(Child, { count: this.$props.count })
       }
     }
@@ -317,7 +318,7 @@ describe('api: options', () => {
       unmounted() {
         calls.push('child onUnmounted')
       },
-      render() {
+      render(this: any) {
         return h('div', this.$props.count)
       }
     }
@@ -375,7 +376,7 @@ describe('api: options', () => {
           a: 1
         }
       },
-      created() {
+      created(this: any) {
         calls.push('mixinA created')
         expect(this.a).toBe(1)
         expect(this.b).toBe(2)
@@ -391,7 +392,7 @@ describe('api: options', () => {
           b: 2
         }
       },
-      created() {
+      created(this: any) {
         calls.push('mixinB created')
         expect(this.a).toBe(1)
         expect(this.b).toBe(2)
@@ -408,7 +409,7 @@ describe('api: options', () => {
           c: 3
         }
       },
-      created() {
+      created(this: any) {
         calls.push('comp created')
         expect(this.a).toBe(1)
         expect(this.b).toBe(2)
@@ -417,7 +418,7 @@ describe('api: options', () => {
       mounted() {
         calls.push('comp mounted')
       },
-      render() {
+      render(this: any) {
         return `${this.a}${this.b}${this.c}`
       }
     }
@@ -455,7 +456,7 @@ describe('api: options', () => {
       mounted() {
         calls.push('comp')
       },
-      render() {
+      render(this: any) {
         return `${this.a}${this.b}`
       }
     }
@@ -465,7 +466,7 @@ describe('api: options', () => {
   })
 
   test('accessing setup() state from options', async () => {
-    const Comp = {
+    const Comp = createComponent({
       setup() {
         return {
           count: ref(0)
@@ -473,11 +474,11 @@ describe('api: options', () => {
       },
       data() {
         return {
-          plusOne: this.count + 1
+          plusOne: (this as any).count + 1
         }
       },
       computed: {
-        plusTwo() {
+        plusTwo(): number {
           return this.count + 2
         }
       },
@@ -495,7 +496,7 @@ describe('api: options', () => {
           `${this.count},${this.plusOne},${this.plusTwo}`
         )
       }
-    }
+    })
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
     expect(serializeInner(root)).toBe(`<div>0,1,2</div>`)

packages/runtime-core/__tests__/apiSetupContext.spec.ts

@@ -16,7 +16,7 @@ import {
 
 describe('api: setup context', () => {
   it('should expose return values to template render context', () => {
-    const Comp = {
+    const Comp = createComponent({
       setup() {
         return {
           // ref should auto-unwrap
@@ -30,7 +30,7 @@ describe('api: setup context', () => {
       render() {
         return `${this.ref} ${this.object.msg} ${this.value}`
       }
-    }
+    })
     expect(renderToString(h(Comp))).toMatch(`foo bar baz`)
   })