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

fix(compiler-dom): avoid bailing stringification on setup const bindings

Browse Source
This commit is contained in:
Evan You
2021-12-06 11:53:02 +08:00
parent 4713578367
commit 29beda7c6f
5 changed files with 103 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap Normal file
View File

@@ -0,0 +1,34 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`stringify static html should bail on bindings that are hoisted but not stringifiable 1`] = `
"const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [
/*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
/*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
/*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
/*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
/*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
/*#__PURE__*/_createElementVNode(\\"img\\", { src: _imports_0_ })
], -1 /* HOISTED */)
const _hoisted_2 = [
_hoisted_1
]
return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
}"
`;
exports[`stringify static html should work with bindings that are non-static but stringifiable 1`] = `
"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<div><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><img src=\\\\\\"\\" + _imports_0_ + \\"\\\\\\"></div>\\", 1)
const _hoisted_2 = [
_hoisted_1
]
return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
}"
`;

55
packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
View File

@@ -181,8 +181,8 @@ describe('stringify static html', () => {
])
})
test('should bail on runtime constant v-bind bindings', () => {
const { ast } = compile(
test('should bail on bindings that are hoisted but not stringifiable', () => {
const { ast, code } = compile(
`<div><div>${repeat(
`<span class="foo">foo</span>`,
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
@@ -216,13 +216,62 @@ describe('stringify static html', () => {
expect(ast.hoists).toMatchObject([
{
// the expression and the tree are still hoistable
// but if it's stringified it will be NodeTypes.CALL_EXPRESSION
// but should stay NodeTypes.VNODE_CALL
// if it's stringified it will be NodeTypes.JS_CALL_EXPRESSION
type: NodeTypes.VNODE_CALL
},
{
type: NodeTypes.JS_ARRAY_EXPRESSION
}
])
expect(code).toMatchSnapshot()
})
test('should work with bindings that are non-static but stringifiable', () => {
// if a binding is non-static but marked as CAN_STRINGIFY, it means it's
// a known reference to a constant string.
const { ast, code } = compile(
`<div><div>${repeat(
`<span class="foo">foo</span>`,
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
)}<img src="./foo" /></div></div>`,
{
hoistStatic: true,
prefixIdentifiers: true,
transformHoist: stringifyStatic,
nodeTransforms: [
node => {
if (node.type === NodeTypes.ELEMENT && node.tag === 'img') {
const exp = createSimpleExpression(
'_imports_0_',
false,
node.loc,
ConstantTypes.CAN_STRINGIFY
)
node.props[0] = {
type: NodeTypes.DIRECTIVE,
name: 'bind',
arg: createSimpleExpression('src', true),
exp,
modifiers: [],
loc: node.loc
}
}
}
]
}
)
expect(ast.hoists).toMatchObject([
{
// the hoisted node should be NodeTypes.JS_CALL_EXPRESSION
// of `createStaticVNode()` instead of dynamic NodeTypes.VNODE_CALL
type: NodeTypes.JS_CALL_EXPRESSION
},
{
type: NodeTypes.JS_ARRAY_EXPRESSION
}
])
expect(code).toMatchSnapshot()
})
// #1128