refactor: expose $self

diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 6e00f3914c5ca3f6d213914badc43fcd10904ad0..0698dd2a6fb5c8def0aea8e3d81623207cca08e7 100644 (file)
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -30,6 +30,7 @@ export interface Component<P = {}, D = {}> extends PublicInstanceMethods {
   readonly $options: ComponentOptions<P, D, this>
   readonly $refs: Record<string | symbol, any>
   readonly $proxy: this
+  readonly $self: this
 }
 
 interface PublicInstanceMethods {
@@ -99,10 +100,10 @@ export interface ComponentInstance<P = {}, D = {}>
   $root: ComponentInstance
   $children: ComponentInstance[]
   $options: ComponentOptions<P, D>
+  $self: ComponentInstance<P, D> // on proxies only
 
   _update: ReactiveEffect
   _queueJob: ((fn: () => void) => void)
-  _self: ComponentInstance<P, D> // on proxies only
 }
 
 // actual implementation of the component

diff --git a/packages/runtime-core/src/componentInstance.ts b/packages/runtime-core/src/componentInstance.ts
index 4e485680c7131d418411e94c69fb4c069a10727b..51c6ed4b5ec92054d89bc30a9b681938369ebb4d 100644 (file)
--- a/packages/runtime-core/src/componentInstance.ts
+++ b/packages/runtime-core/src/componentInstance.ts
@@ -91,7 +91,7 @@ export function initializeComponentInstance(instance: ComponentInstance) {
 }
 
 export function teardownComponentInstance(instance: ComponentInstance) {
-  const parentComponent = instance.$parent && instance.$parent._self
+  const parentComponent = instance.$parent && instance.$parent.$self
   if (parentComponent && !parentComponent._unmounted) {
     parentComponent.$children.splice(
       parentComponent.$children.indexOf(instance.$proxy),

diff --git a/packages/runtime-core/src/componentProxy.ts b/packages/runtime-core/src/componentProxy.ts
index 4ebbbf791541a3c4ac1bfd3e4fcbd841d113be2c..40762e8eb1c5ac04198d619634e66146111349ec 100644 (file)
--- a/packages/runtime-core/src/componentProxy.ts
+++ b/packages/runtime-core/src/componentProxy.ts
@@ -22,7 +22,7 @@ function getBoundMethod(fn: Function, target: any, receiver: any): Function {
 const renderProxyHandlers = {
   get(target: ComponentInstance<any, any>, key: string, receiver: any) {
     let i: any
-    if (key === '_self') {
+    if (key === '$self') {
       return target
     } else if ((i = target._rawData) !== null && i.hasOwnProperty(key)) {
       // data

diff --git a/packages/runtime-core/src/errorHandling.ts b/packages/runtime-core/src/errorHandling.ts
index 2d427684816a5a053343e195fbe0167037d627b1..4e61b60165fba94bad01891171fdb758344a5bb3 100644 (file)
--- a/packages/runtime-core/src/errorHandling.ts
+++ b/packages/runtime-core/src/errorHandling.ts
@@ -56,11 +56,11 @@ export function callLifecycleHookWithHandler(
     const res = hook.call(instanceProxy, arg)
     if (res && !res._isVue && typeof res.then === 'function') {
       ;(res as Promise<any>).catch(err => {
-        handleError(err, instanceProxy._self, type)
+        handleError(err, instanceProxy.$self, type)
       })
     }
   } catch (err) {
-    handleError(err, instanceProxy._self, type)
+    handleError(err, instanceProxy.$self, type)
   }
 }
 
@@ -88,7 +88,7 @@ export function handleError(
     cur = (instance as ComponentInstance).$parent
   }
   while (cur) {
-    cur = cur._self
+    cur = cur.$self
     const handler = cur.errorCaptured
     if (handler) {
       try {
@@ -116,8 +116,9 @@ function logError(err: Error, type: ErrorTypes, contextVNode: VNode | null) {
     }
     if (/private field/.test(err.message)) {
       warn(
-        `Private fields are not supported in component classes because they ` +
-          `cannot be tunneled through Proxies.`
+        `Private fields cannot be accessed directly on \`this\` in a component ` +
+          `class because they cannot be tunneled through Proxies. ` +
+          `Use \`this.$self.#field\` instead.`
       )
     } else {
       warn(`Unhandled error${info ? ` ${info}` : ``}`)