support rumtimeOnly for vue2

Author: season

README.md

@@ -126,13 +126,16 @@ fis.match('src/**.vue', {
     cssScopedIdPrefix: '_v-',   // hash前缀：_v-23j232jj
     cssScopedHashType: 'sum',   // hash生成模式，num：使用`hash-sum`, md5: 使用`fis.util.md5`
     cssScopedHashLength: 8,     // hash 长度，cssScopedHashType为md5时有效
-    styleNameJoin: ''           // 样式文件命名连接符 `component-a.css`
+    styleNameJoin: '',          // 样式文件命名连接符 `component-a.css`
+    runtimeOnly: true,          // vue@2.x 有润timeOnly模式，为ture时，template会在构建时转为render方法
   })
 });
 ```
 
 ## 测试demo
 
+> test 对应vue1， test2对应vue2
+
 `npm install`
 
 `cd test`, 编写代码…
@@ -196,6 +199,3 @@ fis.match('src/**.vue:jsx', {
   ]
 })
 ```
-
-
-

index.js

@@ -1,9 +1,12 @@
 var path = require('path');
+var chalk = require('chalk')
 var parse5 = require('parse5');
-var validateTemplate = require('vue-template-validator');
 var deindent = require('de-indent');
 var objectAssign = require('object-assign');
 var hashSum = require('hash-sum');
