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

fix(compiler-ssr): should not render key/ref bindings in ssr

Browse Source
This commit is contained in:
Evan You 2020-11-27 12:35:00 -05:00
parent a5d6f8091e
commit 5b6266284d
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/compiler-ssr/__tests__/ssrElement.spec.ts
View File

@ -94,6 +94,18 @@ describe('ssr: element', () => {
).toMatchInlineSnapshot(`"\`<div id=\\"foo\\" class=\\"bar\\"></div>\`"`) ).toMatchInlineSnapshot(`"\`<div id=\\"foo\\" class=\\"bar\\"></div>\`"`)
}) })
test('ignore static key/ref', () => {
expect(
getCompiledString(`<div key="1" ref="el"></div>`)
).toMatchInlineSnapshot(`"\`<div></div>\`"`)
})
test('ignore v-bind key/ref', () => {
expect(
getCompiledString(`<div :key="1" :ref="el"></div>`)
).toMatchInlineSnapshot(`"\`<div></div>\`"`)
})
test('v-bind:class', () => { test('v-bind:class', () => {
expect(getCompiledString(`<div id="foo" :class="bar"></div>`)) expect(getCompiledString(`<div id="foo" :class="bar"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
@ -139,7 +151,7 @@ describe('ssr: element', () => {
`) `)
}) })
test('v-bind:key (boolean)', () => { test('v-bind:arg (boolean)', () => {
expect(getCompiledString(`<input type="checkbox" :checked="checked">`)) expect(getCompiledString(`<input type="checkbox" :checked="checked">`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<input type=\\"checkbox\\"\${ "\`<input type=\\"checkbox\\"\${
@ -148,7 +160,7 @@ describe('ssr: element', () => {
`) `)
}) })
test('v-bind:key (non-boolean)', () => { test('v-bind:arg (non-boolean)', () => {
expect(getCompiledString(`<div :id="id" class="bar"></div>`)) expect(getCompiledString(`<div :id="id" class="bar"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div\${ "\`<div\${
@ -157,7 +169,7 @@ describe('ssr: element', () => {
`) `)
}) })
test('v-bind:[key]', () => { test('v-bind:[arg]', () => {
expect(getCompiledString(`<div v-bind:[key]="value"></div>`)) expect(getCompiledString(`<div v-bind:[key]="value"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div\${ "\`<div\${

6
packages/compiler-ssr/src/transforms/ssrTransformElement.ts
View File

@ -198,6 +198,9 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
if (isStaticExp(key)) { if (isStaticExp(key)) {
let attrName = key.content let attrName = key.content
// static key attr // static key attr
if (attrName === 'key' || attrName === 'ref') {
continue
}
if (attrName === 'class') { if (attrName === 'class') {
openTag.push( openTag.push(
` class="`, ` class="`,
@ -274,6 +277,9 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
if (node.tag === 'textarea' && prop.name === 'value' && prop.value) { if (node.tag === 'textarea' && prop.name === 'value' && prop.value) {
rawChildrenMap.set(node, escapeHtml(prop.value.content)) rawChildrenMap.set(node, escapeHtml(prop.value.content))
} else if (!hasDynamicVBind) { } else if (!hasDynamicVBind) {
if (prop.name === 'key' || prop.name === 'ref') {
continue
}
// static prop // static prop
if (prop.name === 'class' && prop.value) { if (prop.name === 'class' && prop.value) {
staticClassBinding = JSON.stringify(prop.value.content) staticClassBinding = JSON.stringify(prop.value.content)