feat: remove component proxy

Author: RobbinBaauw

packages/compiler-core/src/runtimeHelpers.ts

@@ -27,11 +27,15 @@ export const PUSH_SCOPE_ID = Symbol(__DEV__ ? `pushScopeId` : ``)
 export const POP_SCOPE_ID = Symbol(__DEV__ ? `popScopeId` : ``)
 export const WITH_SCOPE_ID = Symbol(__DEV__ ? `withScopeId` : ``)
 export const WITH_CTX = Symbol(__DEV__ ? `withCtx` : ``)
+export const PUBLIC_INSTANCE_HANDLERS = Symbol(
+  __DEV__ ? `PublicInstanceHandlers` : ``
+)
 
 // Name mapping for runtime helpers that need to be imported from 'vue' in
 // generated code. Make sure these are correctly exported in the runtime!
 // Using `any` here because TS doesn't allow symbols as index type.
 export const helperNameMap: any = {
+  [PUBLIC_INSTANCE_HANDLERS]: `PublicInstanceHandlers`,
   [FRAGMENT]: `Fragment`,
   [TELEPORT]: `Teleport`,
   [SUSPENSE]: `Suspense`,

packages/compiler-core/src/transforms/transformExpression.ts

@@ -31,6 +31,7 @@ import {
 import { createCompilerError, ErrorCodes } from '../errors'
 import { Node, Function, Identifier, ObjectProperty } from '@babel/types'
 import { validateBrowserExpression } from '../validateExpression'
+import { PUBLIC_INSTANCE_HANDLERS } from '@vue/compiler-core'
 
 const isLiteralWhitelisted = /*#__PURE__*/ makeMap('true,false,null,this')
 
@@ -102,10 +103,9 @@ export function processExpression(
 
   const { bindingMetadata } = context
   const prefix = (raw: string) => {
-    const source = hasOwn(bindingMetadata, raw)
-      ? `$` + bindingMetadata[raw]
-      : `_ctx`
-    return `${source}.${raw}`
+    return hasOwn(bindingMetadata, raw)
+      ? `${bindingMetadata[raw]}.${raw}`
+      : `_PublicInstanceHandlers.get(_ctx, "${raw}")`
   }
 
   // fast path if expression is a simple identifier.
@@ -119,6 +119,7 @@ export function processExpression(
       !isGloballyWhitelisted(rawExp) &&
       !isLiteralWhitelisted(rawExp)
     ) {
+      context.helper(PUBLIC_INSTANCE_HANDLERS)
       node.content = prefix(rawExp)
     } else if (!context.identifiers[rawExp] && !bailConstant) {
       // mark node constant for hoisting unless it's referring a scope variable
@@ -169,6 +170,7 @@ export function processExpression(
               // rewrite the value
               node.prefix = `${node.name}: `
             }
+            context.helper(PUBLIC_INSTANCE_HANDLERS)
             node.name = prefix(node.name)
             ids.push(node)
           } else if (!isStaticPropertyKey(node, parent)) {

packages/runtime-core/src/component.ts

@@ -1,6 +1,5 @@
 import { VNode, VNodeChild, isVNode } from './vnode'
 import {
-  reactive,
   ReactiveEffect,
   pauseTracking,
   resetTracking,
@@ -9,8 +8,6 @@ import {
 import {
   CreateComponentPublicInstance,
   ComponentPublicInstance,
-  PublicInstanceProxyHandlers,
-  RuntimeCompiledPublicInstanceProxyHandlers,
   createRenderContext,
   exposePropsOnRenderContext,
   exposeSetupStateOnRenderContext
@@ -473,7 +470,7 @@ function setupStatefulComponent(
   instance.accessCache = {}
   // 1. create public instance / render proxy
   // also mark it raw so it's never observed
-  instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers)
+  instance.proxy = instance.ctx as any
   if (__DEV__) {
     exposePropsOnRenderContext(instance)
   }
@@ -535,7 +532,7 @@ export function handleSetupResult(
     }
     // setup returned bindings.
     // assuming a render function compiled from template is present.
-    instance.setupState = reactive(setupResult)
+    instance.setupState = setupResult
     if (__DEV__) {
       exposeSetupStateOnRenderContext(instance)
     }
@@ -615,10 +612,7 @@ function finishComponentSetup(
     // proxy used needs a different `has` handler which is more performant and
     // also only allows a whitelist of globals to fallthrough.
     if (instance.render._rc) {
-      instance.withProxy = new Proxy(
-        instance.ctx,
-        RuntimeCompiledPublicInstanceProxyHandlers
-      )
+      instance.withProxy = instance.ctx as any
     }
   }
 

packages/runtime-core/src/componentProxy.ts

@@ -15,7 +15,8 @@ import {
   shallowReadonly,
   ReactiveFlags,
   track,
-  TrackOpTypes
+  TrackOpTypes,
+  unref
 } from '@vue/reactivity'
 import {
   ExtractComputedReturns,
@@ -198,8 +199,8 @@ export interface ComponentRenderContext {
   _: ComponentInternalInstance
 }
 
-export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
-  get({ _: instance }: ComponentRenderContext, key: string) {
+export class PublicInstanceHandlers {
+  static get({ _: instance }: ComponentRenderContext, key: string) {
     const {
       ctx,
       setupState,
@@ -227,7 +228,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
       if (n !== undefined) {
         switch (n) {
           case AccessTypes.SETUP:
-            return setupState[key]
+            return unref(setupState[key])
           case AccessTypes.DATA:
             return data[key]
           case AccessTypes.CONTEXT:
@@ -238,7 +239,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
         }
       } else if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {
         accessCache![key] = AccessTypes.SETUP
-        return setupState[key]
+        return unref(setupState[key])
       } else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
         accessCache![key] = AccessTypes.DATA
         return data[key]
@@ -304,9 +305,9 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
         )
       }
     }
-  },
+  }
 
-  set(
+  static set(
     { _: instance }: ComponentRenderContext,
     key: string,
     value: any
@@ -344,9 +345,9 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
       }
     }
     return true
-  },
+  }
 
-  has(
+  static has(
     {
       _: { data, setupState, accessCache, ctx, type, appContext }
     }: ComponentRenderContext,
@@ -366,40 +367,35 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
   }
 }
 
-if (__DEV__ && !__TEST__) {
-  PublicInstanceProxyHandlers.ownKeys = (target: ComponentRenderContext) => {
-    warn(
-      `Avoid app logic that relies on enumerating keys on a component instance. ` +
-        `The keys will be empty in production mode to avoid performance overhead.`
-    )
-    return Reflect.ownKeys(target)
+export class RuntimeCompiledPublicInstanceHandlers {
+  static set(
+    instance: ComponentRenderContext,
+    key: string,
+    value: any
+  ): boolean {
+    return PublicInstanceHandlers.set(instance, key, value)
   }
-}
 
-export const RuntimeCompiledPublicInstanceProxyHandlers = extend(
-  {},
-  PublicInstanceProxyHandlers,
-  {
-    get(target: ComponentRenderContext, key: string) {
-      // fast path for unscopables when using `with` block
-      if ((key as any) === Symbol.unscopables) {
-        return
-      }
-      return PublicInstanceProxyHandlers.get!(target, key, target)
-    },
-    has(_: ComponentRenderContext, key: string) {
-      const has = key[0] !== '_' && !isGloballyWhitelisted(key)
-      if (__DEV__ && !has && PublicInstanceProxyHandlers.has!(_, key)) {
-        warn(
-          `Property ${JSON.stringify(
-            key
-          )} should not start with _ which is a reserved prefix for Vue internals.`
-        )
-      }
-      return has
+  static get(target: ComponentRenderContext, key: string) {
+    // fast path for unscopables when using `with` block
+    if ((key as any) === Symbol.unscopables) {
+      return
     }
+    return PublicInstanceHandlers.get(target, key)
   }
-)
+
+  static has(_: ComponentRenderContext, key: string) {
+    const has = key[0] !== '_' && !isGloballyWhitelisted(key)
+    if (__DEV__ && !has && PublicInstanceHandlers.has(_, key)) {
+      warn(
+        `Property ${JSON.stringify(
+          key
+        )} should not start with _ which is a reserved prefix for Vue internals.`
+      )
+    }
+    return has
+  }
+}
 
 // In dev mode, the proxy target exposes the same properties as seen on `this`
 // for easier console inspection. In prod mode it will be an empty object so

packages/runtime-core/src/index.ts

@@ -168,6 +168,7 @@ export {
   RenderFunction
 } from './componentOptions'
 export {
+  PublicInstanceHandlers,
   ComponentPublicInstance,
   ComponentCustomProperties
 } from './componentProxy'

packages/runtime-core/src/renderer.ts

@@ -320,7 +320,10 @@ export const setRef = (
     refs[ref] = value
     if (hasOwn(setupState, ref)) {
       queuePostRenderEffect(() => {
-        setupState[ref] = value
+        const setupStateRef = setupState[ref]
+        if (isRef(setupStateRef)) {
+          setupStateRef.value = value
+        }
       }, parentSuspense)
     }
   } else if (isRef(ref)) {