chore: inject Doctype by combineStream

zhangyuang · Mar 9, 2020 · dedc2f8 · dedc2f8
1 parent 174f9db
commit dedc2f8
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 12 deletions.
diff --git a/example/ssr-with-antd/app/controller/page.js b/example/ssr-with-antd/app/controller/page.js
@@ -12,7 +12,6 @@ class PageController extends Controller {
  ctx.status = 200
  Object.assign(ctx.app.config, ssrConfig)
  const stream = await renderToStream(ctx, ctx.app.config)
- ctx.res.write('<!DOCTYPE html>')
  ctx.body = stream
  } catch (error) {
  ctx.logger.error(`Page Controller renderToStream Error`, error)

diff --git a/example/ssr-with-dva/app/controller/page.js b/example/ssr-with-dva/app/controller/page.js
@@ -12,7 +12,6 @@ class PageController extends Controller {
  ctx.status = 200
  Object.assign(ctx.app.config, ssrConfig)
  const stream = await renderToStream(ctx, ctx.app.config)
- ctx.res.write('<!DOCTYPE html>')
  ctx.body = stream
  } catch (error) {
  ctx.logger.error(`Page Controller renderToStream Error ${error}`)

diff --git a/example/ssr-with-js/app/controller/page.js b/example/ssr-with-js/app/controller/page.js
@@ -12,7 +12,6 @@ class PageController extends Controller {
  ctx.status = 200
  Object.assign(ctx.app.config, ssrConfig)
  const stream = await renderToStream(ctx, ctx.app.config)
- ctx.res.write('<!DOCTYPE html>')
  ctx.body = stream
  } catch (error) {
  ctx.logger.error(`Page Controller renderToStream Error`, error)

diff --git a/example/ssr-with-loadable/app/controller/page.js b/example/ssr-with-loadable/app/controller/page.js
@@ -12,7 +12,6 @@ class PageController extends Controller {
  ctx.status = 200
  Object.assign(ctx.app.config, ssrConfig)
  const stream = await renderToStream(ctx, ctx.app.config)
- ctx.res.write('<!DOCTYPE html>')
  ctx.body = stream
  } catch (error) {
  ctx.logger.error(`Page Controller renderToStream Error ${error}`)

diff --git a/example/ssr-with-mobx/app/controller/page.js b/example/ssr-with-mobx/app/controller/page.js
@@ -12,7 +12,6 @@ class PageController extends Controller {
  ctx.status = 200
  Object.assign(ctx.app.config, ssrConfig)
  const stream = await renderToStream(ctx, ctx.app.config)
- ctx.res.write('<!DOCTYPE html>')
  ctx.body = stream
  } catch (error) {
  ctx.logger.error(`Page Controller renderToStream Error`, error)

diff --git a/example/ssr-with-rax/app/controller/page.js b/example/ssr-with-rax/app/controller/page.js
@@ -12,7 +12,6 @@ class PageController extends Controller {
  ctx.status = 200
  Object.assign(ctx.app.config, ssrConfig)
  const stream = await renderToStream(ctx, ctx.app.config)
- ctx.res.write('<!DOCTYPE html>')
  ctx.body = stream
  } catch (error) {
  ctx.logger.error(`Page Controller renderToStream Error`, error)

diff --git a/example/ssr-with-ts/src/app/controller/page.ts b/example/ssr-with-ts/src/app/controller/page.ts
@@ -23,7 +23,6 @@ export class Page {
  this.ctx.apiService = this.service.index // 将service挂载到上下文对象
  const config = Object.assign(this.ctx.app.config, ssrConfig)
  const stream = await renderToStream(this.ctx, config)
- this.ctx.res.write('<!DOCTYPE html>')
  this.ctx.body = stream
  } catch (error) {
  this.ctx.logger.error(`Page Controller renderToStream Error`, error)

diff --git a/packages/ykfe-utils/package.json b/packages/ykfe-utils/package.json
@@ -1,6 +1,6 @@
 {
  "name": "ykfe-utils",
- "version": "3.4.0",
+ "version": "3.5.0",
  "description": "utils for ykfe",
  "main": "lib/index.js",
  "module": "es/index.js",

diff --git a/packages/ykfe-utils/src/renderToStream.ts b/packages/ykfe-utils/src/renderToStream.ts
@@ -1,5 +1,5 @@
 import { Context } from 'midway'
-import { getVersion } from './utils'
+import { getVersion, ReadableString, combineStream } from './utils'
 import { renderLayout } from './renderLayout'
 import { useCdn } from './useCdn'
 import { Config } from './interface/config'
@@ -46,7 +46,8 @@ const renderToStream = async (ctx: Context, config: Config) => {
  defaultUnit: 'rpx'
  }) : global.renderToNodeStream(serverComponent)
 
- return stream
+ const doctypeStream = new ReadableString('<!DOCTYPE html>')
+ return combineStream(doctypeStream, stream)
 }
 
 export default renderToStream
diff --git a/packages/ykfe-utils/src/utils/index.ts b/packages/ykfe-utils/src/utils/index.ts
@@ -1,4 +1,5 @@
 import { resolve } from 'path'
+import { Readable, PassThrough } from 'stream'
 import React from 'react'
 import { renderToNodeStream } from 'react-dom/server'
 import { Config } from '../interface/config'
@@ -26,10 +27,39 @@ const getVersion = (str: string) => {
  }
 }
 
+class ReadableString extends Readable {
+ str: string
+ sent: boolean
+
+ constructor (str: string) {
+ super()
+ this.str = str
+ this.sent = false
+ }
+
+ _read () {
+ if (!this.sent) {
+ this.push(Buffer.from(this.str))
+ this.sent = true
+ } else {
+ this.push(null)
+ }
+ }
+}
+
+const combineStream = function () {
+ const writeableStream = new PassThrough()
+ Array.prototype.slice.call(arguments).forEach(readableStream => {
+ readableStream.pipe(writeableStream)
+ })
+ return writeableStream
+}
+
 export {
  resolveDir,
  logGreen,
  reactToStream,
- getVersion
-
+ getVersion,
+ ReadableString,
+ combineStream
 }