refactor(runtime-core): remove need for internal instance sink

packages/runtime-core/__tests__/componentProxy.spec.ts

@@ -101,7 +101,7 @@ describe('component: proxy', () => {
  expect(`Attempting to mutate public property "$data"`).toHaveBeenWarned()
  })
 
- test('sink', async () => {
+ test('user attached properties', async () => {
  let instance: ComponentInternalInstance
  let instanceProxy: any
  const Comp = {
@@ -116,7 +116,7 @@ describe('component: proxy', () => {
  render(h(Comp), nodeOps.createElement('div'))
  instanceProxy.foo = 1
  expect(instanceProxy.foo).toBe(1)
- expect(instance!.sink.foo).toBe(1)
+ expect(instance!.proxyTarget.foo).toBe(1)
  })
 
  test('globalProperties', () => {
@@ -140,8 +140,8 @@ describe('component: proxy', () => {
 
  // set should overwrite globalProperties with local
  instanceProxy.foo = 2
- expect(instanceProxy.foo).toBe(2)
- expect(instance!.sink.foo).toBe(2)
+ // expect(instanceProxy.foo).toBe(2)
+ expect(instance!.proxyTarget.foo).toBe(2)
  // should not affect global
  expect(app.config.globalProperties.foo).toBe(1)
  })
@@ -188,7 +188,7 @@ describe('component: proxy', () => {
  expect('$foobar' in instanceProxy).toBe(false)
  expect('baz' in instanceProxy).toBe(false)
 
- // set non-existent (goes into sink)
+ // set non-existent (goes into proxyTarget sink)
  instanceProxy.baz = 1
  expect('baz' in instanceProxy).toBe(true)
 

packages/runtime-core/src/component.ts

@@ -143,6 +143,11 @@ export interface ComponentInternalInstance {
  attrs: Data
  slots: InternalSlots
  proxy: ComponentPublicInstance | null
+ // The target object for the public instance proxy. In dev mode, we also
+ // define getters for all known instance properties on it so it can be
+ // properly inspected in the console. These getters are skipped in prod mode
+ // for performance. In addition, any user attached properties
+ // (via `this.x = ...`) are also stored on this object.
  proxyTarget: ComponentPublicProxyTarget
  // alternative proxy used only for runtime-compiled render functions using
  // `with` block
@@ -156,9 +161,6 @@ export interface ComponentInternalInstance {
  asyncDep: Promise<any> | null
  asyncResolved: boolean
 
- // storage for any extra properties
- sink: { [key: string]: any }
-
  // lifecycle
  isMounted: boolean
  isUnmounted: boolean
@@ -230,10 +232,6 @@ export function createComponentInstance(
  asyncDep: null,
  asyncResolved: false,
 
- // user namespace for storing whatever the user assigns to `this`
- // can also be used as a wildcard storage for ad-hoc injections internally
- sink: {},
-
  // lifecycle hooks
  // not using enums here because it results in computed properties
  isMounted: false,

packages/runtime-core/src/componentProxy.ts

@@ -95,7 +95,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
  props,
  accessCache,
  type,
- sink,
+ proxyTarget,
  appContext
  } = instance
 
@@ -136,16 +136,17 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
  }
  }
 
- // public $xxx properties & user-attached properties (sink)
+ // public $xxx properties &
+ // user-attached properties (falls through to proxyTarget)
  const publicGetter = publicPropertiesMap[key]
  let cssModule, globalProperties
  if (publicGetter) {
  if (__DEV__ && key === '$attrs') {
  markAttrsAccessed()
  }
  return publicGetter(instance)
- } else if (hasOwn(sink, key)) {
- return sink[key]
+ } else if (hasOwn(proxyTarget, key)) {
+ return proxyTarget[key]
  } else if (
  (cssModule = type.__cssModules) &&
  (cssModule = cssModule[key])
@@ -190,8 +191,13 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
  )
  return false
  } else {
- instance.sink[key] = value
- if (__DEV__) {
+ if (__DEV__ && key in instance.appContext.config.globalProperties) {
+ Object.defineProperty(instance.proxyTarget, key, {
+ configurable: true,
+ enumerable: true,
+ value
+ })
+ } else {
  instance.proxyTarget[key] = value
  }
  }
@@ -200,7 +206,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
 
  has(
  {
- _: { data, accessCache, renderContext, type, sink, appContext }
+ _: { data, accessCache, renderContext, type, proxyTarget, appContext }
  }: ComponentPublicProxyTarget,
  key: string
  ) {
@@ -210,7 +216,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
  hasOwn(renderContext, key) ||
  (type.props && hasOwn(normalizePropsOptions(type.props)[0]!, key)) ||
  hasOwn(publicPropertiesMap, key) ||
- hasOwn(sink, key) ||
+ hasOwn(proxyTarget, key) ||
  hasOwn(appContext.config.globalProperties, key)
  )
  }

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

@@ -18,7 +18,6 @@ import {
  invokeArrayFns
 } from '@vue/shared'
 import { watch } from '../apiWatch'
-import { SuspenseBoundary } from './Suspense'
 import {
  RendererInternals,
  queuePostRenderEffect,
@@ -27,6 +26,7 @@ import {
  RendererNode
 } from '../renderer'
 import { setTransitionHooks } from './BaseTransition'
+import { ComponentPublicProxyTarget } from '../componentProxy'
 
 type MatchPattern = string | RegExp | string[] | RegExp[]
 
@@ -40,9 +40,8 @@ type CacheKey = string | number | Component
 type Cache = Map<CacheKey, VNode>
 type Keys = Set<CacheKey>
 
-export interface KeepAliveSink {
+export interface KeepAliveContext extends ComponentPublicProxyTarget {
  renderer: RendererInternals
- parentSuspense: SuspenseBoundary | null
  activate: (
  vnode: VNode,
  container: RendererElement,
@@ -76,25 +75,25 @@ const KeepAliveImpl = {
  let current: VNode | null = null
 
  const instance = getCurrentInstance()!
+ const parentSuspense = instance.suspense
 
- // KeepAlive communicates with the instantiated renderer via the "sink"
- // where the renderer passes in platform-specific functions, and the
- // KeepAlive instance exposes activate/deactivate implementations.
+ // KeepAlive communicates with the instantiated renderer via the proxyTarget
+ // as a shared context where the renderer passes in its internals,
+ // and the KeepAlive instance exposes activate/deactivate implementations.
  // The whole point of this is to avoid importing KeepAlive directly in the
  // renderer to facilitate tree-shaking.
- const sink = instance.sink as KeepAliveSink
+ const sharedContext = instance.proxyTarget as KeepAliveContext
  const {
  renderer: {
  p: patch,
  m: move,
  um: _unmount,
  o: { createElement }
- },
- parentSuspense
- } = sink
+ }
+ } = sharedContext
  const storageContainer = createElement('div')
 
- sink.activate = (vnode, container, anchor, isSVG, optimized) => {
+ sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {
  const child = vnode.component!
  move(vnode, container, anchor, MoveType.ENTER, parentSuspense)
  // in case props have changed
@@ -116,7 +115,7 @@ const KeepAliveImpl = {
  }, parentSuspense)
  }
 
- sink.deactivate = (vnode: VNode) => {
+ sharedContext.deactivate = (vnode: VNode) => {
  move(vnode, storageContainer, null, MoveType.LEAVE, parentSuspense)
  queuePostRenderEffect(() => {
  const component = vnode.component!

packages/runtime-core/src/renderer.ts

@@ -53,7 +53,7 @@ import {
  SuspenseImpl
 } from './components/Suspense'
 import { TeleportImpl } from './components/Teleport'
-import { KeepAliveSink, isKeepAlive } from './components/KeepAlive'
+import { isKeepAlive, KeepAliveContext } from './components/KeepAlive'
 import { registerHMR, unregisterHMR } from './hmr'
 import {
  ErrorCodes,
@@ -949,7 +949,7 @@ function baseCreateRenderer(
  ) => {
  if (n1 == null) {
  if (n2.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
- ;(parentComponent!.sink as KeepAliveSink).activate(
+ ;(parentComponent!.proxyTarget as KeepAliveContext).activate(
  n2,
  container,
  anchor,
@@ -998,9 +998,7 @@ function baseCreateRenderer(
 
  // inject renderer internals for keepAlive
  if (isKeepAlive(initialVNode)) {
- const sink = instance.sink as KeepAliveSink
- sink.renderer = internals
- sink.parentSuspense = parentSuspense
+ ;(instance.proxyTarget as KeepAliveContext).renderer = internals
  }
 
  // resolve props and slots for setup context
@@ -1721,7 +1719,7 @@ function baseCreateRenderer(
 
  if (shapeFlag & ShapeFlags.COMPONENT) {
  if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
- ;(parentComponent!.sink as KeepAliveSink).deactivate(vnode)
+ ;(parentComponent!.proxyTarget as KeepAliveContext).deactivate(vnode)
  } else {
  unmountComponent(vnode.component!, parentSuspense, doRemove)
  }