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

fix(runtime-dom): consistently remove boolean attributes for falsy values (#4348)

Browse Source
This commit is contained in:
skirtle
2021-08-16 23:18:36 +01:00
committed by GitHub
parent f855ccb2c1
commit 620a69b871
12 changed files with 70 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -177,7 +177,7 @@ describe('ssr: element', () => {
expect(getCompiledString(`<input type="checkbox" :checked="checked">`))
.toMatchInlineSnapshot(`
"\`<input type=\\"checkbox\\"\${
(_ctx.checked) ? \\" checked\\" : \\"\\"
(_ssrIncludeBooleanAttr(_ctx.checked)) ? \\" checked\\" : \\"\\"
}>\`"
`)
})

24
packages/compiler-ssr/__tests__/ssrVModel.spec.ts
View File

@@ -37,13 +37,13 @@ describe('ssr: v-model', () => {
expect(
compileWithWrapper(`<input type="radio" value="foo" v-model="bar">`).code
).toMatchInlineSnapshot(`
"const { ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
"const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type=\\"radio\\" value=\\"foo\\"\${
(_ssrLooseEqual(_ctx.bar, \\"foo\\")) ? \\" checked\\" : \\"\\"
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.bar, \\"foo\\"))) ? \\" checked\\" : \\"\\"
}></div>\`)
}"
`)
@@ -52,15 +52,15 @@ describe('ssr: v-model', () => {
test('<input type="checkbox">', () => {
expect(compileWithWrapper(`<input type="checkbox" v-model="bar">`).code)
.toMatchInlineSnapshot(`
"const { ssrLooseContain: _ssrLooseContain, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
"const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type=\\"checkbox\\"\${
((Array.isArray(_ctx.bar))
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
? _ssrLooseContain(_ctx.bar, null)
: _ctx.bar) ? \\" checked\\" : \\"\\"
: _ctx.bar)) ? \\" checked\\" : \\"\\"
}></div>\`)
}"
`)
@@ -69,15 +69,15 @@ describe('ssr: v-model', () => {
compileWithWrapper(`<input type="checkbox" value="foo" v-model="bar">`)
.code
).toMatchInlineSnapshot(`
"const { ssrLooseContain: _ssrLooseContain, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
"const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type=\\"checkbox\\" value=\\"foo\\"\${
((Array.isArray(_ctx.bar))
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
? _ssrLooseContain(_ctx.bar, \\"foo\\")
: _ctx.bar) ? \\" checked\\" : \\"\\"
: _ctx.bar)) ? \\" checked\\" : \\"\\"
}></div>\`)
}"
`)
@@ -87,13 +87,13 @@ describe('ssr: v-model', () => {
`<input type="checkbox" :true-value="foo" :false-value="bar" v-model="baz">`
).code
).toMatchInlineSnapshot(`
"const { ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
"const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type=\\"checkbox\\"\${
(_ssrLooseEqual(_ctx.baz, _ctx.foo)) ? \\" checked\\" : \\"\\"
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, _ctx.foo))) ? \\" checked\\" : \\"\\"
}></div>\`)
}"
`)
@@ -103,13 +103,13 @@ describe('ssr: v-model', () => {
`<input type="checkbox" true-value="foo" false-value="bar" v-model="baz">`
).code
).toMatchInlineSnapshot(`
"const { ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
"const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type=\\"checkbox\\"\${
(_ssrLooseEqual(_ctx.baz, \\"foo\\")) ? \\" checked\\" : \\"\\"
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, \\"foo\\"))) ? \\" checked\\" : \\"\\"
}></div>\`)
}"
`)

2
packages/compiler-ssr/src/runtimeHelpers.ts
View File

@@ -10,6 +10,7 @@ export const SSR_RENDER_ATTRS = Symbol(`ssrRenderAttrs`)
export const SSR_RENDER_ATTR = Symbol(`ssrRenderAttr`)
export const SSR_RENDER_DYNAMIC_ATTR = Symbol(`ssrRenderDynamicAttr`)
export const SSR_RENDER_LIST = Symbol(`ssrRenderList`)
export const SSR_INCLUDE_BOOLEAN_ATTR = Symbol(`ssrIncludeBooleanAttr`)
export const SSR_LOOSE_EQUAL = Symbol(`ssrLooseEqual`)
export const SSR_LOOSE_CONTAIN = Symbol(`ssrLooseContain`)
export const SSR_RENDER_DYNAMIC_MODEL = Symbol(`ssrRenderDynamicModel`)
@@ -28,6 +29,7 @@ export const ssrHelpers = {
[SSR_RENDER_ATTR]: `ssrRenderAttr`,
[SSR_RENDER_DYNAMIC_ATTR]: `ssrRenderDynamicAttr`,
[SSR_RENDER_LIST]: `ssrRenderList`,
[SSR_INCLUDE_BOOLEAN_ATTR]: `ssrIncludeBooleanAttr`,
[SSR_LOOSE_EQUAL]: `ssrLooseEqual`,
[SSR_LOOSE_CONTAIN]: `ssrLooseContain`,
[SSR_RENDER_DYNAMIC_MODEL]: `ssrRenderDynamicModel`,

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

@@ -43,7 +43,8 @@ import {
SSR_RENDER_DYNAMIC_ATTR,
SSR_RENDER_ATTRS,
SSR_INTERPOLATE,
SSR_GET_DYNAMIC_MODEL_PROPS
SSR_GET_DYNAMIC_MODEL_PROPS,
SSR_INCLUDE_BOOLEAN_ATTR
} from '../runtimeHelpers'
import { SSRTransformContext, processChildren } from '../ssrCodegenTransform'
@@ -237,7 +238,10 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
if (isBooleanAttr(attrName)) {
openTag.push(
createConditionalExpression(
value,
createCallExpression(
context.helper(SSR_INCLUDE_BOOLEAN_ATTR),
[value]
),
createSimpleExpression(' ' + attrName, true),
createSimpleExpression('', true),
false /* no newline */