refactor(ssr): adjust helper structure + renderList

packages/server-renderer/src/helpers/interpolate.ts

@@ -0,0 +1,5 @@
+import { escapeHtml, toDisplayString } from '@vue/shared'
+
+export function interpolate(value: unknown): string {
+  return escapeHtml(toDisplayString(value))
+}

packages/server-renderer/src/helpers/renderAttrs.ts

@@ -14,7 +14,7 @@ import {
 
 const shouldIgnoreProp = makeMap(`key,ref,innerHTML,textContent`)
 
-export function renderProps(
+export function renderAttrs(
   props: Record<string, unknown>,
   tag?: string
 ): string {
@@ -32,23 +32,30 @@ export function renderProps(
       ret += ` class="${renderClass(value)}"`
     } else if (key === 'style') {
       ret += ` style="${renderStyle(value)}"`
-    } else if (value != null) {
-      const attrKey =
-        tag && tag.indexOf('-') > 0
-          ? key // preserve raw name on custom elements
-          : propsToAttrMap[key] || key.toLowerCase()
-      if (isBooleanAttr(attrKey)) {
-        if (value !== false) {
-          ret += ` ${attrKey}`
-        }
-      } else if (isSSRSafeAttrName(attrKey)) {
-        ret += ` ${attrKey}="${escapeHtml(value)}"`
-      }
+    } else {
+      ret += renderAttr(key, value, tag)
     }
   }
   return ret
 }
 
+export function renderAttr(key: string, value: unknown, tag?: string): string {
+  if (value == null) {
+    return ``
+  }
+  const attrKey =
+    tag && tag.indexOf('-') > 0
+      ? key // preserve raw name on custom elements
+      : propsToAttrMap[key] || key.toLowerCase()
+  if (isBooleanAttr(attrKey)) {
+    return value === false ? `` : ` ${attrKey}`
+  } else if (isSSRSafeAttrName(attrKey)) {
+    return ` ${attrKey}="${escapeHtml(value)}"`
+  } else {
+    return ``
+  }
+}
+
 export function renderClass(raw: unknown): string {
   return escapeHtml(normalizeClass(raw))
 }

packages/server-renderer/src/helpers/renderList.ts

@@ -0,0 +1,29 @@
+import { isArray, isString, isObject } from '@vue/shared'
+
+export function renderList(
+  source: unknown,
+  renderItem: (value: unknown, key: string | number, index?: number) => void
+) {
+  if (isArray(source) || isString(source)) {
+    for (let i = 0, l = source.length; i < l; i++) {
+      renderItem(source[i], i)
+    }
+  } else if (typeof source === 'number') {
+    for (let i = 0; i < source; i++) {
+      renderItem(i + 1, i)
+    }
+  } else if (isObject(source)) {
+    if (source[Symbol.iterator as any]) {
+      const arr = Array.from(source as Iterable<any>)
+      for (let i = 0, l = arr.length; i < l; i++) {
+        renderItem(arr[i], i)
+      }
+    } else {
+      const keys = Object.keys(source)
+      for (let i = 0, l = keys.length; i < l; i++) {
+        const key = keys[i]
+        renderItem(source[key], key, i)
+      }
+    }
+  }
+}

packages/server-renderer/src/index.ts

@@ -1,7 +1,7 @@
 // public
 export { renderToString } from './renderToString'
 
-// internal
+// internal runtime helpers
 export {
   renderComponent as _renderComponent,
   renderSlot as _renderSlot
@@ -9,12 +9,7 @@ export {
 export {
   renderClass as _renderClass,
   renderStyle as _renderStyle,
-  renderProps as _renderProps
-} from './renderProps'
-
-// utils
-import { escapeHtml, toDisplayString } from '@vue/shared'
-
-export function _interpolate(value: unknown): string {
-  return escapeHtml(toDisplayString(value))
-}
+  renderAttrs as _renderAttrs
+} from './helpers/renderAttrs'
+export { interpolate as _interpolate } from './helpers/interpolate'
+export { renderList as _renderList } from './helpers/renderList'

packages/server-renderer/src/renderToString.ts

@@ -19,10 +19,10 @@ import {
   isPromise,
   isArray,
   isFunction,
-  isVoidTag
+  isVoidTag,
+  escapeHtml
 } from '@vue/shared'
-import { renderProps } from './renderProps'
-import { escapeHtml } from '@vue/shared'
+import { renderAttrs } from './helpers/renderAttrs'
 
 const {
   isVNode,
@@ -213,7 +213,7 @@ function renderElement(
   // TODO directives
 
   if (props !== null) {
-    openTag += renderProps(props, tag)
+    openTag += renderAttrs(props, tag)
   }
 
   if (scopeId !== null) {