Skip to content

Commit

Permalink
fix(runtime-core): avoid manual slot invocation in template expressio…
Browse files Browse the repository at this point in the history
…ns interfering with block tracking

fix #1745
  • Loading branch information
yyx990803 committed Aug 6, 2020
1 parent 233d191 commit 791eff3
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 19 deletions.
29 changes: 28 additions & 1 deletion packages/runtime-core/__tests__/helpers/renderSlot.spec.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
import { renderSlot } from '../../src/helpers/renderSlot'
import { h } from '../../src/h'
import {
h,
withCtx,
createVNode,
openBlock,
createBlock,
Fragment
} from '../../src'
import { PatchFlags } from '@vue/shared/src'

describe('renderSlot', () => {
it('should render slot', () => {
Expand All @@ -20,4 +28,23 @@ describe('renderSlot', () => {
renderSlot({ default: (_a, _b, _c) => [h('child')] }, 'default')
expect('SSR-optimized slot function detected').toHaveBeenWarned()
})

// #1745
it('should force enable tracking', () => {
const slot = withCtx(
() => {
return [createVNode('div', null, 'foo', PatchFlags.TEXT)]
},
// mock instance
{} as any
)

// manual invocation should not track
const manual = (openBlock(), createBlock(Fragment, null, slot()))
expect(manual.dynamicChildren!.length).toBe(0)

// renderSlot should track
const templateRendered = renderSlot({ default: slot }, 'default')
expect(templateRendered.dynamicChildren!.length).toBe(1)
})
})
29 changes: 18 additions & 11 deletions packages/runtime-core/src/helpers/renderSlot.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
import { PatchFlags, SlotFlags } from '@vue/shared'
import { warn } from '../warning'

export let isRenderingTemplateSlot = false

/**
* Compiler runtime helper for rendering `<slot/>`
* @private
Expand All @@ -33,15 +35,20 @@ export function renderSlot(
slot = () => []
}

return (
openBlock(),
createBlock(
Fragment,
{ key: props.key },
slot ? slot(props) : fallback ? fallback() : [],
(slots as RawSlots)._ === SlotFlags.STABLE
? PatchFlags.STABLE_FRAGMENT
: PatchFlags.BAIL
)
)
// a compiled slot disables block tracking by default to avoid manual
// invocation interfering with template-based block tracking, but in
// `renderSlot` we can be sure that it's template-based so we can force
// enable it.
isRenderingTemplateSlot = true
const rendered = (openBlock(),
createBlock(
Fragment,
{ key: props.key },
slot ? slot(props) : fallback ? fallback() : [],
(slots as RawSlots)._ === SlotFlags.STABLE
? PatchFlags.STABLE_FRAGMENT
: PatchFlags.BAIL
))
isRenderingTemplateSlot = false
return rendered
}
6 changes: 6 additions & 0 deletions packages/runtime-core/src/helpers/withRenderContext.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
currentRenderingInstance
} from '../componentRenderUtils'
import { ComponentInternalInstance } from '../component'
import { setBlockTracking } from '../vnode'

/**
* Wrap a slot function to memoize current rendering instance
Expand All @@ -15,10 +16,15 @@ export function withCtx(
) {
if (!ctx) return fn
return function renderFnWithContext() {
// By default, compiled slots disables block tracking since the user may
// call it inside a template expression (#1745). It should only track when
// it's called by a template `<slot>`.
setBlockTracking(-1)
const owner = currentRenderingInstance
setCurrentRenderingInstance(ctx)
const res = fn.apply(null, arguments as any)
setCurrentRenderingInstance(owner)
setBlockTracking(1)
return res
}
}
17 changes: 10 additions & 7 deletions packages/runtime-core/src/vnode.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import { currentRenderingInstance } from './componentRenderUtils'
import { RendererNode, RendererElement } from './renderer'
import { NULL_DYNAMIC_COMPONENT } from './helpers/resolveAssets'
import { hmrDirtyComponents } from './hmr'
import { isRenderingTemplateSlot } from './helpers/renderSlot'

export const Fragment = (Symbol(__DEV__ ? 'Fragment' : undefined) as any) as {
__isFragment: true
Expand Down Expand Up @@ -400,18 +401,20 @@ function _createVNode(

normalizeChildren(vnode, children)

// presence of a patch flag indicates this node needs patching on updates.
// component nodes also should always be patched, because even if the
// component doesn't need to update, it needs to persist the instance on to
// the next vnode so that it can be properly unmounted later.
if (
shouldTrack > 0 &&
(shouldTrack > 0 || isRenderingTemplateSlot) &&
// avoid a block node from tracking itself
!isBlockNode &&
// has current parent block
currentBlock &&
// presence of a patch flag indicates this node needs patching on updates.
// component nodes also should always be patched, because even if the
// component doesn't need to update, it needs to persist the instance on to
// the next vnode so that it can be properly unmounted later.
(patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
// the EVENTS flag is only for hydration and if it is the only flag, the
// vnode should not be considered dynamic due to handler caching.
patchFlag !== PatchFlags.HYDRATE_EVENTS &&
(patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT)
patchFlag !== PatchFlags.HYDRATE_EVENTS
) {
currentBlock.push(vnode)
}
Expand Down

0 comments on commit 791eff3

Please sign in to comment.