feat:init

.autod.conf.js

@@ -0,0 +1,25 @@
+'use strict';
+
+module.exports = {
+  write: true,
+  prefix: '^',
+  test: [
+    'test',
+    'benchmark',
+  ],
+  devdep: [
+    'egg',
+    'egg-ci',
+    'egg-bin',
+    'autod',
+    'eslint',
+    'eslint-config-egg',
+    'supertest',
+    'webstorm-disable-index',
+  ],
+  exclude: [
+    './test/fixtures',
+    './docs',
+    './coverage',
+  ],
+};

.eslintignore

@@ -0,0 +1,2 @@
+test/fixtures
+coverage

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "eslint-config-egg"
+}

.gitignore

@@ -0,0 +1,10 @@
+logs/
+npm-debug.log
+node_modules/
+coverage/
+.idea/
+run/
+.DS_Store
+*.swp
+*.iml
+.vscode

.travis.yml

@@ -0,0 +1,11 @@
+sudo: false
+language: node_js
+node_js:
+  - '6'
+  - '7'
+install:
+  - npm i npminstall && npminstall
+script:
+  - npm run ci
+after_script:
+  - npminstall codecov && codecov

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Alibaba Group Holding Limited and other contributors.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,60 @@
+# egg-view-vue-ssr
+
+[![NPM version][npm-image]][npm-url]
+[![build status][travis-image]][travis-url]
+[![Test coverage][codecov-image]][codecov-url]
+[![David deps][david-image]][david-url]
+[![Known Vulnerabilities][snyk-image]][snyk-url]
+[![npm download][download-image]][download-url]
+
+[npm-image]: https://img.shields.io/npm/v/egg-view-vue-ssr.svg?style=flat-square
+[npm-url]: https://npmjs.org/package/egg-view-vue-ssr
+[travis-image]: https://img.shields.io/travis/hubcarl/egg-view-vue-ssr.svg?style=flat-square
+[travis-url]: https://travis-ci.org/hubcarl/egg-view-vue-ssr
+[codecov-image]: https://img.shields.io/codecov/c/github/hubcarl/egg-view-vue-ssr.svg?style=flat-square
+[codecov-url]: https://codecov.io/github/hubcarl/egg-view-vue-ssr?branch=master
+[david-image]: https://img.shields.io/david/hubcarl/egg-view-vue-ssr.svg?style=flat-square
+[david-url]: https://david-dm.org/hubcarl/egg-view-vue-ssr
+[snyk-image]: https://snyk.io/test/npm/egg-view-vue-ssr/badge.svg?style=flat-square
+[snyk-url]: https://snyk.io/test/npm/egg-view-vue-ssr
+[download-image]: https://img.shields.io/npm/dm/egg-view-vue-ssr.svg?style=flat-square
+[download-url]: https://npmjs.org/package/egg-view-vue-ssr
+
+vue server side render solution for egg-view-vue
+
+## Install
+
+```bash
+$ tnpm i egg-view-vue-ssr --save
+```
+
+## Usage
+
+```js
+// {app_root}/config/plugin.js
+exports.vuessr = {
+  enable: true,
+  package: 'egg-view-vue-ssr',
+};
+```
+
+## Configuration
+
+```js
+// {app_root}/config/config.default.js
+exports.vuessr = {
+ // layout: path.join(app.baseDir, 'app/view/layout.html'),
+ // manifest: path.join(app.baseDir, 'config/manifest.json'),
+ // buildConfig: path.join(app.baseDir, 'config/buildConfig.json'),
+};
+```
+
+see [config/config.default.js](config/config.default.js) for more detail.
+
+## Questions & Suggestions
+
+Please open an issue [here](https://github.com/hubcarl/egg/issues).
+
+## License
+
+[MIT](LICENSE)

app.js

@@ -0,0 +1,9 @@
+'use strict';
+const fs = require('fs');
+const Resource = require('./lib/resource');
+module.exports = app => {
+  app.vue.resource = new Resource(app);
+  if (app.config.vuessr.layout) {
+    app.config.vuessr.template = fs.readFileSync(app.config.vuessr.layout, 'utf8');
+  }
+};

app/extend/context.js

@@ -0,0 +1,23 @@
+'use strict';
+const path = require('path');
+module.exports = {
+
+  /**
+   * render vue bundle file
+   * @method Context#render
+   * @param {String} name filename
+   * @param {Object} [locals] template data
+   * @param {Object} options custom params
+   */
+  * render(name, locals, options) {
+    locals = Object.assign({}, this.app.locals, this.locals, locals);
+    const root = this.app.config.view.root[0];
+    const filepath = path.join(root, name);
+    const code = yield this.app.vue.readFile(filepath);
+    const html = yield this.app.vue.renderCode(code, locals, options).catch(err => {
+      this.app.logger.error('[%s] server render bundle error, try client render, the server render error', name, err);
+      return this.renderString(this.app.config.vuessr.template, locals);
+    });
+    this.body = this.app.vue.resource.inject(name, html, locals, options);
+  },
+};

appveyor.yml

@@ -0,0 +1,15 @@
+environment:
+  matrix:
+    - nodejs_version: '6'
+    - nodejs_version: '7'
+
+install:
+  - ps: Install-Product node $env:nodejs_version
+  - npm i npminstall && node_modules\.bin\npminstall
+
+test_script:
+  - node --version
+  - npm --version
+  - npm run ci
+
+build: off

config/config.default.js

@@ -0,0 +1,24 @@
+'use strict';
+const path = require('path');
+
+module.exports = app => {
+  const config = {};
+
+  /**
+   * vue ssr config
+   * @member Config#vue
+   * @property {String} [manifest=${baseDir}/app/view/layout.html] - client render template, support renderString compile
+   * @property {String} [manifest=${baseDir}/config/manifest.json] - resource dependence(css, js) config
+   * @property {String} [manifest=${baseDir}/config/buildConfig.json] - compile config, include `publicPath` and `commonsChunk`
+   * `publicPath`: static resource prefix path, so cdn domain address prefix or local prefix path(`/`)
+   * `commonsChunk`: common js or css filename, so `vendor`
+   */
+  config.vuessr = {
+    layout: path.join(app.baseDir, 'app/view/layout.html'),
+    manifest: path.join(app.baseDir, 'config/manifest.json'),
+    buildConfig: path.join(app.baseDir, 'config/buildConfig.json'),
+  };
+
+  return config;
+};
+

lib/resource.js

@@ -0,0 +1,83 @@
+'use strict';
+const fs = require('fs');
+const serialize = require('serialize-javascript');
+
+class Resource {
+  constructor(app) {
+    this.app = app;
+    this.config = app.config.vuessr;
+    this.headRegExp = /(<\/head>)/i;
+    this.bodyRegExp = /(<\/body>)/i;
+    this.init();
+  }
+
+  init() {
+    if (this.isValidJSONConfig(this.config.buildConfig)) {
+      this.buildConfig = require(this.config.buildConfig);
+    }
+    if (!this.resourceDeps && this.isValidJSONConfig(this.config.manifest)) {
+      const manifest = require(this.config.manifest);
+      this.resourceDeps = this.getResourceDeps(manifest, this.buildConfig);
+    }
+  }
+
+  isValidJSONConfig(filepath) {
+    if (!filepath) return false;
+    if (fs.existsSync(filepath)) {
+      try {
+        return require(filepath);
+      } catch (err) {
+        return false;
+      }
+    }
+    return false;
+  }
+
+  inject(name, content, data) {
+    this.init();
+    const fileKey = name;
+    const fileManifest = this.resourceDeps[fileKey];
+    if (fileManifest) {
+      const publicPath = this.buildConfig.publicPath.replace(/\/$/, '');
+      const cssInject = fileManifest.css.map(item => {
+        return `<link rel="stylesheet" href="${publicPath + item}">`;
+      });
+      const scriptInject = fileManifest.script.map(item => {
+        return `<script type="text/javascript" src="${publicPath + item}"></script>`;
+      });
+      scriptInject.unshift(`<script> window.__INITIAL_STATE__= ${serialize({ data }, { isJSON: true })};</script>`);
+      content = content.replace(this.headRegExp, match => {
+        return cssInject.join('') + match;
+      });
+      content = content.replace(this.bodyRegExp, match => {
+        return scriptInject.join('') + match;
+      });
+    }
+    return content;
+  }
+
+  getResourceDeps(manifest, buildConfig) {
+    const commonScriptPaths = [];
+    const commonCSSPaths = [];
+    const formatManifest = {};
+    buildConfig.commonsChunk.forEach(item => {
+      const jsKey = '/' + item + '.js';
+      const cssKey = '/' + item + '.css';
+      manifest[jsKey] && commonScriptPaths.push(manifest[jsKey]);
+      manifest[cssKey] && commonCSSPaths.push(manifest[cssKey]);
+    });
+
+    Object.keys(manifest).forEach(item => {
+      if (/\.js$/.test(item)) {
+        const key = item.replace(/^\//, '');
+        formatManifest[key] = {
+          script: commonScriptPaths.concat(manifest[item]),
+          css: commonCSSPaths.concat(manifest[item.replace(/\.js$/, '.css')] || []),
+        };
+      }
+    });
+    return formatManifest;
+  }
+}
+
+module.exports = Resource;

package.json

@@ -0,0 +1,65 @@
+{
+  "name": "egg-view-vue-ssr",
+  "version": "0.0.1",
+  "description": "vue server side render solution for egg-view-vue",
+  "eggPlugin": {
+    "name": "vuessr",
+    "dependencies": [
+      "vue"
+    ]
+  },
+  "keywords": [
+    "egg",
+    "eggPlugin",
+    "egg-view",
+    "vue",
+    "ssr"
+  ],
+  "dependencies": {
+    "serialize-javascript": "^1.3.0"
+  },
+  "devDependencies": {
+    "@hubcarl/egg-view-vue": "^0.0.1",
+    "autod": "^2.7.1",
+    "egg": "^1.0.0",
+    "egg-bin": "^3.1.0",
+    "egg-ci": "^1.5.0",
+    "egg-mock": "^3.2.0",
+    "eslint": "^3.18.0",
+    "eslint-config-egg": "^3.2.0",
+    "supertest": "^3.0.0",
+    "webstorm-disable-index": "^1.1.2"
+  },
+  "engines": {
+    "node": ">=6.0.0"
+  },
+  "scripts": {
+    "test": "npm run lint -- --fix && npm run test-local",
+    "test-local": "egg-bin test",
+    "cov": "egg-bin cov",
+    "lint": "eslint .",
+    "ci": "npm run lint && npm run cov",
+    "autod": "autod"
+  },
+  "files": [
+    "index.js",
+    "app.js",
+    "agent.js",
+    "config",
+    "app",
+    "lib"
+  ],
+  "ci": {
+    "version": "6, 7"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hubcarl/egg-view-vue-ssr.git"
+  },
+  "bugs": {
+    "url": "https://github.com/eggjs/egg/issues"
+  },
+  "homepage": "https://github.com/eggjs/egg-view-vue-ssr#readme",
+  "author": "hubcarl",
+  "license": "MIT"
+}

test/fixtures/apps/view-vue-ssr-test/app/controller/view.js

@@ -0,0 +1,33 @@
+'use strict';
+
+exports.renderString = function* (ctx) {
+  ctx.body = yield ctx.renderString('<div>name:{{name}},desc:{{desc}}</div>', {
+    name: 'egg-vue-view',
+    desc: 'egg view plugin for vue',
+  });
+};
+
+exports.renderStringError = function* (ctx) {
+  try {
+    ctx.body = yield ctx.renderString('<div>name:{{user.name}},desc:{{user.desc}}</div>', {
+      name: 'egg-vue-view',
+      desc: 'egg view plugin for vue',
+    });
+  } catch (e) {
+    ctx.status = 500;
+    ctx.body = e.toString();
+  }
+};
+
+exports.render = function* (ctx) {
+  this.app.locals.title = 'app_locals_render_ssr';
+  this.locals.description = 'app_context_locals_render_ssr';
+  yield ctx.render('test/test.js', { message: 'vue server side render!' });
+};
+
+exports.renderServerError = function* (ctx) {
+  yield ctx.render('error/error.js', {
+    keywords: 'ssr',
+    description: 'vue server render error, client render',
+  });
+};