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

fix(compiler-dom): properly stringify class/style bindings when hoisting static strings

Browse Source
This commit is contained in:
Evan You
2020-02-21 13:10:13 +01:00
parent 189a0a3b19
commit 1b9b235663
11 changed files with 57 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
View File

@@ -2,9 +2,6 @@
exports[`compile should contain standard transforms 1`] = `
"const _Vue = Vue
const { createVNode: _createVNode } = _Vue
const _hoisted_1 = {}
return function render(_ctx, _cache) {
with (_ctx) {
@@ -14,7 +11,7 @@ return function render(_ctx, _cache) {
_createVNode(\\"div\\", { textContent: text }, null, 8 /* PROPS */, [\\"textContent\\"]),
_createVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]),
_createVNode(\\"div\\", null, \\"test\\"),
_createVNode(\\"div\\", { style: _hoisted_1 }, \\"red\\"),
_createVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"),
_createVNode(\\"div\\", { style: {color: 'green'} }, null, 4 /* STYLE */)
], 64 /* STABLE_FRAGMENT */))
}

2
packages/compiler-dom/__tests__/index.spec.ts
View File

@@ -5,7 +5,7 @@ describe('compile', () => {
const { code } = compile(`<div v-text="text"></div>
<div v-html="html"></div>
<div v-cloak>test</div>
<div style="color=red">red</div>
<div style="color:red">red</div>
<div :style="{color: 'green'}"></div>`)
expect(code).toMatchSnapshot()

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

@@ -77,8 +77,8 @@ describe('stringify static html', () => {
test('serliazing constant bindings', () => {
const { ast } = compileWithStringify(
`<div><div>${repeat(
`<span :class="'foo' + 'bar'">{{ 1 }} + {{ false }}</span>`,
`<div><div :style="{ color: 'red' }">${repeat(
`<span :class="[{ foo: true }, { bar: true }]">{{ 1 }} + {{ false }}</span>`,
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
)}</div></div>`
)
@@ -89,8 +89,8 @@ describe('stringify static html', () => {
callee: CREATE_STATIC,
arguments: [
JSON.stringify(
`<div>${repeat(
`<span class="foobar">1 + false</span>`,
`<div style="color:red;">${repeat(
`<span class="foo bar">1 + false</span>`,
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
)}</div>`
)

17
packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
View File

@@ -26,17 +26,8 @@ function transformWithStyleTransform(
}
describe('compiler: style transform', () => {
test('should transform into directive node and hoist value', () => {
const { root, node } = transformWithStyleTransform(
`<div style="color: red"/>`
)
expect(root.hoists).toMatchObject([
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{"color":"red"}`,
isStatic: false
}
])
test('should transform into directive node', () => {
const { node } = transformWithStyleTransform(`<div style="color: red"/>`)
expect(node.props[0]).toMatchObject({
type: NodeTypes.DIRECTIVE,
name: `bind`,
@@ -47,7 +38,7 @@ describe('compiler: style transform', () => {
},
exp: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `_hoisted_1`,
content: `{"color":"red"}`,
isStatic: false
}
})
@@ -71,7 +62,7 @@ describe('compiler: style transform', () => {
},
value: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `_hoisted_1`,
content: `{"color":"red"}`,
isStatic: false
}
}