refactor: adjust internal vnode types + more dts tests

test-dts/createComponent.test-d.tsx

@@ -0,0 +1,224 @@
+import { describe } from './util'
+import { expectError, expectType } from 'tsd'
+import { createComponent, PropType, ref } from './index'
+
+describe('with object props', () => {
+  interface ExpectedProps {
+    a?: number | undefined
+    b: string
+    bb: string
+    cc?: string[] | undefined
+    dd: string[]
+    ccc?: string[] | undefined
+    ddd: string[]
+  }
+
+  const MyComponent = createComponent({
+    props: {
+      a: Number,
+      // required should make property non-void
+      b: {
+        type: String,
+        required: true
+      },
+      // default value should infer type and make it non-void
+      bb: {
+        default: 'hello'
+      },
+      // explicit type casting
+      cc: Array as PropType<string[]>,
+      // required + type casting
+      dd: {
+        type: Array as PropType<string[]>,
+        required: true
+      },
+      // explicit type casting with constructor
+      ccc: Array as () => string[],
+      // required + contructor type casting
+      ddd: {
+        type: Array as () => string[],
+        required: true
+      }
+    },
+    setup(props) {
+      // type assertion. See https://github.com/SamVerschueren/tsd
+      expectType<ExpectedProps['a']>(props.a)
+      expectType<ExpectedProps['b']>(props.b)
+      expectType<ExpectedProps['bb']>(props.bb)
+      expectType<ExpectedProps['cc']>(props.cc)
+      expectType<ExpectedProps['dd']>(props.dd)
+      expectType<ExpectedProps['ccc']>(props.ccc)
+      expectType<ExpectedProps['ddd']>(props.ddd)
+
+      // setup context
+      return {
+        c: ref(1),
+        d: {
+          e: ref('hi')
+        }
+      }
+    },
+    render() {
+      const props = this.$props
+      expectType<ExpectedProps['a']>(props.a)
+      expectType<ExpectedProps['b']>(props.b)
+      expectType<ExpectedProps['bb']>(props.bb)
+      expectType<ExpectedProps['cc']>(props.cc)
+      expectType<ExpectedProps['dd']>(props.dd)
+      expectType<ExpectedProps['ccc']>(props.ccc)
+      expectType<ExpectedProps['ddd']>(props.ddd)
+
+      // should also expose declared props on `this`
+      expectType<ExpectedProps['a']>(this.a)
+      expectType<ExpectedProps['b']>(this.b)
+      expectType<ExpectedProps['bb']>(this.bb)
+      expectType<ExpectedProps['cc']>(this.cc)
+      expectType<ExpectedProps['dd']>(this.dd)
+      expectType<ExpectedProps['ccc']>(this.ccc)
+      expectType<ExpectedProps['ddd']>(this.ddd)
+
+      // assert setup context unwrapping
+      expectType<number>(this.c)
+      expectType<string>(this.d.e)
+
+      return null
+    }
+  })
+
+  // Test TSX
+  expectType<JSX.Element>(
+    <MyComponent
+      a={1}
+      b="b"
+      bb="bb"
+      cc={['cc']}
+      dd={['dd']}
+      ccc={['ccc']}
+      ddd={['ddd']}
+      // should allow extraneous as attrs
+      class="bar"
+      // should allow key
+      key={'foo'}
+      // should allow ref
+      ref={'foo'}
+    />
+  )
+
+  // missing required props
+  expectError(<MyComponent />)
+
+  // wrong prop types
+  expectError(
+    <MyComponent a={'wrong type'} b="foo" dd={['foo']} ddd={['foo']} />
+  )
+  expectError(<MyComponent b="foo" dd={[123]} ddd={['foo']} />)
+})
+
+describe('type inference w/ optional props declaration', () => {
+  const MyComponent = createComponent({
+    setup(_props: { msg: string }) {
+      return {
+        a: 1
+      }
+    },
+    render() {
+      expectType<string>(this.$props.msg)
+      expectError(this.msg)
+      expectType<number>(this.a)
+      return null
+    }
+  })
+
+  expectType<JSX.Element>(<MyComponent msg="foo" />)
+  expectError(<MyComponent />)
+  expectError(<MyComponent msg={1} />)
+})
+
+describe('type inference w/ direct setup function', () => {
+  const MyComponent = createComponent((_props: { msg: string }) => {})
+  expectType<JSX.Element>(<MyComponent msg="foo" />)
+  expectError(<MyComponent />)
+  expectError(<MyComponent msg={1} />)
+})
+
+describe('type inference w/ array props declaration', () => {
+  createComponent({
+    props: ['a', 'b'],
+    setup(props) {
+      props.a
+      props.b
+      return {
+        c: 1
+      }
+    },
+    render() {
+      expectType<{ a?: any; b?: any }>(this.$props)
+      expectType<any>(this.a)
+      expectType<any>(this.b)
+      expectType<number>(this.c)
+    }
+  })
+})
+
+describe('type inference w/ options API', () => {
+  createComponent({
+    props: { a: Number },
+    setup() {
+      return {
+        b: 123
+      }
+    },
+    data() {
+      // Limitation: we cannot expose the return result of setup() on `this`
+      // here in data() - somehow that would mess up the inference
+      expectType<number | undefined>(this.a)
+      return {
+        c: this.a || 123
+      }
+    },
+    computed: {
+      d(): number {
+        expectType<number>(this.b)
+        return this.b + 1
+      }
+    },
+    watch: {
+      a() {
+        expectType<number>(this.b)
+        this.b + 1
+      }
+    },
+    created() {
+      // props
+      expectType<number | undefined>(this.a)
+      // returned from setup()
+      expectType<number>(this.b)
+      // returned from data()
+      expectType<number>(this.c)
+      // computed
+      expectType<number>(this.d)
+    },
+    methods: {
+      doSomething() {
+        // props
+        expectType<number | undefined>(this.a)
+        // returned from setup()
+        expectType<number>(this.b)
+        // returned from data()
+        expectType<number>(this.c)
+        // computed
+        expectType<number>(this.d)
+      }
+    },
+    render() {
+      // props
+      expectType<number | undefined>(this.a)
+      // returned from setup()
+      expectType<number>(this.b)
+      // returned from data()
+      expectType<number>(this.c)
+      // computed
+      expectType<number>(this.d)
+    }
+  })
+})

