refactor: adjust internal vnode types + more dts tests

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

@@ -1,174 +0,0 @@
-import { createComponent } from '../src/apiCreateComponent'
-import { ref } from '@vue/reactivity'
-import { PropType } from '../src/componentProps'
-import { h } from '../src/h'
-
-// mock React just for TSX testing purposes
-const React = {
-  createElement: () => {}
-}
-
-test('createComponent type inference', () => {
-  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) {
-      props.a && props.a * 2
-      props.b.slice()
-      props.bb.slice()
-      props.cc && props.cc.push('hoo')
-      props.dd.push('dd')
-      return {
-        c: ref(1),
-        d: {
-          e: ref('hi')
-        }
-      }
-    },
-    render() {
-      const props = this.$props
-      props.a && props.a * 2
-      props.b.slice()
-      props.bb.slice()
-      props.cc && props.cc.push('hoo')
-      props.dd.push('dd')
-      this.a && this.a * 2
-      this.b.slice()
-      this.bb.slice()
-      this.c * 2
-      this.d.e.slice()
-      this.cc && this.cc.push('hoo')
-      this.dd.push('dd')
-      return h('div', this.bb)
-    }
-  })
-  // test TSX props inference
-  ;<MyComponent
-    a={1}
-    b="foo"
-    dd={['foo']}
-    ddd={['foo']}
-    // should allow extraneous as attrs
-    class="bar"
-  />
-})
-
-test('type inference w/ optional props declaration', () => {
-  const Comp = createComponent({
-    setup(props: { msg: string }) {
-      props.msg
-      return {
-        a: 1
-      }
-    },
-    render() {
-      this.$props.msg
-      this.msg
-      this.a * 2
-      return h('div', this.msg)
-    }
-  })
-  ;<Comp msg="hello" />
-})
-
-test('type inference w/ direct setup function', () => {
-  const Comp = createComponent((props: { msg: string }) => {
-    return () => <div>{props.msg}</div>
-  })
-  ;<Comp msg="hello" />
-})
-
-test('type inference w/ array props declaration', () => {
-  const Comp = createComponent({
-    props: ['a', 'b'],
-    setup(props) {
-      props.a
-      props.b
-      return {
-        c: 1
-      }
-    },
-    render() {
-      this.$props.a
-      this.$props.b
-      this.a
-      this.b
-      this.c
-    }
-  })
-  ;<Comp a={1} b={2} />
-})
-
-test('with legacy options', () => {
-  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
-      return {
-        c: this.a || 123
-      }
-    },
-    computed: {
-      d(): number {
-        return this.b + 1
-      }
-    },
-    watch: {
-      a() {
-        this.b + 1
-      }
-    },
-    created() {
-      this.a && this.a * 2
-      this.b * 2
-      this.c * 2
-      this.d * 2
-    },
-    methods: {
-      doSomething() {
-        this.a && this.a * 2
-        this.b * 2
-        this.c * 2
-        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__/components/KeepAlive.spec.ts

@@ -22,7 +22,7 @@ describe('keep-alive', () => {
     one = {
       name: 'one',
       data: () => ({ msg: 'one' }),
-      render() {
+      render(this: any) {
         return h('div', this.msg)
       },
       created: jest.fn(),
@@ -34,7 +34,7 @@ describe('keep-alive', () => {
     two = {
       name: 'two',
       data: () => ({ msg: 'two' }),
-      render() {
+      render(this: any) {
         return h('div', this.msg)
       },
       created: jest.fn(),

packages/runtime-core/src/apiOptions.ts

@@ -83,7 +83,7 @@ export type ComponentOptionsWithoutProps<
   M extends MethodOptions = {}
 > = ComponentOptionsBase<Props, RawBindings, D, C, M> & {
   props?: undefined
-} & ThisType<ComponentPublicInstance<Props, RawBindings, D, C, M>>
+} & ThisType<ComponentPublicInstance<{}, RawBindings, D, C, M, Props>>
 
 export type ComponentOptionsWithArrayProps<
   PropNames extends string = string,
@@ -459,7 +459,7 @@ function createWatcher(
   ctx: ComponentPublicInstance,
   key: string
 ) {
-  const getter = () => ctx[key]
+  const getter = () => (ctx as Data)[key]
   if (isString(raw)) {
     const handler = renderContext[raw]
     if (isFunction(handler)) {

packages/runtime-core/src/apiWatch.ts

@@ -19,7 +19,8 @@ import { recordEffect } from './apiReactivity'
 import {
   currentInstance,
   ComponentInternalInstance,
-  currentSuspense
+  currentSuspense,
+  Data
 } from './component'
 import {
   ErrorCodes,
@@ -219,7 +220,7 @@ export function instanceWatch(
   cb: Function,
   options?: WatchOptions
 ): StopHandle {
-  const ctx = this.renderProxy!
+  const ctx = this.renderProxy as Data
   const getter = isString(source) ? () => ctx[source] : source.bind(ctx)
   const stop = watch(getter, cb.bind(ctx), options)
   onBeforeUnmount(stop, this)

packages/runtime-core/src/component.ts

@@ -25,7 +25,7 @@ import {
   makeMap,
   isPromise
 } from '@vue/shared'
-import { SuspenseBoundary } from './rendererSuspense'
+import { SuspenseBoundary } from './components/Suspense'
 import {
   CompilerError,
   CompilerOptions,

packages/runtime-core/src/componentProxy.ts

@@ -26,7 +26,6 @@ export type ComponentPublicInstance<
   M extends MethodOptions = {},
   PublicProps = P
 > = {
-  [key: string]: any
   $data: D
   $props: PublicProps
   $attrs: Data

packages/runtime-core/src/components/KeepAlive.ts

@@ -13,7 +13,7 @@ import { onBeforeUnmount, injectHook, onUnmounted } from '../apiLifecycle'
 import { isString, isArray } from '@vue/shared'
 import { watch } from '../apiWatch'
 import { ShapeFlags } from '../shapeFlags'
-import { SuspenseBoundary } from '../rendererSuspense'
+import { SuspenseBoundary } from './Suspense'
 import {
   RendererInternals,
   queuePostRenderEffect,
@@ -39,7 +39,7 @@ export interface KeepAliveSink {
   deactivate: (vnode: VNode) => void
 }
 
-export const KeepAlive = {
+const KeepAliveImpl = {
   name: `KeepAlive`,
 
   // Marker for special handling inside the renderer. We are not using a ===
@@ -201,13 +201,20 @@ export const KeepAlive = {
 }
 
 if (__DEV__) {
-  ;(KeepAlive as any).props = {
+  ;(KeepAliveImpl as any).props = {
     include: [String, RegExp, Array],
     exclude: [String, RegExp, Array],
     max: [String, Number]
   }
 }
 
+// export the public type for h/tsx inference
+export const KeepAlive = (KeepAliveImpl as any) as {
+  new (): {
+    $props: KeepAliveProps
+  }
+}
+
 function getName(comp: Component): string | void {
   return (comp as FunctionalComponent).displayName || comp.name
 }
@@ -268,7 +275,7 @@ function registerKeepAliveHook(
   if (target) {
     let current = target.parent
     while (current && current.parent) {
-      if (current.parent.type === KeepAlive) {
+      if (current.parent.type === KeepAliveImpl) {
         injectToKeepAliveRoot(wrappedHook, type, target, current)
       }
       current = current.parent

packages/runtime-core/src/components/Suspense.ts

@@ -1,15 +1,27 @@
-import { VNode, normalizeVNode, VNodeChild } from './vnode'
-import { ShapeFlags } from './shapeFlags'
+import { VNode, normalizeVNode, VNodeChild } from '../vnode'
+import { ShapeFlags } from '../shapeFlags'
 import { isFunction, isArray } from '@vue/shared'
-import { ComponentInternalInstance, handleSetupResult } from './component'
-import { Slots } from './componentSlots'
-import { RendererInternals } from './renderer'
-import { queuePostFlushCb, queueJob } from './scheduler'
-import { updateHOCHostEl } from './componentRenderUtils'
-import { handleError, ErrorCodes } from './errorHandling'
-import { pushWarningContext, popWarningContext } from './warning'
+import { ComponentInternalInstance, handleSetupResult } from '../component'
+import { Slots } from '../componentSlots'
+import { RendererInternals } from '../renderer'
+import { queuePostFlushCb, queueJob } from '../scheduler'
+import { updateHOCHostEl } from '../componentRenderUtils'
+import { handleError, ErrorCodes } from '../errorHandling'
+import { pushWarningContext, popWarningContext } from '../warning'
 
-export const Suspense = {
+export interface SuspenseProps {
+  onResolve?: () => void
+  onRecede?: () => void
+}
+
+// Suspense exposes a component-like API, and is treated like a component
+// in the compiler, but internally it's a special built-in type that hooks
+// directly into the renderer.
+export const SuspenseImpl = {
+  // In order to make Suspense tree-shakable, we need to avoid importing it
+  // directly in the renderer. The renderer checks for the __isSuspense flag
+  // on a vnode's type and calls the `process` method, passing in renderer
+  // internals.
   __isSuspense: true,
   process(
     n1: VNode | null,
@@ -49,6 +61,14 @@ export const Suspense = {
   }
 }
 
+// Force-casted public typing for h and TSX props inference
+export const Suspense = ((__FEATURE_SUSPENSE__
+  ? SuspenseImpl
+  : null) as any) as {
+  __isSuspense: true
+  new (): { $props: SuspenseProps }
+}
+
 function mountSuspense(
   n2: VNode,
   container: object,

packages/runtime-core/src/h.ts

@@ -5,9 +5,9 @@ import {
   VNodeChildren,
   Fragment,
   Portal,
-  isVNode,
-  Suspense
+  isVNode
 } from './vnode'
+import { Suspense, SuspenseProps } from './components/Suspense'
 import { isObject, isArray } from '@vue/shared'
 import { RawSlots } from './componentSlots'
 import { FunctionalComponent } from './component'
@@ -67,6 +67,9 @@ type RawChildren =
 
 // fake constructor type returned from `createComponent`
 interface Constructor<P = any> {
+  __isFragment?: never
+  __isPortal?: never
+  __isSuspense?: never
   new (): { $props: P }
 }
 
@@ -100,12 +103,7 @@ export function h(
 export function h(type: typeof Suspense, children?: RawChildren): VNode
 export function h(
   type: typeof Suspense,
-  props?:
-    | (RawProps & {
-        onResolve?: () => void
-        onRecede?: () => void
-      })
-    | null,
+  props?: (RawProps & SuspenseProps) | null,
   children?: RawChildren | RawSlots
 ): VNode
 

packages/runtime-core/src/index.ts

@@ -1,5 +1,6 @@
 // Public API ------------------------------------------------------------------
 
+export const version = __VERSION__
 export * from './apiReactivity'
 export * from './apiWatch'
 export * from './apiLifecycle'
@@ -23,9 +24,10 @@ export {
   createBlock
 } from './vnode'
 // VNode type symbols
-export { Text, Comment, Fragment, Portal, Suspense } from './vnode'
+export { Text, Comment, Fragment, Portal } from './vnode'
 // Internal Components
-export { KeepAlive } from './components/KeepAlive'
+export { Suspense, SuspenseProps } from './components/Suspense'
+export { KeepAlive, KeepAliveProps } from './components/KeepAlive'
 // VNode flags
 export { PublicShapeFlags as ShapeFlags } from './shapeFlags'
 import { PublicPatchFlags } from '@vue/shared'
@@ -111,6 +113,4 @@ export {
   FunctionDirective,
   DirectiveArguments
 } from './directives'
-export { SuspenseBoundary } from './rendererSuspense'
-
-export const version = __VERSION__
+export { SuspenseBoundary } from './components/Suspense'

packages/runtime-core/src/renderer.ts

@@ -47,9 +47,9 @@ import { ComponentPublicInstance } from './componentProxy'
 import { App, createAppAPI } from './apiApp'
 import {
   SuspenseBoundary,
-  Suspense,
-  queueEffectWithSuspense
-} from './rendererSuspense'
+  queueEffectWithSuspense,
+  SuspenseImpl
+} from './components/Suspense'
 import { ErrorCodes, callWithErrorHandling } from './errorHandling'
 import { KeepAliveSink } from './components/KeepAlive'
 
@@ -265,7 +265,7 @@ export function createRenderer<
             optimized
           )
         } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
-          ;(type as typeof Suspense).process(
+          ;(type as typeof SuspenseImpl).process(
             n1,
             n2,
             container,

packages/runtime-core/src/vnode.ts

@@ -16,31 +16,25 @@ import { RawSlots } from './componentSlots'
 import { ShapeFlags } from './shapeFlags'
 import { isReactive, Ref } from '@vue/reactivity'
 import { AppContext } from './apiApp'
-import { SuspenseBoundary } from './rendererSuspense'
+import { SuspenseBoundary } from './components/Suspense'
 import { DirectiveBinding } from './directives'
-import { Suspense as SuspenseImpl } from './rendererSuspense'
+import { SuspenseImpl } from './components/Suspense'
 
 export const Fragment = (Symbol(__DEV__ ? 'Fragment' : undefined) as any) as {
-  // type differentiator for h()
   __isFragment: true
+  new (): {
+    $props: VNodeProps
+  }
 }
 export const Portal = (Symbol(__DEV__ ? 'Portal' : undefined) as any) as {
-  // type differentiator for h()
   __isPortal: true
+  new (): {
+    $props: VNodeProps & { target: string | object }
+  }
 }
 export const Text = Symbol(__DEV__ ? 'Text' : undefined)
 export const Comment = Symbol(__DEV__ ? 'Comment' : undefined)
 
-// Export Suspense with casting to avoid circular type dependency between
-// `suspense.ts` and `createRenderer.ts` in exported types.
-// A circular type dependency causes tsc to generate d.ts with dynmaic import()
-// calls using realtive paths, which works for separate d.ts files, but will
-// fail after d.ts rollup with API Extractor.
-const Suspense = ((__FEATURE_SUSPENSE__ ? SuspenseImpl : null) as any) as {
-  __isSuspense: true
-}
-export { Suspense }
-
 export type VNodeTypes =
   | string
   | Component
@@ -48,12 +42,12 @@ export type VNodeTypes =
   | typeof Portal
   | typeof Text
   | typeof Comment
-  | typeof Suspense
+  | typeof SuspenseImpl
 
 export interface VNodeProps {
   [key: string]: any
   key?: string | number
-  ref?: string | Ref | ((ref: object) => void)
+  ref?: string | Ref | ((ref: object | null) => void)
 }
 
 type VNodeChildAtom<HostNode, HostElement> =

packages/runtime-core/src/warning.ts

@@ -116,7 +116,7 @@ const classify = (str: string): string =>
   str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '')
 
 function formatComponentName(vnode: ComponentVNode, file?: string): string {
-  const Component = vnode.type
+  const Component = vnode.type as Component
   let name = isFunction(Component)
     ? Component.displayName || Component.name
     : Component.name