root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 7 Packages Projects Releases Wiki Activity

fix(ssr): respect textContent/innerHTML from getSSRProps in optimized SSR output 

close #8112
This commit is contained in:
Evan You 2024-08-06 18:14:47 +08:00
parent 7d473b7721
commit 79602f9ecd
No known key found for this signature in database
GPG Key ID: 00E9AB7A6704CE0A
2 changed files with 59 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -288,12 +288,27 @@ describe('ssr: element', () => {
}></div>\`"
`)
})
})
test('custom dir', () => {
describe('custom directives', () => {
// #8112 should respect textContent / innerHTML from directive getSSRProps
// if the element has no children
test('custom dir without children', () => {
expect(getCompiledString(`<div v-xxx:x.y="z" />`)).toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_temp0 = _ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, "x", { y: true }))
}>\${
("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
}</div>\`"
`)
})
test('custom dir with children', () => {
expect(getCompiledString(`<div v-xxx:x.y="z">hello</div>`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, "x", { y: true }))
}></div>\`"
}>hello</div>\`"
`)
})
@ -301,30 +316,36 @@ describe('ssr: element', () => {
expect(getCompiledString(`<div class="foo" v-xxx />`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps({ class: "foo" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
}></div>\`"
_ssrRenderAttrs(_temp0 = _mergeProps({ class: "foo" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
}>\${
("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
}</div>\`"
`)
})
test('custom dir with v-bind', () => {
expect(getCompiledString(`<div :title="foo" :class="bar" v-xxx />`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps({
title: _ctx.foo,
class: _ctx.bar
}, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
}></div>\`"
`)
"\`<div\${
_ssrRenderAttrs(_temp0 = _mergeProps({
title: _ctx.foo,
class: _ctx.bar
}, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
}>\${
("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
}</div>\`"
`)
})
test('custom dir with object v-bind', () => {
expect(getCompiledString(`<div v-bind="x" v-xxx />`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps(_ctx.x, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
}></div>\`"
`)
"\`<div\${
_ssrRenderAttrs(_temp0 = _mergeProps(_ctx.x, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
}>\${
("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
}</div>\`"
`)
})
test('custom dir with object v-bind + normal bindings', () => {
@ -332,11 +353,13 @@ describe('ssr: element', () => {
getCompiledString(`<div v-bind="x" class="foo" v-xxx title="bar" />`),
).toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps(_ctx.x, {
_ssrRenderAttrs(_temp0 = _mergeProps(_ctx.x, {
class: "foo",
title: "bar"
}, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
}></div>\`"
}>\${
("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
}</div>\`"
`)
})
})

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

@ -163,6 +163,25 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
]),
]
}
} else if (directives.length && !node.children.length) {
const tempId = `_temp${context.temps++}`
propsExp.arguments = [
createAssignmentExpression(
createSimpleExpression(tempId, false),
mergedProps,
),
]
rawChildrenMap.set(
node,
createConditionalExpression(
createSimpleExpression(`"textContent" in ${tempId}`, false),
createCallExpression(context.helper(SSR_INTERPOLATE), [
createSimpleExpression(`${tempId}.textContent`, false),
]),
createSimpleExpression(`${tempId}.innerHTML ?? ''`, false),
false,
),
)
}
if (needTagForRuntime) {