test(ssr): tests for utils and props rendering

packages/server-renderer/src/index.ts

@@ -1,11 +1,3 @@
-import { toDisplayString } from 'vue'
-import { escape } from './escape'
-
-export { escape }
-
-export function interpolate(value: unknown) {
-  return escape(toDisplayString(value))
-}
-
 export { renderToString, renderComponent, renderSlot } from './renderToString'
 export { renderClass, renderStyle, renderProps } from './renderProps'
+export { escapeHtml, interpolate } from './ssrUtils'

packages/server-renderer/src/renderProps.ts

@@ -1,4 +1,4 @@
-import { escape } from './escape'
+import { escapeHtml } from './ssrUtils'
 import {
   normalizeClass,
   normalizeStyle,
@@ -9,7 +9,7 @@ import {
   isOn,
   isSSRSafeAttrName,
   isBooleanAttr
-} from '@vue/shared/src'
+} from '@vue/shared'
 
 export function renderProps(
   props: Record<string, unknown>,
@@ -34,7 +34,7 @@ export function renderProps(
           ret += ` ${attrKey}`
         }
       } else if (isSSRSafeAttrName(attrKey)) {
-        ret += ` ${attrKey}="${escape(value)}"`
+        ret += ` ${attrKey}="${escapeHtml(value)}"`
       }
     }
   }
@@ -42,13 +42,16 @@ export function renderProps(
 }
 
 export function renderClass(raw: unknown): string {
-  return escape(normalizeClass(raw))
+  return escapeHtml(normalizeClass(raw))
 }
 
 export function renderStyle(raw: unknown): string {
   if (!raw) {
     return ''
   }
+  if (isString(raw)) {
+    return escapeHtml(raw)
+  }
   const styles = normalizeStyle(raw)
   let ret = ''
   for (const key in styles) {
@@ -62,5 +65,5 @@ export function renderStyle(raw: unknown): string {
       ret += `${normalizedKey}:${value};`
     }
   }
-  return escape(ret)
+  return escapeHtml(ret)
 }

packages/server-renderer/src/renderToString.ts

@@ -22,7 +22,7 @@ import {
   isVoidTag
 } from '@vue/shared'
 import { renderProps } from './renderProps'
-import { escape } from './escape'
+import { escapeHtml } from './ssrUtils'
 
 const {
   createComponentInstance,
@@ -105,7 +105,7 @@ function renderComponentVNode(
   const instance = createComponentInstance(vnode, parentComponent)
   const res = setupComponent(
     instance,
-    null /* parentSuspense */,
+    null /* parentSuspense (no need to track for SSR) */,
     true /* isSSR */
   )
   if (isPromise(res)) {
@@ -225,15 +225,15 @@ function renderElement(
         push(props.innerHTML)
       } else if (props.textContent) {
         hasChildrenOverride = true
-        push(escape(props.textContent))
+        push(escapeHtml(props.textContent))
       } else if (tag === 'textarea' && props.value) {
         hasChildrenOverride = true
-        push(escape(props.value))
+        push(escapeHtml(props.value))
       }
     }
     if (!hasChildrenOverride) {
       if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
-        push(escape(children as string))
+        push(escapeHtml(children as string))
       } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
         renderVNodeChildren(
           push,

packages/server-renderer/src/ssrUtils.ts

@@ -1,6 +1,8 @@
+import { toDisplayString } from '@vue/shared'
+
 const escapeRE = /["'&<>]/
 
-export function escape(string: unknown) {
+export function escapeHtml(string: unknown) {
   const str = '' + string
   const match = escapeRE.exec(str)
 
@@ -43,3 +45,7 @@ export function escape(string: unknown) {
 
   return lastIndex !== index ? html + str.substring(lastIndex, index) : html
 }
+
+export function interpolate(value: unknown) {
+  return escapeHtml(toDisplayString(value))
+}