await nextTick()
expect(serializeInner(root)).toBe(`<div>11</div>`)
- // Update text while preserving state
- rerender(
- parentId,
- compileToFunction(
- `<div @click="count++">{{ count }}!<Child>{{ count }}</Child></div>`
- )
- )
- expect(serializeInner(root)).toBe(`<div>1!1</div>`)
+ // // Update text while preserving state
+ // rerender(
+ // parentId,
+ // compileToFunction(
+
// `<div @click="count++">{{ count }}!<Child>{{ count }}</Child></div>`
+ // )
+ // )
+
// expect(serializeInner(root)).toBe(`<div>1!1</div>`)
// Should force child update on slot content change
rerender(
exposeRenderContextOnDevProxyTarget
} from './componentProxy'
import { ComponentPropsOptions, initProps } from './componentProps'
-import { Slots, resolveSlots } from './componentSlots'
+import { Slots, initSlots, InternalSlots } from './componentSlots'
import { warn } from './warning'
import { ErrorCodes, callWithErrorHandling } from './errorHandling'
import { AppContext, createAppContext, AppConfig } from './apiCreateApp'
data: Data
props: Data
attrs: Data
- slots: Slots
+ slots: InternalSlots
proxy: ComponentPublicInstance | null
proxyTarget: ComponentPublicProxyTarget
// alternative proxy used only for runtime-compiled render functions using
const { props, children, shapeFlag } = instance.vnode
const isStateful = shapeFlag & ShapeFlags.STATEFUL_COMPONENT
initProps(instance, props, isStateful, isSSR)
- resolveSlots(instance, children)
+ initSlots(instance, children)
const setupResult = isStateful
? setupStatefulComponent(instance, isSSR)
}
}
-// used to identify a setup context proxy
-export const SetupProxySymbol = Symbol()
-
-const SetupProxyHandlers: { [key: string]: ProxyHandler<any> } = {}
-;['attrs', 'slots'].forEach((type: string) => {
- SetupProxyHandlers[type] = {
- get: (instance, key) => {
- if (__DEV__) {
- markAttrsAccessed()
- }
- // if the user pass the slots proxy to h(), normalizeChildren should not
- // attempt to attach ctx to the object
- if (key === '_') return 1
- return instance[type][key]
- },
- has: (instance, key) => key === SetupProxySymbol || key in instance[type],
- ownKeys: instance => Reflect.ownKeys(instance[type]),
- // this is necessary for ownKeys to work properly
- getOwnPropertyDescriptor: (instance, key) =>
- Reflect.getOwnPropertyDescriptor(instance[type], key),
- set: () => false,
- deleteProperty: () => false
+const slotsHandlers: ProxyHandler<InternalSlots> = {
+ set: () => {
+ warn(`setupContext.slots is readonly.`)
+ return false
+ },
+ deleteProperty: () => {
+ warn(`setupContext.slots is readonly.`)
+ return false
}
-})
+}
-const attrsProxyHandlers: ProxyHandler<Data> = {
- get(target, key: string) {
- if (__DEV__) {
- markAttrsAccessed()
- }
+const attrHandlers: ProxyHandler<Data> = {
+ get: (target, key: string) => {
+ markAttrsAccessed()
return target[key]
},
- set: () => false,
- deleteProperty: () => false
+ set: () => {
+ warn(`setupContext.attrs is readonly.`)
+ return false
+ },
+ deleteProperty: () => {
+ warn(`setupContext.attrs is readonly.`)
+ return false
+ }
}
function createSetupContext(instance: ComponentInternalInstance): SetupContext {
- const context = {
- // attrs & slots are non-reactive, but they need to always expose
- // the latest values (instance.xxx may get replaced during updates) so we
- // need to expose them through a proxy
- attrs: __DEV__
- ? new Proxy(instance.attrs, attrsProxyHandlers)
- : instance.attrs,
- slots: new Proxy(instance, SetupProxyHandlers.slots),
- get emit() {
- return instance.emit
+ if (__DEV__) {
+ // We use getters in dev in case libs like test-utils overwrite instance
+ // properties (overwrites should not be done in prod)
+ return Object.freeze({
+ get attrs() {
+ return new Proxy(instance.attrs, attrHandlers)
+ },
+ get slots() {
+ return new Proxy(instance.slots, slotsHandlers)
+ },
+ get emit() {
+ return instance.emit
+ }
+ })
+ } else {
+ return {
+ attrs: instance.attrs,
+ slots: instance.slots,
+ emit: instance.emit
}
}
- return __DEV__ ? Object.freeze(context) : context
}
// record effects created during a component's setup() so that they can be
VNode,
VNodeNormalizedChildren,
normalizeVNode,
- VNodeChild
+ VNodeChild,
+ InternalObjectSymbol
} from './vnode'
-import { isArray, isFunction, EMPTY_OBJ, ShapeFlags } from '@vue/shared'
+import {
+ isArray,
+ isFunction,
+ EMPTY_OBJ,
+ ShapeFlags,
+ PatchFlags,
+ extend,
+ def
+} from '@vue/shared'
import { warn } from './warning'
import { isKeepAlive } from './components/KeepAlive'
import { withCtx } from './helpers/withRenderContext'
// internal, for tracking slot owner instance. This is attached during
// normalizeChildren when the component vnode is created.
_ctx?: ComponentInternalInstance | null
- // internal, indicates compiler generated slots = can skip normalization
+ // internal, indicates compiler generated slots
_?: 1
}
+const isInternalKey = (key: string) => key[0] === '_' || key === '$stable'
+
const normalizeSlotValue = (value: unknown): VNode[] =>
isArray(value)
? value.map(normalizeVNode)
return normalizeSlotValue(rawSlot(props))
}, ctx)
-export function resolveSlots(
+const normalizeObjectSlots = (rawSlots: RawSlots, slots: InternalSlots) => {
+ const ctx = rawSlots._ctx
+ for (const key in rawSlots) {
+ if (isInternalKey(key)) continue
+ const value = rawSlots[key]
+ if (isFunction(value)) {
+ slots[key] = normalizeSlot(key, value, ctx)
+ } else if (value != null) {
+ if (__DEV__) {
+ warn(
+ `Non-function value encountered for slot "${key}". ` +
+ `Prefer function slots for better performance.`
+ )
+ }
+ const normalized = normalizeSlotValue(value)
+ slots[key] = () => normalized
+ }
+ }
+}
+
+const normalizeVNodeSlots = (
instance: ComponentInternalInstance,
children: VNodeNormalizedChildren
-) {
- let slots: InternalSlots | void
+) => {
+ if (__DEV__ && !isKeepAlive(instance.vnode)) {
+ warn(
+ `Non-function value encountered for default slot. ` +
+ `Prefer function slots for better performance.`
+ )
+ }
+ const normalized = normalizeSlotValue(children)
+ instance.slots.default = () => normalized
+}
+
+export const initSlots = (
+ instance: ComponentInternalInstance,
+ children: VNodeNormalizedChildren
+) => {
if (instance.vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN) {
- const rawSlots = children as RawSlots
- if (rawSlots._ === 1) {
- // pre-normalized slots object generated by compiler
- slots = children as Slots
+ if ((children as RawSlots)._ === 1) {
+ instance.slots = children as InternalSlots
} else {
- slots = {}
- const ctx = rawSlots._ctx
- for (const key in rawSlots) {
- if (key === '$stable' || key === '_ctx') continue
- const value = rawSlots[key]
- if (isFunction(value)) {
- slots[key] = normalizeSlot(key, value, ctx)
- } else if (value != null) {
- if (__DEV__) {
- warn(
- `Non-function value encountered for slot "${key}". ` +
- `Prefer function slots for better performance.`
- )
- }
- const normalized = normalizeSlotValue(value)
- slots[key] = () => normalized
- }
+ normalizeObjectSlots(children as RawSlots, (instance.slots = {}))
+ }
+ } else {
+ instance.slots = {}
+ if (children) {
+ normalizeVNodeSlots(instance, children)
+ }
+ }
+ def(instance.slots, InternalObjectSymbol, true)
+}
+
+export const updateSlots = (
+ instance: ComponentInternalInstance,
+ children: VNodeNormalizedChildren
+) => {
+ const { vnode, slots } = instance
+ let needDeletionCheck = true
+ let deletionComparisonTarget = EMPTY_OBJ
+ if (vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN) {
+ if ((children as RawSlots)._ === 1) {
+ if (!(vnode.patchFlag & PatchFlags.DYNAMIC_SLOTS)) {
+ // compiled AND static. this means we can skip removal of potential
+ // stale slots
+ needDeletionCheck = false
+ }
+ // HMR force update
+ if (__DEV__ && instance.parent && instance.parent.renderUpdated) {
+ extend(slots, children as Slots)
}
+ } else {
+ needDeletionCheck = !(children as RawSlots).$stable
+ normalizeObjectSlots(children as RawSlots, slots)
}
+ deletionComparisonTarget = children as RawSlots
} else if (children) {
// non slot object children (direct value) passed to a component
- if (__DEV__ && !isKeepAlive(instance.vnode)) {
- warn(
- `Non-function value encountered for default slot. ` +
- `Prefer function slots for better performance.`
- )
+ normalizeVNodeSlots(instance, children)
+ deletionComparisonTarget = { default: 1 }
+ }
+
+ // delete stale slots
+ if (needDeletionCheck) {
+ for (const key in slots) {
+ if (!isInternalKey(key) && !(key in deletionComparisonTarget)) {
+ delete slots[key]
+ }
}
- const normalized = normalizeSlotValue(children)
- slots = { default: () => normalized }
}
- instance.slots = slots || EMPTY_OBJ
}
} from './scheduler'
import { effect, stop, ReactiveEffectOptions, isRef } from '@vue/reactivity'
import { updateProps } from './componentProps'
-import { resolveSlots } from './componentSlots'
+import { updateSlots } from './componentSlots'
import { pushWarningContext, popWarningContext, warn } from './warning'
import { ComponentPublicInstance } from './componentProxy'
import { createAppAPI, CreateAppFunction } from './apiCreateApp'
instance.vnode = nextVNode
instance.next = null
updateProps(instance, nextVNode.props, optimized)
- resolveSlots(instance, nextVNode.children)
+ updateSlots(instance, nextVNode.children)
}
const patchChildren: PatchChildrenFn = (
return
} else {
type = ShapeFlags.SLOTS_CHILDREN
- if (!(children as RawSlots)._) {
+ if (!(children as RawSlots)._ && !(InternalObjectSymbol in children!)) {
+ // if slots are not normalized, attach context instance
+ // (compiled / normalized slots already have context)
;(children as RawSlots)._ctx = currentRenderingInstance
}
}
projects / thirdparty / vuejs / core.git / commitdiff