+var compiler = require('vue-template-compiler');
+var transpile = require('vue-template-es2015-compiler');
+var validateTemplate = require('vue-template-validator');
 
 function getAttribute(node, name) {
   if (node.attrs) {
@@ -30,7 +33,9 @@ module.exports = function(content, file, conf) {
     cssScopedIdPrefix: '_v-',
     cssScopedHashType: 'sum',
     cssScopedHashLength: 8,
-    styleNameJoin: ''
+    styleNameJoin: '',
+
+    runtimeOnly: false,
   }, conf);
 
   // 兼容content为buffer的情况
@@ -116,23 +121,61 @@ module.exports = function(content, file, conf) {
   }
 
   // template
-  if (output['template'].length) {
-    templateContent = fis.compile.partial(output['template'][0].content, file, {
-      ext: output['template'][0].lang,
-      isHtmlLike: true
-    });
+  if (configs.runtimeOnly) {
+    // runtimeOnly
+
+    function toFunction (code) {
+      // console.log(code);
+      return transpile('function render () {' + code + '}')
+    }
+
+    if (output['template'].length) {
+      templateContent = fis.compile.partial(output['template'][0].content, file, {
+        ext: output['template'][0].lang,
+        isHtmlLike: true
+      });
+
+      var compiled = compiler.compile(templateContent);
+      var renderFun, staticRenderFns;
 
-    validateTemplate(output['template'][0].content).forEach(function(msg) {
-      console.log(msg)
-    })
+      if (compiled.errors.length) {
+        compiled.errors.forEach(function (err) {
+          console.error('\n' + chalk.red(err) + '\n')
+        });
+        throw new Error('Vue template compilation failed');
+      } else {
+        renderFun = toFunction(compiled.render);
+        staticRenderFns = '[' + compiled.staticRenderFns.map(toFunction).join(',') + ']';
+      }
+    } else {
+      renderFun = 'function(){}';
+      staticRenderFns = '[]';
+    }
 
-    scriptStr += '\n;\n(function(template){\n'
-    scriptStr += '\nmodule && module.exports && (module.exports.template = template);\n';
-    scriptStr += '\nexports && exports.default && (exports.default.template = template);\n';
-    scriptStr += '\n})(' + JSON.stringify(templateContent) + ');\n';
+    scriptStr += '\n;\n(function(renderFun, staticRenderFns){\n'
+    scriptStr += '\nif(module && module.exports){ module.exports.render=renderFun; module.exports.staticRenderFns=staticRenderFns;}\n';
+    scriptStr += '\nif(exports && exports.default){ exports.default.render=renderFun; exports.default.staticRenderFns=staticRenderFns;}\n';
+    scriptStr += '\n})(' + renderFun + ',' + staticRenderFns + ');\n';
   } else {
-    scriptStr += '\nmodule && module.exports && (module.exports.template = "");\n';
-    scriptStr += '\nexports && exports.default && (exports.default.template = "");\n';
+    // template
+    if (output['template'].length) {
+      templateContent = fis.compile.partial(output['template'][0].content, file, {
+        ext: output['template'][0].lang,
+        isHtmlLike: true
+      });
+
+      validateTemplate(output['template'][0].content).forEach(function(msg) {
+        console.log(msg);
+      })
+
+      scriptStr += '\n;\n(function(template){\n'
+      scriptStr += '\nmodule && module.exports && (module.exports.template = template);\n';
+      scriptStr += '\nexports && exports.default && (exports.default.template = template);\n';
+      scriptStr += '\n})(' + JSON.stringify(templateContent) + ');\n';
+    } else {
+      scriptStr += '\nmodule && module.exports && (module.exports.template = "");\n';
+      scriptStr += '\nexports && exports.default && (exports.default.template = "");\n';
+    }
   }
 
   // 部分内容以 js 的方式编译一次。如果要支持 es6 需要这么配置。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fis3-parser-vue-component",
-  "version": "4.0.3",
+  "version": "5.0.0",
   "description": "A parser plugin for fis3 to parser vue component.",
   "keywords": [
     "fis3",
@@ -11,10 +11,13 @@
   ],
   "main": "index.js",
   "dependencies": {
+    "chalk": "^1.1.3",
     "de-indent": "^1.0.2",
     "hash-sum": "^1.0.2",
     "object-assign": "^4.1.0",
     "parse5": "^2.1.5",
+    "vue-template-compiler": "^2.1.6",
+    "vue-template-es2015-compiler": "^1.4.0",
     "vue-template-validator": "^1.1.5"
   },
   "devDependencies": {},

test/package.json

@@ -19,7 +19,7 @@
     "fis3-hook-commonjs": "^0.1.22",
     "fis3-hook-node_modules": "^2.2.3",
     "fis3-parser-less-2.x": "^0.1.4",
-    "fis3-parser-node-sass": "^0.1.9",
+    "fis-parser-node-sass": "^1.0.1",
     "fis3-parser-translate-es3ify": "0.0.2",
     "fis3-parser-vue-component": "^1.2.1",
     "fis3-postpackager-loader": "^1.5.2",

test2/fis-conf.js

@@ -0,0 +1,115 @@
+var path = require('path');
+var parserVuePlugin = require('../index');
+
+// 需要构建的文件
+fis.set('project.fileType.text', 'vue');
+fis.set('project.files', ['src/**']);
+fis.set('project.ignore', fis.get('project.ignore').concat(['output/**', 'DS_store']));
+
+// 模块化支持插件
+// https://github.com/fex-team/fis3-hook-commonjs (forwardDeclaration: true)
+fis.hook('commonjs', {
+  extList: [
+    '.js', '.coffee', '.es6', '.jsx', '.vue',
+  ],
+  umd2commonjs: true,
+  ignoreDependencies: [
+
+  ]
+});
+
+// 禁用components，启用node_modules
+fis.unhook('components');
+fis.hook('node_modules');
+
+// 所有js文件
+fis.match('**.js', {
+  isMod: true,
+  rExt: 'js',
+  useSameNameRequire: true
+});
+
+// 编译vue组件
+fis.match('src/**.vue', {
+  isMod: true,
+  rExt: 'js',
+  useSameNameRequire: true,
+  parser: function(content, file, conf) {
+    conf.runtimeOnly = true;
+    return parserVuePlugin(content, file, conf);
+  },
+});
+
+fis.match('src/**.vue:js', {
+  parser: [
+    fis.plugin('babel-6.x', {
+      presets: ['es2015-without-strict', 'react', 'stage-3'],
+    }),
+    fis.plugin('translate-es3ify', null, 'append')
+  ]
+})
+
+fis.match('src/**.vue:jade', {
+  parser: [
+    fis.plugin('jade', {
+      //
+    })
+  ]
+})
+
+fis.match('src/{**.vue:less,**.less}', {
+  rExt: 'css',
+  parser: [fis.plugin('less-2.x')],
+  postprocessor: fis.plugin('autoprefixer')
+});
+
+fis.match('src/{**.vue:scss,**.scss}', {
+  rExt: 'css',
+  parser: [fis.plugin('node-sass')],
+  postprocessor: fis.plugin('autoprefixer'),
+});
+
+// 发布
+fis.match('/src/(**)', {
+  release: '$1'
+});
+
+//
+fis.match('src/(component/**.css)', {
+  release: 'static/$1'
+});
+
+// 模块文件
+fis.match('/src/**.js', {
+  parser: [
+    fis.plugin('babel-6.x', {
+      presets: ['es2015-loose', 'react', 'stage-3']
+    }),
+    fis.plugin('translate-es3ify', null, 'append')
+  ]
+});
+
+// 非模块文件
+fis.match('/src/js/engine/**.js', {
+  parser: null,
+  isMod: false
+});
+
+// 页面直接引入的文件，不进行模块require包装
+fis.match('/src/js/page/**.js', {
+  isMod: false
+});
+
+// 打包
+fis.match('::package', {
+  postpackager: fis.plugin('loader'),
+});
+
+// 部署
+fis
+  .media('local')
+  .match('**', {
+    deploy: fis.plugin('local-deliver', {
+      to: path.join(__dirname, './output/')
+    })
+  });

test2/output/component/a.js

@@ -0,0 +1,21 @@
+define('src/component/a.vue', function(require, exports, module) {
+
+  module.exports = {
+    created: function created() {
+      console.log('component a created !');
+    },
+  
+    methods: {
+      //
+    }
+  };
+  (function (renderFun, staticRenderFns) {
+  
+    module && module.exports && ((module.exports.render = renderFun) || (module.exports.staticRenderFns = staticRenderFns));
+  
+    exports && exports["default"] && ((exports["default"].render = renderFun) || (exports["default"].staticRenderFns = staticRenderFns));
+  })(function render() {
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._c;return _c('div', { staticClass: "component-a", attrs: { "_v-16c48809": "" } }, [_vm._v("\n  Component A\n")]);
+  }, []);
+
+});

test2/output/component/b.js

@@ -0,0 +1,23 @@
+define('src/component/b.vue', function(require, exports, module) {
+
+  module.exports = {
+    created: function created() {
+      console.log('component b created !');
+    },
+  
+    methods: {
+      hello: function hello() {
+        alert('hello!');
+      }
+    }
+  };
+  (function (renderFun, staticRenderFns) {
+  
+    module && module.exports && ((module.exports.render = renderFun) || (module.exports.staticRenderFns = staticRenderFns));
+  
+    exports && exports["default"] && ((exports["default"].render = renderFun) || (exports["default"].staticRenderFns = staticRenderFns));
+  })(function render() {
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._c;return _c('div', { staticClass: "component-b" }, [_vm._v("\n  Component B "), _c('a', { attrs: { "href": "javascript:;" }, on: { "click": _vm.hello } }, [_vm._v("Click Me")])]);
+  }, []);
+
+});

test2/output/component/c.js

@@ -0,0 +1,25 @@
+define('src/component/c.vue', function(require, exports, module) {
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports["default"] = {
+    created: function created() {
+      console.log('component c created !');
+    },
+  
+    methods: {
+      //
+    }
+  };
+  
+  (function (renderFun, staticRenderFns) {
+  
+    module && module.exports && ((module.exports.render = renderFun) || (module.exports.staticRenderFns = staticRenderFns));
+  
+    exports && exports["default"] && ((exports["default"].render = renderFun) || (exports["default"].staticRenderFns = staticRenderFns));
+  })(function render() {
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._c;return _c('div', { staticClass: "component-c" }, [_vm._v("\n  Component C\n\n")]);
+  }, []);
+
+});

test2/output/component/index.js

@@ -0,0 +1,48 @@
+define('src/component/index.vue', function(require, exports, module) {
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  
+  var _a = require('src/component/a.vue');
+  
+  var _a2 = _interopRequireDefault(_a);
+  
+  var _b = require('src/component/b.vue');
+  
+  var _b2 = _interopRequireDefault(_b);
+  
+  var _jade = require('src/component/jade.vue');
+  
+  var _jade2 = _interopRequireDefault(_jade);
+  
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+  
+  // @require 'src/less/other2.less';
+  
+  exports["default"] = {
+    components: {
+      ComponentA: _a2["default"],
+      ComponentB: _b2["default"],
+      ComponentJade: _jade2["default"],
+      ComponentC: require('src/component/c.vue')
+    },
+    created: function created() {
+      console.log('Index page created!');
+    },
+  
+    methods: {
+      //
+    }
+  };
+  
+  (function (renderFun, staticRenderFns) {
+  
+    module && module.exports && ((module.exports.render = renderFun) || (module.exports.staticRenderFns = staticRenderFns));
+  
+    exports && exports["default"] && ((exports["default"].render = renderFun) || (exports["default"].staticRenderFns = staticRenderFns));
+  })(function render() {
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._c;return _c('div', { staticClass: "index _v-4ddb37f2" }, [_c('p', [_vm._v("fis3-parser-vue-component demo runing ~")]), _vm._v(" "), _c('component-a'), _vm._v(" "), _c('component-b'), _vm._v(" "), _c('component-c'), _vm._v(" "), _c('component-jade')]);
+  }, []);
+
+});