test-dts/h.test-d.ts

@@ -1,85 +1,117 @@
-// This file tests a number of cases that *should* fail using tsd:
-// https://github.com/SamVerschueren/tsd
-// It will probably show up red in VSCode, and it's intended. We cannot use
-// directives like @ts-ignore or @ts-nocheck since that would suppress the
-// errors that should be caught.
-
+import { describe } from './util'
 import { expectError } from 'tsd'
 import { h, createComponent, ref, Fragment, Portal, Suspense } from './index'
 
-// h inference w/ element
-// key
-h('div', { key: 1 })
-h('div', { key: 'foo' })
-expectError(h('div', { key: [] }))
-expectError(h('div', { key: {} }))
-// ref
-h('div', { ref: 'foo' })
-h('div', { ref: ref(null) })
-h('div', { ref: el => {} })
-expectError(h('div', { ref: [] }))
-expectError(h('div', { ref: {} }))
-expectError(h('div', { ref: 123 }))
-
-// h inference w/ Fragment
-// only accepts array children
-h(Fragment, ['hello'])
-h(Fragment, { key: 123 }, ['hello'])
-expectError(h(Fragment, 'foo'))
-expectError(h(Fragment, { key: 123 }, 'bar'))
-
-// h inference w/ Portal
-h(Portal, { target: '#foo' }, 'hello')
-expectError(h(Portal))
-expectError(h(Portal, {}))
-expectError(h(Portal, { target: '#foo' }))
-
-// h inference w/ Suspense
-h(Suspense, { onRecede: () => {}, onResolve: () => {} }, 'hello')
-h(Suspense, 'foo')
-h(Suspense, () => 'foo')
-h(Suspense, null, {
-  default: () => 'foo'
+describe('h inference w/ element', () => {
+  // key
+  h('div', { key: 1 })
+  h('div', { key: 'foo' })
+  expectError(h('div', { key: [] }))
+  expectError(h('div', { key: {} }))
+  // ref
+  h('div', { ref: 'foo' })
+  h('div', { ref: ref(null) })
+  h('div', { ref: el => {} })
+  expectError(h('div', { ref: [] }))
+  expectError(h('div', { ref: {} }))
+  expectError(h('div', { ref: 123 }))
 })
-expectError(h(Suspense, { onResolve: 1 }))
 
-// h inference w/ functional component
-const Func = (_props: { foo: string; bar?: number }) => ''
-h(Func, { foo: 'hello' })
-h(Func, { foo: 'hello', bar: 123 })
-expectError(h(Func, { foo: 123 }))
-expectError(h(Func, {}))
-expectError(h(Func, { bar: 123 }))
+describe('h inference w/ Fragment', () => {
+  // only accepts array children
+  h(Fragment, ['hello'])
+  h(Fragment, { key: 123 }, ['hello'])
+  expectError(h(Fragment, 'foo'))
+  expectError(h(Fragment, { key: 123 }, 'bar'))
+})
 
-// h inference w/ plain object component
-const Foo = {
-  props: {
-    foo: String
-  }
-}
+describe('h inference w/ Portal', () => {
+  h(Portal, { target: '#foo' }, 'hello')
+  expectError(h(Portal))
+  expectError(h(Portal, {}))
+  expectError(h(Portal, { target: '#foo' }))
+})
 
-h(Foo, { foo: 'ok' })
-h(Foo, { foo: 'ok', class: 'extra' })
-// should fail on wrong type
-expectError(h(Foo, { foo: 1 }))
+describe('h inference w/ Suspense', () => {
+  h(Suspense, { onRecede: () => {}, onResolve: () => {} }, 'hello')
+  h(Suspense, 'foo')
+  h(Suspense, () => 'foo')
+  h(Suspense, null, {
+    default: () => 'foo'
+  })
+  expectError(h(Suspense, { onResolve: 1 }))
+})
 
-// h inference w/ createComponent
-const Bar = createComponent({
-  props: {
-    foo: String,
-    bar: {
-      type: Number,
-      required: true
+describe('h inference w/ functional component', () => {
+  const Func = (_props: { foo: string; bar?: number }) => ''
+  h(Func, { foo: 'hello' })
+  h(Func, { foo: 'hello', bar: 123 })
+  expectError(h(Func, { foo: 123 }))
+  expectError(h(Func, {}))
+  expectError(h(Func, { bar: 123 }))
+})
+
+describe('h inference w/ plain object component', () => {
+  const Foo = {
+    props: {
+      foo: String
     }
   }
+
+  h(Foo, { foo: 'ok' })
+  h(Foo, { foo: 'ok', class: 'extra' })
+  // should fail on wrong type
+  expectError(h(Foo, { foo: 1 }))
 })
 
-h(Bar, { bar: 1 })
-h(Bar, { bar: 1, foo: 'ok' })
-// should allow extraneous props (attrs fallthrough)
-h(Bar, { bar: 1, foo: 'ok', class: 'extra' })
-// should fail on missing required prop
-expectError(h(Bar, {}))
-expectError(h(Bar, { foo: 'ok' }))
-// should fail on wrong type
-expectError(h(Bar, { bar: 1, foo: 1 }))
+describe('h inference w/ createComponent', () => {
+  const Foo = createComponent({
+    props: {
+      foo: String,
+      bar: {
+        type: Number,
+        required: true
+      }
+    }
+  })
+
+  h(Foo, { bar: 1 })
+  h(Foo, { bar: 1, foo: 'ok' })
+  // should allow extraneous props (attrs fallthrough)
+  h(Foo, { bar: 1, foo: 'ok', class: 'extra' })
+  // should fail on missing required prop
+  expectError(h(Foo, {}))
+  expectError(h(Foo, { foo: 'ok' }))
+  // should fail on wrong type
+  expectError(h(Foo, { bar: 1, foo: 1 }))
+})
+
+describe('h inference w/ createComponent + optional props', () => {
+  const Foo = createComponent({
+    setup(_props: { foo?: string; bar: number }) {}
+  })
+
+  h(Foo, { bar: 1 })
+  h(Foo, { bar: 1, foo: 'ok' })
+  // should allow extraneous props (attrs fallthrough)
+  h(Foo, { bar: 1, foo: 'ok', class: 'extra' })
+  // should fail on missing required prop
+  expectError(h(Foo, {}))
+  expectError(h(Foo, { foo: 'ok' }))
+  // should fail on wrong type
+  expectError(h(Foo, { bar: 1, foo: 1 }))
+})
+
+describe('h inference w/ createComponent + direct function', () => {
+  const Foo = createComponent((_props: { foo?: string; bar: number }) => {})
+
+  h(Foo, { bar: 1 })
+  h(Foo, { bar: 1, foo: 'ok' })
+  // should allow extraneous props (attrs fallthrough)
+  h(Foo, { bar: 1, foo: 'ok', class: 'extra' })
+  // should fail on missing required prop
+  expectError(h(Foo, {}))
+  expectError(h(Foo, { foo: 'ok' }))
+  // should fail on wrong type
+  expectError(h(Foo, { bar: 1, foo: 1 }))
+})

test-dts/index.d.ts

@@ -1 +1,7 @@
+// This directory contains a number of d.ts assertions using tsd:
+// https://github.com/SamVerschueren/tsd
+// The tests checks type errors and will probably show up red in VSCode, and
+// it's intended. We cannot use directives like @ts-ignore or @ts-nocheck since
+// that would suppress the errors that should be caught.
+
 export * from '@vue/runtime-dom'

test-dts/tsx.test-d.tsx

@@ -0,0 +1,41 @@
+// TSX w/ createComponent is tested in createComponent.test-d.tsx
+
+import { expectError, expectType } from 'tsd'
+import { KeepAlive, Suspense, Fragment, Portal } from '@vue/runtime-dom'
+
+expectType<JSX.Element>(<div />)
+expectType<JSX.Element>(<div id="foo" />)
+expectType<JSX.Element>(<input value="foo" />)
+
+// unknown prop
+expectError(<div foo="bar" />)
+
+// allow key/ref on arbitrary element
+expectType<JSX.Element>(<div key="foo" />)
+expectType<JSX.Element>(<div ref="bar" />)
+
+expectType<JSX.Element>(
+  <input
+    onInput={e => {
+      // infer correct event type
+      expectType<EventTarget | null>(e.target)
+    }}
+  />
+)
+
+// built-in types
+expectType<JSX.Element>(<Fragment />)
+expectType<JSX.Element>(<Fragment key="1" />)
+
+expectType<JSX.Element>(<Portal target="#foo" />)
+// target is required
+expectError(<Portal />)
+
+// KeepAlive
+expectType<JSX.Element>(<KeepAlive include="foo" exclude={['a']} />)
+expectError(<KeepAlive include={123} />)
+
+// Suspense
+expectType<JSX.Element>(<Suspense />)
+expectType<JSX.Element>(<Suspense onResolve={() => {}} onRecede={() => {}} />)
+expectError(<Suspense onResolve={123} />)

test-dts/util.ts

@@ -0,0 +1,4 @@
+// aesthetic utility for making test-d.ts look more like actual tests
+// and makes it easier to navigate test cases with folding
+// it's a noop since test-d.ts files are not actually run.
+export function describe(_name: string, _fn: () => void) {}