wip(compiler-ssr): v-html, v-text & textarea value

packages/compiler-ssr/src/transforms/ssrTransformElement.ts

@@ -3,7 +3,8 @@ import {
   NodeTypes,
   ElementTypes,
   TemplateLiteral,
-  createTemplateLiteral
+  createTemplateLiteral,
+  createInterpolation
 } from '@vue/compiler-dom'
 import { escapeHtml } from '@vue/shared'
 
@@ -43,27 +44,57 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
       // element
       // generate the template literal representing the open tag.
       const openTag: TemplateLiteral['elements'] = [`<${node.tag}`]
+      let rawChildren
 
       for (let i = 0; i < node.props.length; i++) {
         const prop = node.props[i]
         if (prop.type === NodeTypes.DIRECTIVE) {
-          const directiveTransform = context.directiveTransforms[prop.name]
-          if (directiveTransform) {
-            // TODO directive transforms
+          // special cases with children override
+          if (prop.name === 'html' && prop.exp) {
+            node.children = []
+            rawChildren = prop.exp
+          } else if (prop.name === 'text' && prop.exp) {
+            node.children = [createInterpolation(prop.exp, prop.loc)]
+          } else if (
+            // v-bind:value on textarea
+            node.tag === 'textarea' &&
+            prop.name === 'bind' &&
+            prop.exp &&
+            prop.arg &&
+            prop.arg.type === NodeTypes.SIMPLE_EXPRESSION &&
+            prop.arg.isStatic &&
+            prop.arg.content === 'value'
+          ) {
+            node.children = [createInterpolation(prop.exp, prop.loc)]
+            // TODO handle <textrea> with dynamic v-bind
           } else {
-            // no corresponding ssr directive transform found.
-            // TODO emit error
+            const directiveTransform = context.directiveTransforms[prop.name]
+            if (directiveTransform) {
+              // TODO directive transforms
+            } else {
+              // no corresponding ssr directive transform found.
+              // TODO emit error
+            }
           }
         } else {
-          // static prop
-          openTag.push(
-            ` ${prop.name}` +
-              (prop.value ? `="${escapeHtml(prop.value.content)}"` : ``)
-          )
+          // special case: value on <textarea>
+          if (node.tag === 'textarea' && prop.name === 'value' && prop.value) {
+            node.children = []
+            rawChildren = escapeHtml(prop.value.content)
+          } else {
+            // static prop
+            openTag.push(
+              ` ${prop.name}` +
+                (prop.value ? `="${escapeHtml(prop.value.content)}"` : ``)
+            )
+          }
         }
       }
 
       openTag.push(`>`)
+      if (rawChildren) {
+        openTag.push(rawChildren)
+      }
       node.ssrCodegenNode = createTemplateLiteral(openTag)
     }
   }