refactor(ssr): move escapeHtml to shared

Author: yyx990803

packages/compiler-ssr/__tests__/transforms/ssrTransformElement.spec.ts renamed to packages/compiler-ssr/__tests__/ssrCompile.spec.ts

@@ -1,10 +1,10 @@
-import { compile } from '../../src'
+import { compile } from '../src'
 
 function getElementString(src: string): string {
   return compile(src).code.match(/_push\((.*)\)/)![1]
 }
 
-describe('ssr transform element', () => {
+describe('ssr compile integration test', () => {
   test('basic elements', () => {
     expect(getElementString(`<div></div>`)).toMatchInlineSnapshot(
       `"\`<div></div>\`"`
@@ -22,4 +22,12 @@ describe('ssr transform element', () => {
       getElementString(`<div><span></span><span></span></div>`)
     ).toMatchInlineSnapshot(`"\`<div><span></span><span></span></div>\`"`)
   })
+
+  test('nested elements with static text', () => {
+    expect(
+      getElementString(`<div><span>hello</span>&gt;<span>bye</span></div>`)
+    ).toMatchInlineSnapshot(
+      `"\`<div><span>hello</span>&gt;<span>bye</span></div>\`"`
+    )
+  })
 })

packages/compiler-ssr/src/ssrCodegenTransform.ts

@@ -10,7 +10,7 @@ import {
   ElementTypes,
   createBlockStatement
 } from '@vue/compiler-dom'
-import { isString } from '@vue/shared'
+import { isString, escapeHtml } from '@vue/shared'
 
 // Because SSR codegen output is completely different from client-side output
 // (e.g. multiple elements can be concatenated into a single template literal
@@ -85,7 +85,7 @@ function processChildren(
         // TODO
       }
     } else if (child.type === NodeTypes.TEXT) {
-      // TODO
+      context.pushStringPart(escapeHtml(child.content))
     } else if (child.type === NodeTypes.IF) {
       // TODO
     } else if (child.type === NodeTypes.FOR) {

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

@@ -5,7 +5,7 @@ import {
   TemplateLiteral,
   createTemplateLiteral
 } from '@vue/compiler-dom'
-import { escapeHtml } from '@vue/server-renderer'
+import { escapeHtml } from '@vue/shared'
 
 /*
 ## Simple Element

packages/server-renderer/__tests__/ssrUtils.spec.ts renamed to packages/server-renderer/__tests__/interpolate.spec.ts

@@ -1,15 +1,5 @@
 import { escapeHtml, interpolate } from '../src'
 
-test('ssr: escapeHTML', () => {
-  expect(escapeHtml(`foo`)).toBe(`foo`)
-  expect(escapeHtml(true)).toBe(`true`)
-  expect(escapeHtml(false)).toBe(`false`)
-  expect(escapeHtml(`a && b`)).toBe(`a && b`)
-  expect(escapeHtml(`"foo"`)).toBe(`"foo"`)
-  expect(escapeHtml(`'bar'`)).toBe(`'bar'`)
-  expect(escapeHtml(`<div>`)).toBe(`&lt;div&gt;`)
-})
-
 test('ssr: interpolate', () => {
   expect(interpolate(0)).toBe(`0`)
   expect(interpolate(`foo`)).toBe(`foo`)

packages/server-renderer/src/index.ts

@@ -4,4 +4,13 @@ export { renderToString } from './renderToString'
 // internal
 export { renderComponent, renderSlot } from './renderToString'
 export { renderClass, renderStyle, renderProps } from './renderProps'
-export { escapeHtml, interpolate } from './ssrUtils'
+
+// utils
+import { escapeHtml as _escapeHtml, toDisplayString } from '@vue/shared'
+
+// cast type to avoid dts dependency on @vue/shared (which is inlined)
+export const escapeHtml = _escapeHtml as (raw: string) => string
+
+export function interpolate(value: unknown): string {
+  return escapeHtml(toDisplayString(value))
+}

packages/server-renderer/src/renderProps.ts

@@ -1,4 +1,4 @@
-import { escapeHtml } from './ssrUtils'
+import { escapeHtml } from '@vue/shared'
 import {
   normalizeClass,
   normalizeStyle,

packages/server-renderer/src/renderToString.ts

@@ -22,7 +22,7 @@ import {
   isVoidTag
 } from '@vue/shared'
 import { renderProps } from './renderProps'
-import { escapeHtml } from './ssrUtils'
+import { escapeHtml } from '@vue/shared'
 
 const {
   isVNode,

packages/shared/__tests__/escapeHtml.spec.ts

@@ -0,0 +1,11 @@
+import { escapeHtml } from '../src'
+
+test('ssr: escapeHTML', () => {
+  expect(escapeHtml(`foo`)).toBe(`foo`)
+  expect(escapeHtml(true)).toBe(`true`)
+  expect(escapeHtml(false)).toBe(`false`)
+  expect(escapeHtml(`a && b`)).toBe(`a && b`)
+  expect(escapeHtml(`"foo"`)).toBe(`"foo"`)
+  expect(escapeHtml(`'bar'`)).toBe(`'bar'`)
+  expect(escapeHtml(`<div>`)).toBe(`&lt;div&gt;`)
+})

packages/server-renderer/src/ssrUtils.ts renamed to packages/shared/src/escapeHtml.ts

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

packages/shared/src/index.ts

@@ -8,6 +8,7 @@ export * from './mockWarn'
 export * from './normalizeProp'
 export * from './domTagConfig'
 export * from './domAttrConfig'
+export * from './escapeHtml'
 
 export const EMPTY_OBJ: { readonly [key: string]: any } = __DEV__
   ? Object.freeze({})