From 79602f9ecd9559954f844774a90286305b13e056 Mon Sep 17 00:00:00 2001
From: Evan You <evan@vuejs.org>
Date: Tue, 6 Aug 2024 18:14:47 +0800
Subject: [PATCH] fix(ssr): respect textContent/innerHTML from getSSRProps in
 optimized SSR output

close #8112
---
 .../compiler-ssr/__tests__/ssrElement.spec.ts | 57 +++++++++++++------
 .../src/transforms/ssrTransformElement.ts     | 19 +++++++
 2 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/packages/compiler-ssr/__tests__/ssrElement.spec.ts b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
index 4056b4c3c71..723ef7b3592 100644
--- a/packages/compiler-ssr/__tests__/ssrElement.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
@@ -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>\`"
       `)
     })
   })
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
index 7175b797d48..45d4d76fe9a 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -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) {