使用vue-template-compiler 替换parse5

Author: season

index.js

@@ -1,25 +1,9 @@
 var path = require('path');
 var chalk = require('chalk')
-var parse5 = require('parse5');
-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) {
-    var i = node.attrs.length;
-    var attr;
-    while (i--) {
-      attr = node.attrs[i];
-      if (attr.name === name) {
-        return attr.value;
-      }
-    }
-  }
-}
 
 // exports
 module.exports = function(content, file, conf) {
@@ -38,6 +22,15 @@ module.exports = function(content, file, conf) {
     runtimeOnly: false,
   }, conf);
 
+  // replace scoped flag
+  function replaceScopedFlag(str) {
+    var reg = new RegExp('([^a-zA-Z0-9\-_])('+ configs.cssScopedFlag +')([^a-zA-Z0-9\-_])', 'g');
+    str = str.replace(reg, function($0, $1, $2, $3) {
+      return $1 + vuecId + $3;
+    });
+    return str;
+  }
+
   // 兼容content为buffer的情况
   content = content.toString();
 
@@ -49,72 +42,13 @@ module.exports = function(content, file, conf) {
   }
   content = replaceScopedFlag(content);
 
-  // replace scoped flag
-  function replaceScopedFlag(str) {
-    var reg = new RegExp('([^a-zA-Z0-9\-_])('+ configs.cssScopedFlag +')([^a-zA-Z0-9\-_])', 'g');
-    str = str.replace(reg, function($0, $1, $2, $3) {
-      return $1 + vuecId + $3;
-    });
-    return str;
-  }
-
   // parse
-  fragment = parse5.parseFragment(content.toString(), {
-    locationInfo: true
-  });
-
-  output = {
-    template: [],
-    style: [],
-    script: []
-  };
-
-  fragment.childNodes.forEach(function(node) {
-    var type = node.tagName;
-    var lang = getAttribute(node, 'lang');
-    var src = getAttribute(node, 'src');
-    var warnings = null;
-    var content;
-
-    if (!output[type]) return;
-
-    if (type == 'style' && (!node.childNodes || !node.childNodes.length)) {
-      return;
-    }
-
-    if (!lang) {
-      if (type == 'script') lang = 'js';
-      if (type == 'style') lang = 'css';
-      if (type == 'template') lang = 'html';
-    }
-
-    if (type == 'template') {
-      content = parse5.serialize(node.content);
-    } else {
-      content = parse5.serialize(node);
-    }
-
-    content = deindent(content);
-    content = content.replace(/(^[\r\n]*)|([\r\n]*$)/g, '');
-
-    // node count check
-    if ((type === 'script' || type === 'template') && output[type].length > 0) {
-      throw new Error(
-        '[fis3-parser-vue-component] Only one <script> or <template> tag is ' +
-        'allowed inside a Vue component.'
-      )
-    } else {
-      output[type].push({
-        content: content,
-        lang: lang
-      });
-    }
-  });
+  var output = compiler.parseComponent(content.toString(), { pad: true });
 
   // script
-  if (output['script'].length) {
-    scriptStr = output['script'][0].content;
-    jsLang = output['script'][0].lang;
+  if (output.script) {
+    scriptStr = output.script.content;
+    jsLang = output.script.lang || 'js';
   } else {
     scriptStr += 'module.exports = {}';
     jsLang = 'js';
@@ -129,9 +63,9 @@ module.exports = function(content, file, conf) {
       return transpile('function render () {' + code + '}')
     }
 
-    if (output['template'].length) {
-      templateContent = fis.compile.partial(output['template'][0].content, file, {
-        ext: output['template'][0].lang,
+    if (output.template) {
+      templateContent = fis.compile.partial(output.template.content, file, {
+        ext: output.template.lang || 'html',
         isHtmlLike: true
       });
 
@@ -158,16 +92,12 @@ module.exports = function(content, file, conf) {
     scriptStr += '\n})(' + renderFun + ',' + staticRenderFns + ');\n';
   } else {
     // template
-    if (output['template'].length) {
-      templateContent = fis.compile.partial(output['template'][0].content, file, {
-        ext: output['template'][0].lang,
+    if (output.template) {
+      templateContent = fis.compile.partial(output.template.content, file, {
+        ext: output.template.lang || 'html',
         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';
@@ -188,11 +118,11 @@ module.exports = function(content, file, conf) {
   });
 
   // style
-  output['style'].forEach(function(item, index) {
+  output['styles'].forEach(function(item, index) {
     if (item.content) {
       var styleFileName, styleFile, styleContent;
 
-      if (output['style'].length == 1) {
+      if (output['styles'].length == 1) {
         styleFileName = file.realpathNoExt + configs.styleNameJoin + '.css';
       } else {
         styleFileName = file.realpathNoExt + configs.styleNameJoin + '-' + index + '.css';
@@ -202,7 +132,7 @@ module.exports = function(content, file, conf) {
 
       // css也采用片段编译，更好的支持less、sass等其他语言
       styleContent = fis.compile.partial(item.content, file, {
-        ext: item.lang,
+        ext: item.lang || 'css',
         isCssLike: true
       });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fis3-parser-vue-component",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "A parser plugin for fis3 to parser vue component.",
   "keywords": [
     "fis3",
@@ -12,13 +12,10 @@
   "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"
+    "vue-template-es2015-compiler": "^1.4.0"
   },
   "devDependencies": {},
   "scripts": {

test2/src/component/a.vue

@@ -1,10 +1,10 @@
-<template>
+<template lang="html">
   <div class="component-a" __vuec__>
     Component A
   </div>
 </template>
 
-<script>
+<script lang="js">
   module.exports = {
     created() {
       console.log('component a created !');

test2/src/component/index.vue

@@ -29,13 +29,15 @@ $blue : #1875e7;　
     <component-b></component-b>
     <component-c></component-c>
     <component-jade></component-jade>
+    <test-bug></test-bug>
   </div>
 </template>
 
 <script>
   import ComponentA from './a';
   import ComponentB from './b';
   import ComponentJade from './jade';
+  import TestBug from './test-bug';
 
   // @require '../less/other2.less';
 
@@ -44,6 +46,7 @@ $blue : #1875e7;　
       ComponentA,
       ComponentB,
       ComponentJade,
+      TestBug,
       ComponentC: require('./c')
     },
     created() {

test2/src/component/test-bug.vue

@@ -0,0 +1,19 @@
+<template>
+  <my-table>
+    <my-td></my-td>
+  </my-table>
+</template>
+
+<script>
+import MyTable from './test-table';
+import MyTd from './test-td';
+export default {
+  components: {
+    MyTable,
+    MyTd
+  }
+}
+</script>
+
+<style lang="css">
+</style>

test2/src/component/test-table.vue

@@ -0,0 +1,18 @@
+<template lang="html">
+  <table>
+    <thead>
+      <tr>
+        <slot></slot>
+      </tr>
+    </thead>
+  </table>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="css">
+</style>

test2/src/component/test-td.vue

@@ -0,0 +1,11 @@
+<template lang="html">
+  <td>ttttest-td</td>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="css">
+</style>