feat: first version (#4)

.gitignore

@@ -6,4 +6,5 @@ coverage/
 run/
 .DS_Store
 *.swp
-
+.vscode
+*.iml

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) Alibaba Group Holding Limited and other contributors.
+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

README.md

@@ -20,9 +20,7 @@
 [download-image]: https://img.shields.io/npm/dm/egg-view-react.svg?style=flat-square
 [download-url]: https://npmjs.org/package/egg-view-react
 
-UNIMPLEMENTED, STILL WORK IN PROGRESS.
-
-egg view plugin for [react].
+egg view plugin for react
 
 ## Install
 
@@ -34,25 +32,19 @@ $ npm i egg-view-react --save
 
 ```js
 // {app_root}/config/plugin.js
-exports.view = {
+exports.react = {
   enable: true,
   package: 'egg-view-react',
 };
 ```
 
 ## Configuration
 
-```js
-// {app_root}/config/config.default.js
-exports.view = {
-};
-```
-
 see [config/config.default.js](config/config.default.js) for more detail.
 
 ## Example
 
-<!-- example here -->
+React server side render example, please see [egg-react-webpack-boilerplate](https://github.com/hubcarl/egg-react-webpack-boilerplate)
 
 ## Questions & Suggestions
 
@@ -61,5 +53,3 @@ Please open an issue [here](https://github.com/eggjs/egg/issues).
 ## License
 
 [MIT](LICENSE)
-
-[react]: https://facebook.github.io/react/

app.js

@@ -1,5 +1,5 @@
 'use strict';
 
 module.exports = app => {
-  console.log('app.config.env =', app.config.env);
+  app.view.use('react', require('./lib/view'));
 };

app/extend/application.js

@@ -1,25 +1,14 @@
 'use strict';
 
-const VIEW_ENGINE = Symbol('app#ViewEngine');
-const View = require('../../lib/view');
-const engine = require('react-dom/server');
+const Engine = require('../../lib/engine');
+const REACT_ENGINE = Symbol('Application#react');
 
 module.exports = {
-  // mount `View` class to app
-  // egg will create an instance to `ctx.view` at every request
-  // you can use `this.render` at controller
-  get [Symbol.for('egg#view')]() {
-    return View;
-  },
 
-  /**
-   * react viewEngine
-   * @member {Object} Application#viewEngine
-   */
-  get viewEngine() {
-    if (!this[VIEW_ENGINE]) {
-      this[VIEW_ENGINE] = engine;
+  get react() {
+    if (!this[REACT_ENGINE]) {
+      this[REACT_ENGINE] = new Engine(this);
     }
-    return this[VIEW_ENGINE];
+    return this[REACT_ENGINE];
   },
 };

appveyor.yml

@@ -1,7 +1,7 @@
 environment:
   matrix:
     - nodejs_version: '6'
-    - nodejs_version: '7'
+    - nodejs_version: '8'
 
 install:
   - ps: Install-Product node $env:nodejs_version
@@ -10,6 +10,6 @@ install:
 test_script:
   - node --version
   - npm --version
-  - npm run ci
+  - npm run test
 
 build: off

config/config.default.js

@@ -1,14 +1,15 @@
 'use strict';
 
-const path = require('path');
-
-module.exports = appInfo => {
+module.exports = () => {
   const config = {};
 
   config.view = {
-    extname: 'js',
-    dir: path.join(appInfo.baseDir, 'app/view'),
+    mapping: {
+      '.js': 'react',
+      '.jsx': 'react',
+    },
   };
 
   return config;
 };
+

config/config.local.js

@@ -0,0 +1,5 @@
+'use strict';
+
+exports.react = {
+  cache: false,
+};

lib/engine.js

@@ -0,0 +1,30 @@
+'use strict';
+const React = require('react');
+const ReactDOMServer = require('react-dom/server');
+
+class Engine {
+  constructor(app) {
+    this.app = app;
+    this.config = app.config.react;
+  }
+
+  render(name, locals) {
+    const reactClass = require(name);
+    return Promise.resolve(this.renderToString(reactClass, locals));
+  }
+
+  renderMarkup(name, locals) {
+    const reactClass = require(name);
+    return Promise.resolve(this.renderToStaticMarkup(reactClass, locals));
+  }
+
+  renderToString(reactClass, locals) {
+    return ReactDOMServer.renderToString(React.createElement(reactClass, locals));
+  }
+
+  renderToStaticMarkup(reactClass, locals) {
+    return ReactDOMServer.renderToStaticMarkup(React.createElement(reactClass, locals));
+  }
+}
+
+module.exports = Engine;

lib/view.js

@@ -1,37 +1,18 @@
 'use strict';
 
-const path = require('path');
-const React = require('react');
-
 class View {
-
   constructor(ctx) {
     this.ctx = ctx;
     this.app = ctx.app;
-    this.config = ctx.app.config.view;
-    this.extname = this.config.extname.replace(/^\.?/, '.');
   }
 
-  render(name, locals) {
-    const reactFile = path.join(this.config.dir, name + this.extname);
-
-    return new Promise((resolve, reject) => {
-      let html = '<!DOCTYPE html>';
-      try {
-        const reactComponent = require(reactFile);
-        html += this.app.viewEngine.renderToString(React.createElement(reactComponent.default || reactComponent, locals || {}));
-      } catch (error) {
-        reject(error);
-      }
-
-      resolve(html);
-    });
+  render(name, locals, options) {
+    return this.app.react.render(name, locals, options);
   }
 
   renderString() {
     return Promise.reject('not implemented yet!');
   }
-
 }
 
 module.exports = View;