theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(attr-fallthrough): ensure consistent attr fallthrough for root fragments with comments

Browse Source 
fix #2549
This commit is contained in:
Evan You 2020-11-27 18:04:26 -05:00
parent 3532b2b021
commit 3bc2914e32
5 changed files with 170 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/compiler-core/__tests__/transform.spec.ts
View File

@ -342,5 +342,24 @@ describe('compiler: transform', () => {
) )
) )
}) })
test('multiple children w/ single root + comments', () => {
const ast = transformWithCodegen(`<!--foo--><div/><!--bar-->`)
expect(ast.codegenNode).toMatchObject(
createBlockMatcher(
FRAGMENT,
undefined,
[
{ type: NodeTypes.COMMENT },
{ type: NodeTypes.ELEMENT, tag: `div` },
{ type: NodeTypes.COMMENT }
] as any,
genFlagText([
PatchFlags.STABLE_FRAGMENT,
PatchFlags.DEV_ROOT_FRAGMENT
])
)
)
})
}) })
}) })

15
packages/compiler-core/src/transform.ts
View File

@ -314,14 +314,23 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
} }
} else if (children.length > 1) { } else if (children.length > 1) {
// root has multiple nodes - return a fragment block. // root has multiple nodes - return a fragment block.
let patchFlag = PatchFlags.STABLE_FRAGMENT
let patchFlagText = PatchFlagNames[PatchFlags.STABLE_FRAGMENT]
// check if the fragment actually contains a single valid child with
// the rest being comments
if (
__DEV__ &&
children.filter(c => c.type !== NodeTypes.COMMENT).length === 1
) {
patchFlag |= PatchFlags.DEV_ROOT_FRAGMENT
patchFlagText += `, ${PatchFlagNames[PatchFlags.DEV_ROOT_FRAGMENT]}`
}
root.codegenNode = createVNodeCall( root.codegenNode = createVNodeCall(
context, context,
helper(FRAGMENT), helper(FRAGMENT),
undefined, undefined,
root.children, root.children,
`${PatchFlags.STABLE_FRAGMENT} /* ${ patchFlag + (__DEV__ ? ` /* ${patchFlagText} */` : ``),
PatchFlagNames[PatchFlags.STABLE_FRAGMENT]
} */`,
undefined, undefined,
undefined, undefined,
true true

10
packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts
View File

@ -13,6 +13,7 @@ import {
createCommentVNode, createCommentVNode,
Fragment Fragment
} from '@vue/runtime-dom' } from '@vue/runtime-dom'
import { PatchFlags } from '@vue/shared/src'
describe('attribute fallthrough', () => { describe('attribute fallthrough', () => {
it('should allow attrs to fallthrough', async () => { it('should allow attrs to fallthrough', async () => {
@ -574,11 +575,16 @@ describe('attribute fallthrough', () => {
setup() { setup() {
return () => ( return () => (
openBlock(), openBlock(),
createBlock(Fragment, null, [ createBlock(
Fragment,
null,
[
createCommentVNode('hello'), createCommentVNode('hello'),
h('button'), h('button'),
createCommentVNode('world') createCommentVNode('world')
]) ],
PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT
)
) )
} }
} }

53
packages/runtime-core/src/componentRenderUtils.ts
View File

@ -9,7 +9,6 @@ import {
createVNode, createVNode,
Comment, Comment,
cloneVNode, cloneVNode,
Fragment,
VNodeArrayChildren, VNodeArrayChildren,
isVNode isVNode
} from './vnode' } from './vnode'
@ -20,8 +19,10 @@ import { isHmrUpdating } from './hmr'
import { NormalizedProps } from './componentProps' import { NormalizedProps } from './componentProps'
import { isEmitListener } from './componentEmits' import { isEmitListener } from './componentEmits'
// mark the current rendering instance for asset resolution (e.g. /**
// resolveComponent, resolveDirective) during render * mark the current rendering instance for asset resolution (e.g.
* resolveComponent, resolveDirective) during render
*/
export let currentRenderingInstance: ComponentInternalInstance | null = null export let currentRenderingInstance: ComponentInternalInstance | null = null
export function setCurrentRenderingInstance( export function setCurrentRenderingInstance(
@ -30,9 +31,11 @@ export function setCurrentRenderingInstance(
currentRenderingInstance = instance currentRenderingInstance = instance
} }
// dev only flag to track whether $attrs was used during render. /**
// If $attrs was used during render then the warning for failed attrs * dev only flag to track whether $attrs was used during render.
// fallthrough can be suppressed. * If $attrs was used during render then the warning for failed attrs
* fallthrough can be suppressed.
*/
let accessedAttrs: boolean = false let accessedAttrs: boolean = false
export function markAttrsAccessed() { export function markAttrsAccessed() {
@ -116,7 +119,7 @@ export function renderComponentRoot(
// to have comments along side the root element which makes it a fragment // to have comments along side the root element which makes it a fragment
let root = result let root = result
let setRoot: ((root: VNode) => void) | undefined = undefined let setRoot: ((root: VNode) => void) | undefined = undefined
if (__DEV__) { if (__DEV__ && result.patchFlag & PatchFlags.DEV_ROOT_FRAGMENT) {
;[root, setRoot] = getChildRoot(result) ;[root, setRoot] = getChildRoot(result)
} }
@ -222,9 +225,6 @@ export function renderComponentRoot(
const getChildRoot = ( const getChildRoot = (
vnode: VNode vnode: VNode
): [VNode, ((root: VNode) => void) | undefined] => { ): [VNode, ((root: VNode) => void) | undefined] => {
if (vnode.type !== Fragment) {
return [vnode, undefined]
}
const rawChildren = vnode.children as VNodeArrayChildren const rawChildren = vnode.children as VNodeArrayChildren
const dynamicChildren = vnode.dynamicChildren const dynamicChildren = vnode.dynamicChildren
const childRoot = filterSingleRoot(rawChildren) const childRoot = filterSingleRoot(rawChildren)
@ -246,18 +246,27 @@ const getChildRoot = (
return [normalizeVNode(childRoot), setRoot] return [normalizeVNode(childRoot), setRoot]
} }
/** export function filterSingleRoot(
* dev only children: VNodeArrayChildren
*/ ): VNode | undefined {
export function filterSingleRoot(children: VNodeArrayChildren): VNode | null { let singleRoot
const filtered = children.filter(child => { for (let i = 0; i < children.length; i++) {
return !( const child = children[i]
isVNode(child) && if (isVNode(child)) {
child.type === Comment && // ignore user comment
child.children !== 'v-if' if (child.type !== Comment || child.children === 'v-if') {
) if (singleRoot) {
}) // has more than 1 non-comment child, return now
return filtered.length === 1 && isVNode(filtered[0]) ? filtered[0] : null return
} else {
singleRoot = child
}
}
} else {
return
}
}
return singleRoot
} }
const getFunctionalFallthrough = (attrs: Data): Data | undefined => { const getFunctionalFallthrough = (attrs: Data): Data | undefined => {

155
packages/shared/src/patchFlags.ts
View File

@ -1,89 +1,127 @@
// Patch flags are optimization hints generated by the compiler. /**
// when a block with dynamicChildren is encountered during diff, the algorithm * Patch flags are optimization hints generated by the compiler.
// enters "optimized mode". In this mode, we know that the vdom is produced by * when a block with dynamicChildren is encountered during diff, the algorithm
// a render function generated by the compiler, so the algorithm only needs to * enters "optimized mode". In this mode, we know that the vdom is produced by
// handle updates explicitly marked by these patch flags. * a render function generated by the compiler, so the algorithm only needs to
* handle updates explicitly marked by these patch flags.
// Patch flags can be combined using the | bitwise operator and can be checked *
// using the & operator, e.g. * Patch flags can be combined using the | bitwise operator and can be checked
// * using the & operator, e.g.
// const flag = TEXT | CLASS *
// if (flag & TEXT) { ... } * ```js
// * const flag = TEXT | CLASS
// Check the `patchElement` function in './renderer.ts' to see how the * if (flag & TEXT) { ... }
// flags are handled during diff. * ```
*
* Check the `patchElement` function in './renderer.ts' to see how the
* flags are handled during diff.
*/
export const enum PatchFlags { export const enum PatchFlags {
// Indicates an element with dynamic textContent (children fast path) /**
* Indicates an element with dynamic textContent (children fast path)
*/
TEXT = 1, TEXT = 1,
// Indicates an element with dynamic class binding. /**
* Indicates an element with dynamic class binding.
*/
CLASS = 1 << 1, CLASS = 1 << 1,
// Indicates an element with dynamic style /**
// The compiler pre-compiles static string styles into static objects * Indicates an element with dynamic style
// + detects and hoists inline static objects * The compiler pre-compiles static string styles into static objects
// e.g. style="color: red" and :style="{ color: 'red' }" both get hoisted as * + detects and hoists inline static objects
// const style = { color: 'red' } * e.g. style="color: red" and :style="{ color: 'red' }" both get hoisted as
// render() { return e('div', { style }) } * const style = { color: 'red' }
* render() { return e('div', { style }) }
*/
STYLE = 1 << 2, STYLE = 1 << 2,
// Indicates an element that has non-class/style dynamic props. /**
// Can also be on a component that has any dynamic props (includes * Indicates an element that has non-class/style dynamic props.
// class/style). when this flag is present, the vnode also has a dynamicProps * Can also be on a component that has any dynamic props (includes
// array that contains the keys of the props that may change so the runtime * class/style). when this flag is present, the vnode also has a dynamicProps
// can diff them faster (without having to worry about removed props) * array that contains the keys of the props that may change so the runtime
* can diff them faster (without having to worry about removed props)
*/
PROPS = 1 << 3, PROPS = 1 << 3,
// Indicates an element with props with dynamic keys. When keys change, a full /**
// diff is always needed to remove the old key. This flag is mutually * Indicates an element with props with dynamic keys. When keys change, a full
// exclusive with CLASS, STYLE and PROPS. * diff is always needed to remove the old key. This flag is mutually
* exclusive with CLASS, STYLE and PROPS.
*/
FULL_PROPS = 1 << 4, FULL_PROPS = 1 << 4,
// Indicates an element with event listeners (which need to be attached /**
// during hydration) * Indicates an element with event listeners (which need to be attached
* during hydration)
*/
HYDRATE_EVENTS = 1 << 5, HYDRATE_EVENTS = 1 << 5,
// Indicates a fragment whose children order doesn't change. /**
* Indicates a fragment whose children order doesn't change.
*/
STABLE_FRAGMENT = 1 << 6, STABLE_FRAGMENT = 1 << 6,
// Indicates a fragment with keyed or partially keyed children /**
* Indicates a fragment with keyed or partially keyed children
*/
KEYED_FRAGMENT = 1 << 7, KEYED_FRAGMENT = 1 << 7,
// Indicates a fragment with unkeyed children. /**
* Indicates a fragment with unkeyed children.
*/
UNKEYED_FRAGMENT = 1 << 8, UNKEYED_FRAGMENT = 1 << 8,
// Indicates an element that only needs non-props patching, e.g. ref or /**
// directives (onVnodeXXX hooks). since every patched vnode checks for refs * Indicates an element that only needs non-props patching, e.g. ref or
// and onVnodeXXX hooks, it simply marks the vnode so that a parent block * directives (onVnodeXXX hooks). since every patched vnode checks for refs
// will track it. * and onVnodeXXX hooks, it simply marks the vnode so that a parent block
* will track it.
*/
NEED_PATCH = 1 << 9, NEED_PATCH = 1 << 9,
// Indicates a component with dynamic slots (e.g. slot that references a v-for /**
// iterated value, or dynamic slot names). * Indicates a component with dynamic slots (e.g. slot that references a v-for
// Components with this flag are always force updated. * iterated value, or dynamic slot names).
* Components with this flag are always force updated.
*/
DYNAMIC_SLOTS = 1 << 10, DYNAMIC_SLOTS = 1 << 10,
// SPECIAL FLAGS ------------------------------------------------------------- /**
* Indicates a fragment that was created only because the user has placed
* comments at the root level of a template. This is a dev-only flag since
* comments are stripped in production.
*/
DEV_ROOT_FRAGMENT = 1 << 11,
// Special flags are negative integers. They are never matched against using /**
// bitwise operators (bitwise matching should only happen in branches where * SPECIAL FLAGS -------------------------------------------------------------
// patchFlag > 0), and are mutually exclusive. When checking for a special * Special flags are negative integers. They are never matched against using
// flag, simply check patchFlag === FLAG. * bitwise operators (bitwise matching should only happen in branches where
* patchFlag > 0), and are mutually exclusive. When checking for a special
* flag, simply check patchFlag === FLAG.
*/
// Indicates a hoisted static vnode. This is a hint for hydration to skip /**
// the entire sub tree since static content never needs to be updated. * Indicates a hoisted static vnode. This is a hint for hydration to skip
* the entire sub tree since static content never needs to be updated.
*/
HOISTED = -1, HOISTED = -1,
/**
// A special flag that indicates that the diffing algorithm should bail out * A special flag that indicates that the diffing algorithm should bail out
// of optimized mode. For example, on block fragments created by renderSlot() * of optimized mode. For example, on block fragments created by renderSlot()
// when encountering non-compiler generated slots (i.e. manually written * when encountering non-compiler generated slots (i.e. manually written
// render functions, which should always be fully diffed) * render functions, which should always be fully diffed)
// OR manually cloneVNodes * OR manually cloneVNodes
*/
BAIL = -2 BAIL = -2
} }
// dev only flag -> name mapping /**
* dev only flag -> name mapping
*/
export const PatchFlagNames = { export const PatchFlagNames = {
[PatchFlags.TEXT]: `TEXT`, [PatchFlags.TEXT]: `TEXT`,
[PatchFlags.CLASS]: `CLASS`, [PatchFlags.CLASS]: `CLASS`,
@ -94,8 +132,9 @@ export const PatchFlagNames = {
[PatchFlags.STABLE_FRAGMENT]: `STABLE_FRAGMENT`, [PatchFlags.STABLE_FRAGMENT]: `STABLE_FRAGMENT`,
[PatchFlags.KEYED_FRAGMENT]: `KEYED_FRAGMENT`, [PatchFlags.KEYED_FRAGMENT]: `KEYED_FRAGMENT`,
[PatchFlags.UNKEYED_FRAGMENT]: `UNKEYED_FRAGMENT`, [PatchFlags.UNKEYED_FRAGMENT]: `UNKEYED_FRAGMENT`,
[PatchFlags.DYNAMIC_SLOTS]: `DYNAMIC_SLOTS`,
[PatchFlags.NEED_PATCH]: `NEED_PATCH`, [PatchFlags.NEED_PATCH]: `NEED_PATCH`,
[PatchFlags.DYNAMIC_SLOTS]: `DYNAMIC_SLOTS`,
[PatchFlags.DEV_ROOT_FRAGMENT]: `DEV_ROOT_FRAGMENT`,
[PatchFlags.HOISTED]: `HOISTED`, [PatchFlags.HOISTED]: `HOISTED`,
[PatchFlags.BAIL]: `BAIL` [PatchFlags.BAIL]: `BAIL`
} }