├── .gitignore
├── LICENSE
├── README.md
├── app.js
├── app_1.js
├── dist
    ├── avalon.js
    ├── avalon2.2.js
    ├── serverRender.js
    ├── serverRender2.2.js
    └── vm.js
├── index.js
├── package.json
├── src
    ├── aaa.html
    └── vm.js
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Coverage directory used by tools like istanbul
12 | coverage
13 | 
14 | # node-waf configuration
15 | .lock-wscript
16 | 
17 | # Dependency directory
18 | node_modules
19 | 
20 | # Optional npm cache directory
21 | .npm
22 | 
23 | # Optional REPL history
24 | .node_repl_history
25 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 司徒正美
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # avalon-server-render-example
 2 | avalon2+koa2的后端渲染例子
 3 | 
 4 | npm install
 5 | 
 6 | npm start
 7 | 
 8 | 
 9 | ------------
10 | 后端渲染的流程
11 | 
12 | 1.  引入最新版 [avalon](https://github.com/RubyLouvre/avalon/tree/master/dist) 这里用avalon.modern体积少些
13 | 2.  引入avalon仓库下的serve下的文件[serveRender.js](https://github.com/RubyLouvre/avalon/tree/master/src/server)
14 | 3.  引入你定义VM的文件 (所有DOM操作要在回调里进行,不要出现 window, document, 方便能在nodejs环境中运行)
15 | 对你的VM使用webpack进行打包 (目的是处理module.exports, require)
16 | 4.  引入你该页面的模板
17 | 5.  将VM与模板放进serveRender方法,得到一个对象,里面包含渲染好的HTML(**A**) 及 一个包括所有模板的对象(**B**)
18 | 6.  创建一个script标签, 里面定义一个`avalon.serverTemplates`对象, 将**B**对象赋给它
19 | 7.  将上面的标签与A页面,  赋给ctx.body发往前端 
20 | 
21 | 
22 | ------
23 | 
24 | ```javascript
25 | //1. 引入avalon
26 | var vm = require('./src/avalon')
27 | //2. 引入avalon的后端渲染器
28 | var serveRender = require('./dist/serverRender')
29 | //3. 当前页面VM
30 | var vm = require('./src/vm')
31 | //4. 当前页面模板
32 | var test = fs.readFileSync('./src/aaa.html', 'utf-8');
33 | 
34 | //5. 
35 | var obj = serveRender(vm, test)
36 | 
37 | //6. 
38 | var files = JSON.stringify(obj.templates)
39 | var script = '<script src="./avalon.js"><\/script>' +
40 |         '<script> avalon.serverTemplates= ' + files + '<\/script>' +
41 |         '<script src="./test.js"><\/script>'
42 | //7. render
43 | app.use(async function(ctx){
44 |      await (ctx.body = script + obj.html)
45 | })
46 | 
47 | 
48 | 
49 | ```
50 | 
51 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | import Koa from 'koa'
 2 | const views = require('koa-views');
 3 | const avalon = require('./dist/avalon2.2');
 4 | const fs = require('fs');
 5 | const path = require('path');
 6 | import convert from 'koa-convert'
 7 | const minify = require('html-minifier').minify;
 8 | 
 9 | import koaStaticPlus from 'koa-static-plus'
10 | 
11 | const app = new Koa()
12 | 
13 | app.use(koaStaticPlus(path.join(__dirname, '/dist'), {
14 |         pathPrefix: ''
15 | }))
16 | 
17 | 
18 | //当前页面VM
19 | var vm = require('./src/vm')
20 | //当前页面模板
21 | var page = fs.readFileSync('./src/aaa.html', 'utf-8');
22 | 
23 | 
24 | //渲染器
25 | var serveRender = require('./dist/serverRender2.2')
26 | 
27 | var obj = serveRender(vm, page)
28 | 
29 | for(var i in obj.templates){
30 |    obj.templates[i] = minify(obj.templates[i],{
31 |        collapseInlineTagWhitespace: true,
32 |        collapseWhitespace:true
33 |    })
34 |    
35 | }
36 | 
37 | var files = JSON.stringify(obj.templates)
38 | 
39 | 
40 | var header = '<!document html><html><head>'+
41 |             '<script src="./avalon2.2.js"><\/script>'+
42 |            
43 |             '<script src="./vm.js"><\/script>'+
44 |             '<script> avalon.serverTemplates= ' + files + '<\/script>' +
45 |             '</head><body>'
46 | var footer = '</body></html>'
47 | 
48 | app.use(async function(ctx){
49 |      await (ctx.body = (header+ obj.html+ footer))
50 | })
51 | 
52 | 
53 | 
54 | app.listen(3000, () => console.log('server started 3000'))
55 | 
56 | export default app
57 | 
58 | 


--------------------------------------------------------------------------------
/app_1.js:
--------------------------------------------------------------------------------
 1 | import Koa from 'koa'
 2 | const views = require('koa-views');
 3 | const avalon = require('./dist/avalon');
 4 | const fs = require('fs');
 5 | const path = require('path');
 6 | import convert from 'koa-convert'
 7 | const minify = require('html-minifier').minify;
 8 | 
 9 | import koaStaticPlus from 'koa-static-plus'
10 | 
11 | const app = new Koa()
12 | 
13 | app.use(koaStaticPlus(path.join(__dirname, '/dist'), {
14 |         pathPrefix: ''
15 | }))
16 | 
17 | 
18 | //当前页面VM
19 | var vm = require('./src/vm')
20 | //当前页面模板
21 | var page = fs.readFileSync('./src/aaa.html', 'utf-8');
22 | 
23 | 
24 | //渲染器
25 | var serveRender = require('./dist/serverRender')
26 | 
27 | var obj = serveRender(vm, page)
28 | 
29 | for(var i in obj.templates){
30 |    obj.templates[i] = minify(obj.templates[i],{
31 |        collapseInlineTagWhitespace: true,
32 |        collapseWhitespace:true
33 |    })
34 |    
35 | }
36 | 
37 | var files = JSON.stringify(obj.templates)
38 | 
39 | 
40 | 
41 | var script = '<!document html><html><head><script src="./avalon.js"><\/script>' +
42 |         '<script> avalon.serverTemplates= ' + files + '<\/script>' +
43 |         '<script src="./vm.js"><\/script></head><body></body></html>'
44 | 
45 | app.use(async function(ctx){
46 |      await (ctx.body = script + obj.html)
47 | })
48 | 
49 | 
50 | 
51 | app.listen(3000, () => console.log('server started 3000'))
52 | 
53 | export default app
54 | 
55 | 


--------------------------------------------------------------------------------
/dist/serverRender.js:
--------------------------------------------------------------------------------
  1 | function serverRender(vm, str) {
  2 |     var vdom = avalon.lexer(str)
  3 |     var templates = {}
  4 |     collectTemplate(vdom, templates)
  5 |     var oldTree = avalon.speedUp(vdom)
  6 |     var render = avalon.render(oldTree)
  7 |     var vtree = render(vm)
  8 |     var html = avalon.vdomAdaptor(vtree, 'toHTML', false)
  9 |     return {
 10 |         templates: templates,
 11 |         html: html
 12 |     }
 13 | }
 14 | 
 15 | function collectTemplate(vdoms, obj) {
 16 |     for (var i = 0, el; el = vdoms[i++]; ) {
 17 |         var props = el.props
 18 |         if (props) {
 19 |             var id = props['ms-controller'] || props['ms-important']
 20 |             if (id) {
 21 |                 obj[id] = VElement.prototype.toHTML.call(el, true)
 22 |                 continue
 23 |             }
 24 |         }
 25 |         if (el.children) {
 26 |             collectTemplate(el.children, obj)
 27 |         }
 28 |     }
 29 | }
 30 | 
 31 | //重写4大构造器,用于生成更少的HTML
 32 | function VElement(type, props, children) {
 33 |     this.nodeName = type
 34 |     this.props = props
 35 |     this.children = children
 36 | }
 37 | 
 38 | var rvml = /^\w+\:\w+/
 39 | function classNames() {
 40 |     var classes = []
 41 |     for (var i = 0; i < arguments.length; i++) {
 42 |         var arg = arguments[i]
 43 |         var argType = typeof arg
 44 |         if (argType === 'string' || argType === 'number' || arg === true) {
 45 |             classes.push(arg)
 46 |         } else if (Array.isArray(arg)) {
 47 |             classes.push(classNames.apply(null, arg))
 48 |         } else if (argType === 'object') {
 49 |             for (var key in arg) {
 50 |                 if (arg.hasOwnProperty(key) && arg[key]) {
 51 |                     classes.push(key)
 52 |                 }
 53 |             }
 54 |         }
 55 |     }
 56 | 
 57 |     return classes.join(' ')
 58 | }
 59 | //toHTML有两种模式 page模式与模板模式
 60 | //page模式就是将数据塞进模板中,并去掉所有ms-*(除了ms-controller, ms-imporant)属性与注释占位符
 61 | 
 62 | VElement.prototype = {
 63 |     constructor: VElement,
 64 |     toHTML: function (dir) {
 65 |         var arr = []
 66 |         var props = this.props || {}
 67 | 
 68 |         var attr = this['ms-attr']
 69 |         if (attr && typeof attr === 'object') {
 70 |             if (Array.isArray(attr)) {//转换成对象
 71 |                 attr = avalon.mix.apply({}, attr)
 72 |             }
 73 |             for (var i in attr) {
 74 |                 props[i] = attr[i]
 75 |                 if (!attr[i]) {
 76 |                     delete props[i]
 77 |                 }
 78 |             }
 79 |         }
 80 |         var cls = this['ms-class']
 81 |         if (cls) {
 82 |             var oldClass = props['class'] || ''
 83 |             var newClass = classNames(cls)
 84 |             var classArray = []
 85 |             var uniq = {}
 86 |             String(oldClass + ' ' + newClass).replace(/\S+/g, function (i) {
 87 |                 if (!uniq[i]) {
 88 |                     uniq[i] = 1
 89 |                     classArray.push(i)
 90 |                 }
 91 |             })
 92 |             props['class'] = classArray.join(' ')
 93 |         }
 94 | 
 95 |         for (var i in props) {
 96 |             var val = props[i]
 97 |             if (i.charAt(0) === ':') {
 98 |                 continue
 99 |             }
100 |             if (i.indexOf('ms-') === 0) {
101 |                 if (dir) {
102 |                     arr.push(i.replace(/^ms\-/, ':') + '=' + avalon.quote(val + ''))
103 | 
104 |                 } else {
105 |                     if (i === 'ms-controller' || i === 'ms-important') {
106 |                         arr.push(i + '=' + avalon.quote(val + ''))
107 |                     }
108 |                     continue
109 |                 }
110 |             } else {
111 |                 arr.push(i + '=' + avalon.quote(val + ''))
112 |             }
113 |         }
114 | 
115 |         arr = arr.length ? ' ' + arr.join(' ') : ''
116 |         var str = '<' + this.nodeName + arr
117 |         if (this.isVoidTag) {
118 |             return str + '/>'
119 |         }
120 |         str += '>'
121 |         if (this.children) {
122 |             str += this.children.map(function (c) {
123 | 
124 |                 return c ? avalon.vdomAdaptor(c, 'toHTML', dir) : ''
125 |             }).join('')
126 |         }
127 |         return str + '</' + this.nodeName + '>'
128 |     }
129 | }
130 | 
131 | 
132 | function VComment(text) {
133 |     this.nodeName = '#comment'
134 |     this.nodeValue = text
135 | }
136 | VComment.prototype = {
137 |     constructor: VComment,
138 |     toHTML: function () {
139 |         return '<!--' + this.nodeValue + '-->' + (this.template || "")
140 |     }
141 | }
142 | function VText(text) {
143 |     this.nodeName = '#text'
144 |     this.nodeValue = text
145 | }
146 | 
147 | VText.prototype = {
148 |     constructor: VText,
149 |     toHTML: function () {
150 |         return this.nodeValue
151 |     }
152 | }
153 | 
154 | function VFragment(a) {
155 |     this.nodeName = '#document-fragment'
156 |     this.children = a
157 | }
158 | 
159 | VFragment.prototype = {
160 |     constructor: VFragment,
161 |     toHTML: function (dir) {
162 |         return this.children.map(function (a) {
163 |             return avalon.vdomAdaptor(a, 'toHTML', dir)
164 |         }).join('')
165 |     }
166 | }
167 | 
168 | 
169 | avalon.vdomAdaptor = function (obj, method, dir) {
170 |     switch (obj.nodeName) {
171 |         case '#text':
172 |             return VText.prototype[method].call(obj)
173 |         case '#comment':
174 |             return VComment.prototype[method].call(obj)
175 |         case '#document-fragment':
176 |             return VFragment.prototype[method].call(obj, dir)
177 |         case void(0):
178 |             return (new VFragment(obj))[method]()
179 |         default:
180 |             return VElement.prototype[method].call(obj, dir)
181 |     }
182 | }
183 | 
184 | module.exports = serverRender


--------------------------------------------------------------------------------
/dist/serverRender2.2.js:
--------------------------------------------------------------------------------
 1 | function serverRender(vm, str) {
 2 |     var nodes = avalon.lexer(str)
 3 |     var templates = {}
 4 |     collectTemplate(nodes, templates)
 5 |     var render = avalon.scan(str)
 6 |     var html = avalon.vdom(render.root, 'toHTML', false)
 7 |     console.log('=======begin========')
 8 |     console.log(html)
 9 |     console.log('========end=========')
10 |     return {
11 |         templates: templates,
12 |         html: html
13 |     }
14 | }
15 | 
16 | function collectTemplate(vdoms, obj) {
17 |     for (var i = 0, el; el = vdoms[i++]; ) {
18 |         var props = el.props
19 |         if (props) {
20 |             var id = props['ms-controller'] ||
21 |                      props[':controller'] ||
22 |                      props['ms-important'] ||
23 |                      props[':important']
24 |             if (id) {
25 |                 obj[id] = avalon.VElement.prototype.toHTML.call(el, true)
26 |                 continue
27 |             }
28 |         }
29 |         if (el.children) {
30 |             collectTemplate(el.children, obj)
31 |         }
32 |     }
33 | }
34 | 
35 | 
36 | 
37 | module.exports = serverRender


--------------------------------------------------------------------------------
/dist/vm.js:
--------------------------------------------------------------------------------
 1 | /******/ (function(modules) { // webpackBootstrap
 2 | /******/ 	// The module cache
 3 | /******/ 	var installedModules = {};
 4 | 
 5 | /******/ 	// The require function
 6 | /******/ 	function __webpack_require__(moduleId) {
 7 | 
 8 | /******/ 		// Check if module is in cache
 9 | /******/ 		if(installedModules[moduleId])
10 | /******/ 			return installedModules[moduleId].exports;
11 | 
12 | /******/ 		// Create a new module (and put it into the cache)
13 | /******/ 		var module = installedModules[moduleId] = {
14 | /******/ 			exports: {},
15 | /******/ 			id: moduleId,
16 | /******/ 			loaded: false
17 | /******/ 		};
18 | 
19 | /******/ 		// Execute the module function
20 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21 | 
22 | /******/ 		// Flag the module as loaded
23 | /******/ 		module.loaded = true;
24 | 
25 | /******/ 		// Return the exports of the module
26 | /******/ 		return module.exports;
27 | /******/ 	}
28 | 
29 | 
30 | /******/ 	// expose the modules object (__webpack_modules__)
31 | /******/ 	__webpack_require__.m = modules;
32 | 
33 | /******/ 	// expose the module cache
34 | /******/ 	__webpack_require__.c = installedModules;
35 | 
36 | /******/ 	// __webpack_public_path__
37 | /******/ 	__webpack_require__.p = "";
38 | 
39 | /******/ 	// Load entry module and return exports
40 | /******/ 	return __webpack_require__(0);
41 | /******/ })
42 | /************************************************************************/
43 | /******/ ([
44 | /* 0 */
45 | /***/ function(module, exports) {
46 | 
47 | 	var vm = avalon.define({
48 | 	    $id: 'test',
49 | 	    aaa: '司徒正美',
50 | 	    arr: [1,2,3],
51 | 	    fn: function(){
52 | 	        avalon.log('aaa')
53 | 	    }
54 | 	})
55 | 
56 | 	module.exports = vm
57 | 
58 | /***/ }
59 | /******/ ]);


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | //http://my.oschina.net/u/1416844/blog/660951
 2 | require("babel-core/register")(
 3 |     {
 4 |         presets: ['stage-3','es2015']
 5 |     }
 6 | );
 7 | //http://stackoverflow.com/questions/31122193/babel-polyfill-what-is-that
 8 | require("babel-polyfill");
 9 | require("./app.js");
10 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "avalon2-koa2-server-render-example",
 3 |   "version": "1.0.0",
 4 |   "description": "avalon2与koa2后端渲染例子",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "./node_modules/.bin/nodemon"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/geekplux/koa2-boilerplate.git"
12 |   },
13 |   "keywords": [
14 |     "koa",
15 |     "koa2",
16 |     "babel",
17 |     "es2015"
18 |   ],
19 |   "author": "RubyLouvre",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "http://avalonjs.coding.me/"
23 |   },
24 |   "homepage": "hhttp://avalonjs.coding.me/",
25 |   "dependencies": {
26 |     "koa": "^2.0.0"
27 |   },
28 |   "devDependencies": {
29 |     "babel-core": "^6.13.2",
30 |     "babel-polyfill": "^6.13.0",
31 |     "babel-preset-es2015": "^6.13.2",
32 |     "babel-preset-stage-3": "^6.11.0",
33 |     "html-minifier": "^3.0.2",
34 |     "koa-convert": "^1.2.0",
35 |     "koa-static-plus": "^0.1.1",
36 |     "koa-views": "^5.0.2",
37 |     "mocha": "^2.3.4",
38 |     "nodemon": "^1.8.1",
39 |     "should": "^8.2.0",
40 |     "supertest": "^1.1.0",
41 |     "webpack": "^1.13.2"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/aaa.html:
--------------------------------------------------------------------------------
1 | <div :controller="test" :attr="{title:@aaa}" :click="@fn">
2 |     <div class="aaa" ms-class="@aaa">ddd</div>
3 |     <ul>
4 |         <li ms-for="el in @arr" data-for-rendered="@fn">{{el}}</li>
5 |     </ul>
6 |     {{@aaa}}
7 | 
8 | </div>


--------------------------------------------------------------------------------
/src/vm.js:
--------------------------------------------------------------------------------
 1 | var vm = avalon.define({
 2 |     $id: 'test',
 3 |     aaa: '司徒正美',
 4 |     arr: [1,2,3],
 5 |     fn: function(){
 6 |         avalon.log('aaa')
 7 |     }
 8 | })
 9 | 
10 | module.exports = vm


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var path = require('path');
 3 | 
 4 | module.exports = {
 5 |     entry: {
 6 |         vm: './src/vm'
 7 |     },
 8 |     output: {
 9 |         path: path.join( __dirname, 'dist'),
10 |         filename: '[name].js'
11 |     }, //页面引用的文件
12 |     
13 |  
14 |     resolve: {
15 |         extensions: ['.js', '', '.css']
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------