}></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>\`"
`)
})
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', () => {
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>\`"
`)
})
})
]),
]
}
+ } 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) {