[foo + bar]: bar
}, [
_createElementVNode("p", { "some-key": "foo" })
- ], 16)
+ ], 16 /* FULL_PROPS */)
}
}"
`;
"
return function render(_ctx, _cache) {
with (_ctx) {
- return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(), 1))
+ return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(), 1 /* TEXT */))
}
}"
`;
disableTracking: true,
props: undefined,
children: createCallExpression(RENDER_LIST),
- patchFlag: '1',
+ patchFlag: PatchFlags.TEXT,
dynamicProps: undefined,
directives: undefined,
loc: locStub,
disableTracking: false,
props: undefined,
children: createCallExpression(RENDER_LIST),
- patchFlag: genFlagText(PatchFlags.STABLE_FRAGMENT),
+ patchFlag: PatchFlags.STABLE_FRAGMENT,
dynamicProps: undefined,
directives: undefined,
loc: locStub,
),
],
// flag
- PatchFlags.FULL_PROPS + '',
+ PatchFlags.FULL_PROPS,
),
}),
)
[foo + bar]: bar
}, [
_${helperNameMap[CREATE_ELEMENT_VNODE]}("p", { "some-key": "foo" })
- ], ${PatchFlags.FULL_PROPS})`)
+ ], ${genFlagText(PatchFlags.FULL_PROPS)})`)
expect(code).toMatchSnapshot()
})
})
test('with patchFlag and no children/props', () => {
- expect(genCode(createVNodeCall(null, `"div"`, undefined, undefined, '1')))
- .toMatchInlineSnapshot(`
- "return _createElementVNode("div", null, null, 1)
- "
- `)
+ expect(
+ genCode(
+ createVNodeCall(null, `"div"`, undefined, undefined, PatchFlags.TEXT),
+ ),
+ ).toMatchInlineSnapshot(`
+ "return _createElementVNode("div", null, null, 1 /* TEXT */)
+ "
+ `)
})
test('as block', () => {
import { transformElement } from '../src/transforms/transformElement'
import { transformSlotOutlet } from '../src/transforms/transformSlotOutlet'
import { transformText } from '../src/transforms/transformText'
-import { genFlagText } from './testUtils'
import { PatchFlags } from '@vue/shared'
describe('compiler: transform', () => {
{ type: NodeTypes.ELEMENT, tag: `div` },
{ type: NodeTypes.ELEMENT, tag: `div` },
] as any,
- genFlagText(PatchFlags.STABLE_FRAGMENT),
+ PatchFlags.STABLE_FRAGMENT,
),
)
})
{ type: NodeTypes.ELEMENT, tag: `div` },
{ type: NodeTypes.COMMENT },
] as any,
- genFlagText([
- PatchFlags.STABLE_FRAGMENT,
- PatchFlags.DEV_ROOT_FRAGMENT,
- ]),
+ PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
),
)
})
import { transformFor } from '../../src/transforms/vFor'
import { transformBind } from '../../src/transforms/vBind'
import { transformOn } from '../../src/transforms/vOn'
-import { createObjectMatcher, genFlagText } from '../testUtils'
+import { createObjectMatcher } from '../testUtils'
import { transformText } from '../../src/transforms/transformText'
import { PatchFlags } from '@vue/shared'
id: `[foo]`,
}),
children: undefined,
- patchFlag: genFlagText(PatchFlags.PROPS),
+ patchFlag: PatchFlags.PROPS,
dynamicProps: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `_hoisted_1`,
ref: `[foo]`,
}),
children: undefined,
- patchFlag: genFlagText(PatchFlags.NEED_PATCH),
+ patchFlag: PatchFlags.NEED_PATCH,
},
},
])
content: `_hoisted_1`,
},
children: undefined,
- patchFlag: genFlagText(PatchFlags.NEED_PATCH),
+ patchFlag: PatchFlags.NEED_PATCH,
directives: {
type: NodeTypes.JS_ARRAY_EXPRESSION,
},
tag: `"div"`,
props: { content: `_hoisted_1` },
children: { type: NodeTypes.INTERPOLATION },
- patchFlag: genFlagText(PatchFlags.TEXT),
+ patchFlag: PatchFlags.TEXT,
},
},
])
type: NodeTypes.JS_CALL_EXPRESSION,
callee: RENDER_LIST,
},
- patchFlag: genFlagText(PatchFlags.UNKEYED_FRAGMENT),
+ patchFlag: PatchFlags.UNKEYED_FRAGMENT,
})
const innerBlockCodegen = forBlockCodegen!.children.arguments[1]
expect(innerBlockCodegen.returns).toMatchObject({
constType: ConstantTypes.NOT_CONSTANT,
},
},
- patchFlag: `1 /* TEXT */`,
+ patchFlag: PatchFlags.TEXT,
},
},
],
import { transformOn } from '../../src/transforms/vOn'
import { transformBind } from '../../src/transforms/vBind'
import { PatchFlags } from '@vue/shared'
-import { createObjectMatcher, genFlagText } from '../testUtils'
+import { createObjectMatcher } from '../testUtils'
import { transformText } from '../../src/transforms/transformText'
import { parseWithForTransform } from './vFor.spec'
// keep-alive should not compile content to slots
children: [{ type: NodeTypes.ELEMENT, tag: 'span' }],
// should get a dynamic slots flag to force updates
- patchFlag: genFlagText(PatchFlags.DYNAMIC_SLOTS),
+ patchFlag: PatchFlags.DYNAMIC_SLOTS,
})
}
})
// should factor in props returned by custom directive transforms
// in patchFlag analysis
- expect(node.patchFlag).toMatch(PatchFlags.PROPS + '')
+ expect(node.patchFlag).toBe(PatchFlags.PROPS)
expect(node.dynamicProps).toMatch(`"bar"`)
})
tag: `"div"`,
props: undefined,
children: undefined,
- patchFlag: genFlagText(PatchFlags.NEED_PATCH), // should generate appropriate flag
+ patchFlag: PatchFlags.NEED_PATCH, // should generate appropriate flag
directives: {
type: NodeTypes.JS_ARRAY_EXPRESSION,
elements: [
expect(node.patchFlag).toBeUndefined()
const { node: node2 } = parseWithBind(`<div>{{ foo }}</div>`)
- expect(node2.patchFlag).toBe(genFlagText(PatchFlags.TEXT))
+ expect(node2.patchFlag).toBe(PatchFlags.TEXT)
// multiple nodes, merged with optimize text
const { node: node3 } = parseWithBind(`<div>foo {{ bar }} baz</div>`)
- expect(node3.patchFlag).toBe(genFlagText(PatchFlags.TEXT))
+ expect(node3.patchFlag).toBe(PatchFlags.TEXT)
})
test('CLASS', () => {
const { node } = parseWithBind(`<div :class="foo" />`)
- expect(node.patchFlag).toBe(genFlagText(PatchFlags.CLASS))
+ expect(node.patchFlag).toBe(PatchFlags.CLASS)
})
test('STYLE', () => {
const { node } = parseWithBind(`<div :style="foo" />`)
- expect(node.patchFlag).toBe(genFlagText(PatchFlags.STYLE))
+ expect(node.patchFlag).toBe(PatchFlags.STYLE)
})
test('PROPS', () => {
const { node } = parseWithBind(`<div id="foo" :foo="bar" :baz="qux" />`)
- expect(node.patchFlag).toBe(genFlagText(PatchFlags.PROPS))
+ expect(node.patchFlag).toBe(PatchFlags.PROPS)
expect(node.dynamicProps).toBe(`["foo", "baz"]`)
})
`<div id="foo" :class="cls" :style="styl" :foo="bar" :baz="qux"/>`,
)
expect(node.patchFlag).toBe(
- genFlagText([PatchFlags.CLASS, PatchFlags.STYLE, PatchFlags.PROPS]),
+ PatchFlags.CLASS | PatchFlags.STYLE | PatchFlags.PROPS,
)
expect(node.dynamicProps).toBe(`["foo", "baz"]`)
})
const { node } = parseWithBind(
`<Foo :id="foo" :class="cls" :style="styl" />`,
)
- expect(node.patchFlag).toBe(genFlagText(PatchFlags.PROPS))
+ expect(node.patchFlag).toBe(PatchFlags.PROPS)
expect(node.dynamicProps).toBe(`["id", "class", "style"]`)
})
test('FULL_PROPS (v-bind)', () => {
const { node } = parseWithBind(`<div v-bind="foo" />`)
- expect(node.patchFlag).toBe(genFlagText(PatchFlags.FULL_PROPS))
+ expect(node.patchFlag).toBe(PatchFlags.FULL_PROPS)
})
test('FULL_PROPS (dynamic key)', () => {
const { node } = parseWithBind(`<div :[foo]="bar" />`)
- expect(node.patchFlag).toBe(genFlagText(PatchFlags.FULL_PROPS))
+ expect(node.patchFlag).toBe(PatchFlags.FULL_PROPS)
})
test('FULL_PROPS (w/ others)', () => {
const { node } = parseWithBind(
`<div id="foo" v-bind="bar" :class="cls" />`,
)
- expect(node.patchFlag).toBe(genFlagText(PatchFlags.FULL_PROPS))
+ expect(node.patchFlag).toBe(PatchFlags.FULL_PROPS)
})
test('NEED_PATCH (static ref)', () => {
const { node } = parseWithBind(`<div ref="foo" />`)
- expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_PATCH))
+ expect(node.patchFlag).toBe(PatchFlags.NEED_PATCH)
})
test('NEED_PATCH (dynamic ref)', () => {
const { node } = parseWithBind(`<div :ref="foo" />`)
- expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_PATCH))
+ expect(node.patchFlag).toBe(PatchFlags.NEED_PATCH)
})
test('NEED_PATCH (custom directives)', () => {
const { node } = parseWithBind(`<div v-foo />`)
- expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_PATCH))
+ expect(node.patchFlag).toBe(PatchFlags.NEED_PATCH)
})
test('NEED_PATCH (vnode hooks)', () => {
cacheHandlers: true,
}).ast
const node = (root as any).children[0].codegenNode
- expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_PATCH))
+ expect(node.patchFlag).toBe(PatchFlags.NEED_PATCH)
})
test('script setup inline mode template ref (binding exists)', () => {
},
})
// should only have props flag
- expect(node.patchFlag).toBe(genFlagText(PatchFlags.PROPS))
+ expect(node.patchFlag).toBe(PatchFlags.PROPS)
const { node: node2 } = parseWithElementTransform(
`<div @keyup="foo" />`,
},
},
)
- expect(node2.patchFlag).toBe(
- genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION]),
- )
+ expect(node2.patchFlag).toBe(PatchFlags.PROPS | PatchFlags.NEED_HYDRATION)
})
test('NEED_HYDRATION for v-bind.prop', () => {
const { node } = parseWithBind(`<div v-bind:id.prop="id" />`)
- expect(node.patchFlag).toBe(
- genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION]),
- )
+ expect(node.patchFlag).toBe(PatchFlags.PROPS | PatchFlags.NEED_HYDRATION)
const { node: node2 } = parseWithBind(`<div .id="id" />`)
- expect(node2.patchFlag).toBe(
- genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION]),
- )
+ expect(node2.patchFlag).toBe(PatchFlags.PROPS | PatchFlags.NEED_HYDRATION)
})
// #5870
},
},
)
- expect(node.patchFlag).toBe(
- genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION]),
- )
+ expect(node.patchFlag).toBe(PatchFlags.PROPS | PatchFlags.NEED_HYDRATION)
})
test('should not have PROPS patchflag for constant v-on handlers', () => {
},
})
// should only have hydration flag
- expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_HYDRATION))
+ expect(node.patchFlag).toBe(PatchFlags.NEED_HYDRATION)
})
})
import { ErrorCodes } from '../../src/errors'
import { type CompilerOptions, generate } from '../../src'
import { FRAGMENT, RENDER_LIST, RENDER_SLOT } from '../../src/runtimeHelpers'
-import { PatchFlagNames, PatchFlags } from '@vue/shared'
-import { createObjectMatcher, genFlagText } from '../testUtils'
+import { PatchFlags } from '@vue/shared'
+import { createObjectMatcher } from '../testUtils'
export function parseWithForTransform(
template: string,
tag: FRAGMENT,
disableTracking,
patchFlag: !disableTracking
- ? genFlagText(PatchFlags.STABLE_FRAGMENT)
+ ? PatchFlags.STABLE_FRAGMENT
: keyed
- ? genFlagText(PatchFlags.KEYED_FRAGMENT)
- : genFlagText(PatchFlags.UNKEYED_FRAGMENT),
+ ? PatchFlags.KEYED_FRAGMENT
+ : PatchFlags.UNKEYED_FRAGMENT,
children: {
type: NodeTypes.JS_CALL_EXPRESSION,
callee: RENDER_LIST,
constType: ConstantTypes.NOT_CONSTANT,
},
},
- patchFlag: genFlagText(PatchFlags.TEXT),
+ patchFlag: PatchFlags.TEXT,
},
})
expect(generate(root).code).toMatchSnapshot()
{ type: NodeTypes.TEXT, content: `hello` },
{ type: NodeTypes.ELEMENT, tag: `span` },
],
- patchFlag: genFlagText(PatchFlags.STABLE_FRAGMENT),
+ patchFlag: PatchFlags.STABLE_FRAGMENT,
},
})
expect(generate(root).code).toMatchSnapshot()
{ type: NodeTypes.TEXT, content: `hello` },
{ type: NodeTypes.ELEMENT, tag: `span` },
],
- patchFlag: genFlagText(PatchFlags.STABLE_FRAGMENT),
+ patchFlag: PatchFlags.STABLE_FRAGMENT,
},
})
expect(generate(root).code).toMatchSnapshot()
}),
isBlock: true,
disableTracking: true,
- patchFlag: genFlagText(PatchFlags.UNKEYED_FRAGMENT),
+ patchFlag: PatchFlags.UNKEYED_FRAGMENT,
children: {
type: NodeTypes.JS_CALL_EXPRESSION,
callee: RENDER_LIST,
}),
isBlock: true,
disableTracking: true,
- patchFlag: genFlagText(PatchFlags.UNKEYED_FRAGMENT),
+ patchFlag: PatchFlags.UNKEYED_FRAGMENT,
children: {
type: NodeTypes.JS_CALL_EXPRESSION,
callee: RENDER_LIST,
const {
node: { codegenNode },
} = parseWithForTransform('<div v-for="key in keys" :key>test</div>')
- expect(codegenNode.patchFlag).toBe(
- `${PatchFlags.KEYED_FRAGMENT} /* ${PatchFlagNames[PatchFlags.KEYED_FRAGMENT]} */`,
- )
+ expect(codegenNode.patchFlag).toBe(PatchFlags.KEYED_FRAGMENT)
})
test('template v-for key w/ :key shorthand on template injected to the child', () => {
trackVForSlotScopes,
} from '../../src/transforms/vSlot'
import { CREATE_SLOTS, RENDER_LIST } from '../../src/runtimeHelpers'
-import { createObjectMatcher, genFlagText } from '../testUtils'
+import { createObjectMatcher } from '../testUtils'
import { PatchFlags } from '@vue/shared'
import { transformFor } from '../../src/transforms/vFor'
import { transformIf } from '../../src/transforms/vIf'
),
// nested slot should be forced dynamic, since scope variables
// are not tracked as dependencies of the slot.
- patchFlag: genFlagText(PatchFlags.DYNAMIC_SLOTS),
+ patchFlag: PatchFlags.DYNAMIC_SLOTS,
},
},
// test scope
const div = ((root.children[0] as ForNode).children[0] as ElementNode)
.codegenNode as any
const comp = div.children[0]
- expect(comp.codegenNode.patchFlag).toBe(
- genFlagText(PatchFlags.DYNAMIC_SLOTS),
- )
+ expect(comp.codegenNode.patchFlag).toBe(PatchFlags.DYNAMIC_SLOTS)
})
test('should only force dynamic slots when actually using scope vars w/ prefixIdentifiers: true', () => {
flag = (innerComp.codegenNode as VNodeCall).patchFlag
}
if (shouldForce) {
- expect(flag).toBe(genFlagText(PatchFlags.DYNAMIC_SLOTS))
+ expect(flag).toBe(PatchFlags.DYNAMIC_SLOTS)
} else {
expect(flag).toBeUndefined()
}
},
],
})
- expect((root as any).children[0].codegenNode.patchFlag).toMatch(
- PatchFlags.DYNAMIC_SLOTS + '',
+ expect((root as any).children[0].codegenNode.patchFlag).toBe(
+ PatchFlags.DYNAMIC_SLOTS,
)
expect(generate(root).code).toMatchSnapshot()
})
},
],
})
- expect((root as any).children[0].codegenNode.patchFlag).toMatch(
- PatchFlags.DYNAMIC_SLOTS + '',
+ expect((root as any).children[0].codegenNode.patchFlag).toBe(
+ PatchFlags.DYNAMIC_SLOTS,
)
expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
})
},
],
})
- expect((root as any).children[0].codegenNode.patchFlag).toMatch(
- PatchFlags.DYNAMIC_SLOTS + '',
+ expect((root as any).children[0].codegenNode.patchFlag).toBe(
+ PatchFlags.DYNAMIC_SLOTS,
)
expect((root as any).children[0].children.length).toBe(3)
expect(generate(root).code).toMatchSnapshot()
},
],
})
- expect((root as any).children[0].codegenNode.patchFlag).toMatch(
- PatchFlags.DYNAMIC_SLOTS + '',
+ expect((root as any).children[0].codegenNode.patchFlag).toBe(
+ PatchFlags.DYNAMIC_SLOTS,
)
expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
})
-import { isString } from '@vue/shared'
+import { type PatchFlags, isString } from '@vue/shared'
import {
CREATE_BLOCK,
CREATE_ELEMENT_BLOCK,
| ForRenderListExpression // v-for fragment call
| SimpleExpressionNode // hoisted
| undefined
- patchFlag: string | undefined
+ patchFlag: PatchFlags | undefined
dynamicProps: string | SimpleExpressionNode | undefined
directives: DirectiveArguments | undefined
isBlock: boolean
tag: typeof FRAGMENT
props: undefined
children: ForRenderListExpression
- patchFlag: string
+ patchFlag: PatchFlags
disableTracking: boolean
}
isSimpleIdentifier,
toValidAssetId,
} from './utils'
-import { isArray, isString, isSymbol } from '@vue/shared'
+import {
+ PatchFlagNames,
+ type PatchFlags,
+ isArray,
+ isString,
+ isSymbol,
+} from '@vue/shared'
import {
CREATE_COMMENT,
CREATE_ELEMENT_VNODE,
disableTracking,
isComponent,
} = node
+
+ // add dev annotations to patch flags
+ let patchFlagString
+ if (patchFlag) {
+ if (__DEV__) {
+ if (patchFlag < 0) {
+ // special flags (negative and mutually exclusive)
+ patchFlagString = patchFlag + ` /* ${PatchFlagNames[patchFlag]} */`
+ } else {
+ // bitwise flags
+ const flagNames = Object.keys(PatchFlagNames)
+ .map(Number)
+ .filter(n => n > 0 && patchFlag & n)
+ .map(n => PatchFlagNames[n as PatchFlags])
+ .join(`, `)
+ patchFlagString = patchFlag + ` /* ${flagNames} */`
+ }
+ } else {
+ patchFlagString = String(patchFlag)
+ }
+ }
+
if (directives) {
push(helper(WITH_DIRECTIVES) + `(`)
}
: getVNodeHelper(context.inSSR, isComponent)
push(helper(callHelper) + `(`, NewlineType.None, node)
genNodeList(
- genNullableArgs([tag, props, children, patchFlag, dynamicProps]),
+ genNullableArgs([tag, props, children, patchFlagString, dynamicProps]),
context,
)
push(`)`)
helper(FRAGMENT),
undefined,
root.children,
- patchFlag + (__DEV__ ? ` /* ${patchFlagText} */` : ``),
+ patchFlag,
undefined,
undefined,
true,
: getConstantType(child, context)
if (constantType > ConstantTypes.NOT_CONSTANT) {
if (constantType >= ConstantTypes.CAN_HOIST) {
- ;(child.codegenNode as VNodeCall).patchFlag =
- PatchFlags.HOISTED + (__DEV__ ? ` /* HOISTED */` : ``)
+ ;(child.codegenNode as VNodeCall).patchFlag = PatchFlags.HOISTED
child.codegenNode = context.hoist(child.codegenNode!)
hoistedCount++
continue
// hoisting.
const codegenNode = child.codegenNode!
if (codegenNode.type === NodeTypes.VNODE_CALL) {
- const flag = getPatchFlag(codegenNode)
+ const flag = codegenNode.patchFlag
if (
- (!flag ||
+ (flag === undefined ||
flag === PatchFlags.NEED_PATCH ||
flag === PatchFlags.TEXT) &&
getGeneratedPropsConstantType(child, context) >=
) {
return ConstantTypes.NOT_CONSTANT
}
- const flag = getPatchFlag(codegenNode)
- if (!flag) {
+ if (codegenNode.patchFlag === undefined) {
let returnType = ConstantTypes.CAN_STRINGIFY
// Element itself has no patch flag. However we still need to check:
return codegenNode.props
}
}
-
-function getPatchFlag(node: VNodeCall): number | undefined {
- const flag = node.patchFlag
- return flag ? parseInt(flag, 10) : undefined
-}
createVNodeCall,
} from '../ast'
import {
- PatchFlagNames,
PatchFlags,
camelize,
capitalize,
let vnodeProps: VNodeCall['props']
let vnodeChildren: VNodeCall['children']
- let vnodePatchFlag: VNodeCall['patchFlag']
- let patchFlag: number = 0
+ let patchFlag: VNodeCall['patchFlag'] | 0 = 0
let vnodeDynamicProps: VNodeCall['dynamicProps']
let dynamicPropNames: string[] | undefined
let vnodeDirectives: VNodeCall['directives']
}
// patchFlag & dynamicPropNames
- if (patchFlag !== 0) {
- if (__DEV__) {
- if (patchFlag < 0) {
- // special flags (negative and mutually exclusive)
- vnodePatchFlag =
- patchFlag + ` /* ${PatchFlagNames[patchFlag as PatchFlags]} */`
- } else {
- // bitwise flags
- const flagNames = Object.keys(PatchFlagNames)
- .map(Number)
- .filter(n => n > 0 && patchFlag & n)
- .map(n => PatchFlagNames[n as PatchFlags])
- .join(`, `)
- vnodePatchFlag = patchFlag + ` /* ${flagNames} */`
- }
- } else {
- vnodePatchFlag = String(patchFlag)
- }
- if (dynamicPropNames && dynamicPropNames.length) {
- vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames)
- }
+ if (dynamicPropNames && dynamicPropNames.length) {
+ vnodeDynamicProps = stringifyDynamicPropNames(dynamicPropNames)
}
node.codegenNode = createVNodeCall(
vnodeTag,
vnodeProps,
vnodeChildren,
- vnodePatchFlag,
+ patchFlag === 0 ? undefined : patchFlag,
vnodeDynamicProps,
vnodeDirectives,
!!shouldUseBlock,
} from '../runtimeHelpers'
import { processExpression } from './transformExpression'
import { validateBrowserExpression } from '../validateExpression'
-import { PatchFlagNames, PatchFlags } from '@vue/shared'
+import { PatchFlags } from '@vue/shared'
import { transformBindShorthand } from './vBind'
export const transformFor = createStructuralDirectiveTransform(
helper(FRAGMENT),
undefined,
renderExp,
- fragmentFlag +
- (__DEV__ ? ` /* ${PatchFlagNames[fragmentFlag]} */` : ``),
+ fragmentFlag,
undefined,
undefined,
true /* isBlock */,
helper(FRAGMENT),
keyProperty ? createObjectExpression([keyProperty]) : undefined,
node.children,
- PatchFlags.STABLE_FRAGMENT +
- (__DEV__
- ? ` /* ${PatchFlagNames[PatchFlags.STABLE_FRAGMENT]} */`
- : ``),
+ PatchFlags.STABLE_FRAGMENT,
undefined,
undefined,
true,
helper(FRAGMENT),
createObjectExpression([keyProperty]),
children,
- patchFlag + (__DEV__ ? ` /* ${patchFlagText} */` : ``),
+ patchFlag,
undefined,
undefined,
true,
} from '@vue/compiler-core'
import { transformVHtml } from '../../src/transforms/vHtml'
import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
-import {
- createObjectMatcher,
- genFlagText,
-} from '../../../compiler-core/__tests__/testUtils'
+import { createObjectMatcher } from '../../../compiler-core/__tests__/testUtils'
import { PatchFlags } from '@vue/shared'
import { DOMErrorCodes } from '../../src/errors'
innerHTML: `[test]`,
}),
children: undefined,
- patchFlag: genFlagText(PatchFlags.PROPS),
+ patchFlag: PatchFlags.PROPS,
dynamicProps: `["innerHTML"]`,
})
})
innerHTML: `[test]`,
}),
children: undefined, // <-- children should have been removed
- patchFlag: genFlagText(PatchFlags.PROPS),
+ patchFlag: PatchFlags.PROPS,
dynamicProps: `["innerHTML"]`,
})
})
import { V_ON_WITH_KEYS, V_ON_WITH_MODIFIERS } from '../../src/runtimeHelpers'
import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
import { transformExpression } from '../../../compiler-core/src/transforms/transformExpression'
-import { genFlagText } from '../../../compiler-core/__tests__/testUtils'
import { PatchFlags } from '@vue/shared'
function parseWithVOn(template: string, options: CompilerOptions = {}) {
// should not treat cached handler as dynamicProp, so it should have no
// dynamicProps flags and only the hydration flag
expect((root as any).children[0].codegenNode.patchFlag).toBe(
- genFlagText(PatchFlags.NEED_HYDRATION),
+ PatchFlags.NEED_HYDRATION,
)
expect(prop).toMatchObject({
key: {
},
})
// should only have hydration flag
- expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_HYDRATION))
+ expect(node.patchFlag).toBe(PatchFlags.NEED_HYDRATION)
})
})
} from '@vue/compiler-core'
import { transformVText } from '../../src/transforms/vText'
import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
-import {
- createObjectMatcher,
- genFlagText,
-} from '../../../compiler-core/__tests__/testUtils'
+import { createObjectMatcher } from '../../../compiler-core/__tests__/testUtils'
import { PatchFlags } from '@vue/shared'
import { DOMErrorCodes } from '../../src/errors'
},
}),
children: undefined,
- patchFlag: genFlagText(PatchFlags.PROPS),
+ patchFlag: PatchFlags.PROPS,
dynamicProps: `["textContent"]`,
})
})
},
}),
children: undefined, // <-- children should have been removed
- patchFlag: genFlagText(PatchFlags.PROPS),
+ patchFlag: PatchFlags.PROPS,
dynamicProps: `["textContent"]`,
})
})
// #10607
test('update component stable slot (prod + optimized mode)', async () => {
__DEV__ = false
- const container = document.createElement('div')
- container.innerHTML = `<template><div show="false"><!--[--><div><div><!----></div></div><div>0</div><!--]--></div></template>`
- const Comp = {
- render(this: any) {
- return (
- openBlock(),
- createElementBlock('div', null, [renderSlot(this.$slots, 'default')])
- )
- },
- }
- const show = ref(false)
- const clicked = ref(false)
-
- const Wrapper = {
- setup() {
- const items = ref<number[]>([])
- onMounted(() => {
- items.value = [1]
- })
- return () => {
+ try {
+ const container = document.createElement('div')
+ container.innerHTML = `<template><div show="false"><!--[--><div><div><!----></div></div><div>0</div><!--]--></div></template>`
+ const Comp = {
+ render(this: any) {
return (
openBlock(),
- createBlock(Comp, null, {
- default: withCtx(() => [
- createElementVNode('div', null, [
+ createElementBlock('div', null, [
+ renderSlot(this.$slots, 'default'),
+ ])
+ )
+ },
+ }
+ const show = ref(false)
+ const clicked = ref(false)
+
+ const Wrapper = {
+ setup() {
+ const items = ref<number[]>([])
+ onMounted(() => {
+ items.value = [1]
+ })
+ return () => {
+ return (
+ openBlock(),
+ createBlock(Comp, null, {
+ default: withCtx(() => [
createElementVNode('div', null, [
- clicked.value
- ? (openBlock(),
- createElementBlock('div', { key: 0 }, 'foo'))
- : createCommentVNode('v-if', true),
+ createElementVNode('div', null, [
+ clicked.value
+ ? (openBlock(),
+ createElementBlock('div', { key: 0 }, 'foo'))
+ : createCommentVNode('v-if', true),
+ ]),
]),
+ createElementVNode(
+ 'div',
+ null,
+ items.value.length,
+ 1 /* TEXT */,
+ ),
]),
- createElementVNode(
- 'div',
- null,
- items.value.length,
- 1 /* TEXT */,
- ),
- ]),
- _: 1 /* STABLE */,
- })
- )
- }
- },
- }
- createSSRApp({
- components: { Wrapper },
- data() {
- return { show }
- },
- template: `<Wrapper :show="show"/>`,
- }).mount(container)
+ _: 1 /* STABLE */,
+ })
+ )
+ }
+ },
+ }
+ createSSRApp({
+ components: { Wrapper },
+ data() {
+ return { show }
+ },
+ template: `<Wrapper :show="show"/>`,
+ }).mount(container)
- await nextTick()
- expect(container.innerHTML).toBe(
- `<div show="false"><!--[--><div><div><!----></div></div><div>1</div><!--]--></div>`,
- )
+ await nextTick()
+ expect(container.innerHTML).toBe(
+
`<div show="false"><!--[--><div><div><!----></div></div><div>1</div><!--]--></div>`,
+ )
- show.value = true
- await nextTick()
- expect(async () => {
- clicked.value = true
+ show.value = true
await nextTick()
- }).not.toThrow("Cannot read properties of null (reading 'insertBefore')")
+ expect(async () => {
+ clicked.value = true
+ await nextTick()
+ }).not.toThrow("Cannot read properties of null (reading 'insertBefore')")
- await nextTick()
- expect(container.innerHTML).toBe(
- `<div show="true"><!--[--><div><div><div>foo</div></div></div><div>1</div><!--]--></div>`,
- )
- __DEV__ = true
+ await nextTick()
+ expect(container.innerHTML).toBe(
+ `<div show="true"><!--[--><div><div><div>foo</div></div></div><div>1</div><!--]--></div>`,
+ )
+ } catch (e) {
+ throw e
+ } finally {
+ __DEV__ = true
+ }
})
describe('mismatch handling', () => {
projects / thirdparty / vuejs / core.git / commitdiff
