From 2f9cfbf7a1493a0abcad4686b7159e70e1234562 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 22 Sep 2021 02:59:23 +0800
Subject: [PATCH] feat(types): align ComponentPublicInstance type

---
 src/component/componentProxy.ts | 53 ++++++++++++++++++++++++++++++++-
 src/component/index.ts          |  6 +++-
 src/runtimeContext.ts           |  2 ++
 3 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/src/component/componentProxy.ts b/src/component/componentProxy.ts
index d614eaf5..fbf81d4c 100644
--- a/src/component/componentProxy.ts
+++ b/src/component/componentProxy.ts
@@ -1,5 +1,11 @@
 import { ExtractDefaultPropTypes, ExtractPropTypes } from './componentProps'
-import { ShallowUnwrapRef } from '..'
+import {
+  nextTick,
+  ShallowUnwrapRef,
+  UnwrapNestedRefs,
+  WatchOptions,
+  WatchStopHandle,
+} from '..'
 import { Data } from './common'
 
 import Vue, {
@@ -11,6 +17,12 @@ import {
   MethodOptions,
   ExtractComputedReturns,
 } from './componentOptions'
+import {
+  ComponentInternalInstance,
+  EmitFn,
+  EmitsOptions,
+  Slots,
+} from '../runtimeContext'
 
 export type ComponentInstance = InstanceType<VueConstructor>
 
@@ -79,3 +91,42 @@ export type VueProxy<
   ExtractPropTypes<PropsOptions>
 > &
   VueConstructorProxy<PropsOptions, RawBindings, Data, Computed, Methods>
+
+// public properties exposed on the proxy, which is used as the render context
+// in templates (as `this` in the render option)
+export type ComponentPublicInstance<
+  P = {}, // props type extracted from props option
+  B = {}, // raw bindings returned from setup()
+  D = {}, // return from data()
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {},
+  E extends EmitsOptions = {},
+  PublicProps = P,
+  Defaults = {},
+  MakeDefaultsOptional extends boolean = false
+> = {
+  $: ComponentInternalInstance
+  $data: D
+  $props: MakeDefaultsOptional extends true
+    ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
+    : P & PublicProps
+  $attrs: Data
+  $refs: Data
+  $slots: Slots
+  $root: ComponentPublicInstance | null
+  $parent: ComponentPublicInstance | null
+  $emit: EmitFn<E>
+  $el: any
+  // $options: Options & MergedComponentOptionsOverride
+  $forceUpdate: () => void
+  $nextTick: typeof nextTick
+  $watch(
+    source: string | Function,
+    cb: Function,
+    options?: WatchOptions
+  ): WatchStopHandle
+} & P &
+  ShallowUnwrapRef<B> &
+  UnwrapNestedRefs<D> &
+  ExtractComputedReturns<C> &
+  M
diff --git a/src/component/index.ts b/src/component/index.ts
index c23a36fd..f7278620 100644
--- a/src/component/index.ts
+++ b/src/component/index.ts
@@ -6,7 +6,11 @@ export {
   MethodOptions,
   ComponentPropsOptions,
 } from './componentOptions'
-export { ComponentInstance, ComponentRenderProxy } from './componentProxy'
+export {
+  ComponentInstance,
+  ComponentPublicInstance,
+  ComponentRenderProxy,
+} from './componentProxy'
 export { Data } from './common'
 export {
   PropType,
diff --git a/src/runtimeContext.ts b/src/runtimeContext.ts
index d9b5c770..f24c5d4a 100644
--- a/src/runtimeContext.ts
+++ b/src/runtimeContext.ts
@@ -166,6 +166,8 @@ export interface SetupContext<E = EmitsOptions> {
   readonly refs: { [key: string]: Vue | Element | Vue[] | Element[] }
 }
 
+export interface ComponentPublicInstance {}
+
 /**
  * We expose a subset of properties on the internal instance as they are
  * useful for advanced external libraries and tools.