├── .gitignore
├── README.md
├── circle.yml
├── index.js
├── package.json
└── test
├── fixture.html
├── template.html
└── test.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | index.es5.js
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | > **DEPRECATED**: This package has been pulled into `vue-server-renderer`.
2 |
3 | # vue-ssr-html-stream [](https://circleci.com/gh/vuejs/vue-ssr-html-stream/tree/master)
4 |
5 | ## Usage
6 |
7 | ``` js
8 | const HTMLStream = require('vue-ssr-html-stream')
9 |
10 | const htmlStream = new HTMLStream({
11 | template, // string
12 | context, // ?Object
13 | outletPlaceholder // ?string, defaults to
14 | })
15 |
16 | // pipe it
17 | renderStream
18 | .pipe(htmlStream)
19 | .pipe(responseStream)
20 | ```
21 |
22 | - The `template` option is a string of the HTML page template. It must contain a special string which serves as the placeholder for your app's server-rendered content. The default placeholder string is `` - you can configure it with the `outletPlaceholder` option.
23 |
24 | - The `context` option should be the same context object passed to `bundleRenderer.renderToStream()`. The transform will check for a few special properties on the context when the source render stream starts emitting data:
25 |
26 | - `context.head`: any head markup that should be injected into the head of the page.
27 |
28 | - `context.styles`: any inline CSS that should be injected into the head of the page. Note that `vue-loader` 10.2.0+ (which uses `vue-style-loader` 2.0) will automatically populate this property with styles used in rendered components.
29 |
30 | - `context.state`: initial Vuex store state that should be inlined in the page as `window.__INITIAL_STATE__`. The inlined JSON is automatically sanitized with [serialize-javascript](https://github.com/yahoo/serialize-javascript).
31 |
32 | - `context.asyncChunks`: `')
72 | if (k > 0) {
73 | k += ''.length
74 | waist = tail.slice(0, k)
75 | tail = tail.slice(k)
76 | }
77 |
78 | return {
79 | head: template.slice(0, i),
80 | neck: template.slice(i, j),
81 | waist,
82 | tail
83 | }
84 | }
85 |
86 | function renderTemplate (parsedTemplate, content, context = {}) {
87 | return (
88 | parsedTemplate.head +
89 | (context.head || '') +
90 | (context.styles || '') +
91 | parsedTemplate.neck +
92 | content +
93 | (context.state ? renderState(context.state) : '') +
94 | parsedTemplate.waist +
95 | (context.asyncChunks ? context.asyncChunks : '') +
96 | parsedTemplate.tail
97 | )
98 | }
99 |
100 | function renderState (state) {
101 | return ``
104 | }
105 |
106 | HTMLStream.parseTemplate = parseTemplate
107 | HTMLStream.renderTemplate = renderTemplate
108 |
109 | module.exports = HTMLStream
110 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-ssr-html-stream",
3 | "version": "2.2.0",
4 | "description": "Transform stream to simplify Vue SSR streaming",
5 | "main": "index.es5.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "git+https://github.com/vuejs/vue-ssr-html-stream.git"
9 | },
10 | "keywords": [
11 | "vue",
12 | "ssr",
13 | "stream"
14 | ],
15 | "engines": {
16 | "node": ">=4.0.0"
17 | },
18 | "scripts": {
19 | "test": "jest --env node",
20 | "build": "buble index.js > index.es5.js",
21 | "pretest": "npm run build",
22 | "prepublish": "npm run build"
23 | },
24 | "author": "Evan You",
25 | "license": "MIT",
26 | "bugs": {
27 | "url": "https://github.com/vuejs/vue-ssr-html-stream/issues"
28 | },
29 | "homepage": "https://github.com/vuejs/vue-ssr-html-stream#readme",
30 | "dependencies": {
31 | "serialize-javascript": "^1.3.0"
32 | },
33 | "devDependencies": {
34 | "buble": "^0.15.2",
35 | "jest": "^18.1.0"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/test/fixture.html:
--------------------------------------------------------------------------------
1 |
82 |
--------------------------------------------------------------------------------
/test/template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/test/test.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs')
2 | const path = require('path')
3 | const HTMLStream = require('../')
4 | const template = fs.readFileSync(path.join(__dirname, 'template.html'), 'utf-8')
5 | const source = fs.readFileSync(path.join(__dirname, 'fixture.html'), 'utf-8')
6 | const sourceStream = fs.createReadStream(path.join(__dirname, 'fixture.html'), 'utf-8')
7 |
8 | test('should work', done => {
9 | const context = {
10 | head: 'hello',
11 | styles: '',
12 | state: {
13 | haxorXSS: ''
14 | },
15 | asyncChunks: ``
16 | }
17 |
18 | const htmlStream = new HTMLStream({
19 | template,
20 | context
21 | })
22 |
23 | let output = ''
24 | sourceStream
25 | .pipe(htmlStream)
26 | .on('data', chunk => {
27 | output += chunk.toString()
28 | })
29 | .on('end', () => {
30 | expect(output.indexOf(context.head)).toBeGreaterThan(-1)
31 | expect(output.indexOf(context.head)).toBeGreaterThan(-1)
32 | expect(output.indexOf(source)).toBeGreaterThan(-1)
33 | expect(output.indexOf('{"haxorXSS":"\\u003C\\u002Fscript\\u003E"}')).toBeGreaterThan(-1)
34 | expect(output.indexOf(
35 | `` +
36 | `` +
37 | ``
38 | )).toBeGreaterThan(-1)
39 | done()
40 | })
41 | })
42 |
--------------------------------------------------------------------------------