feat： 0.0.4版本新增IS_HTML_CSS参数控制vue的html和css结构是否可见

README.md

@@ -20,14 +20,18 @@ http://www.npmdoc.org/istanbulzhongwenwendangzhongwenshili.html
 | parameter                | explain                                                         | type     | An optional value                                                       | default   |
 | ------------------- | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | -------- |
 |  changeLists | Displays an array of delta codes | Array | [] | null |
+|  IS_HTML_CSS | Whether to display html and css structures | Boolean | true/false | false |
 
 For the delta code to display the array, you need to add an array of changeLists to the window.__coverage__ object, such as [3,4] for the third, third and fourth lines of the delta code
+vue transmits IS_HTML_CSS to control whether to display css and html code, while other frameworks can directly see html and css structures without transmission
 ### 增加参数说明
 | 参数                | 说明                                                         | 类型     | 可选值                                                       | 默认值   |
 | ------------------- | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | -------- |
 |  changeLists | 显示增量代码数组 | Array | [] | null |
+|  IS_HTML_CSS | 是否显示html、css结构 | Boolean | true/false | false |
 
 增量代码显示数组，需向window.__coverage__对象中增加changeLists数组，如[3,4]为增量代码行数第三3和第4行
+是否显示css和html代码，vue下传输IS_HTML_CSS进行控制，其他框架则无需传输可直接看到html、css结构
 
 ### other description
 This plugin needs to be used with [babel-plugin-istanbul-ry](https://www.npmjs.com/package/babel-plugin-istanbul-ry) and [istanbul-middleware-ry](https://www.npmjs.com/package/istanbul-middleware-ry)

lib/report/html.js

@@ -133,19 +133,27 @@ handlebars.registerHelper('show_lines', function (opts) {
 handlebars.registerHelper('show_line_execution_counts', function (context, opts) {
     var lines = context.l,
         changeLists =  context.changeList ? context.changeList : [],
+        startIndex = context.startIndex ? context.startIndex : 0,
         maxLines = Number(opts.fn(this)),
         i,
         lineNumber,
         array = [],
         covered,
-        value = '';
-
+        value = '',
+        newList = []
+    if (Array.isArray(changeLists)) {
+        for (var i = 0; i < changeLists.length; i++) {
+            if (changeLists[i] - startIndex >= 0) {
+                newList.push(changeLists[i] - startIndex) 
+            }
+        }
+    }
     for (i = 0; i < maxLines; i += 1) {
         var label = '';
         lineNumber = i + 1;
         value = '&nbsp;';
         covered = 'neutral';
-        if (Array.isArray(changeLists) && changeLists.includes(lineNumber)) {
+        if (newList.includes(lineNumber)) {
             label = '<span class="neutral-new" style="color: #57a3f3;">新增或变更语句</span> &nbsp;'
         }
         if (lines.hasOwnProperty(lineNumber)) {
@@ -365,6 +373,27 @@ function HtmlReport(opts) {
     this.opts.templateData = { datetime: Date() };
     this.opts.watermarks = this.opts.watermarks || defaults.watermarks();
 }
+// html去除
+function jsChange({code, isHtmlVue, IS_HTML_CSS = true}) {
+    var scriptStart = '<script>',
+    scriptEnd = '</script>',
+    startIndex = 0,
+    endIndex = 0
+    if (isHtmlVue && !IS_HTML_CSS) {
+        for (var i = 0; i < code.length; i++) {
+            if (code[i].indexOf(scriptStart) > -1) {
+                startIndex = i
+            }
+            if (code[i].indexOf(scriptEnd) > -1) {
+                endIndex = i + 1
+            }
+        }
+        if (startIndex && endIndex) {
+            code = code.slice(startIndex, endIndex)
+        }
+    }
+    return { code, startIndex}
+}
 
 HtmlReport.TYPE = 'html';
 util.inherits(HtmlReport, Report);
@@ -384,7 +413,6 @@ Report.mix(HtmlReport, {
             nodePath.push(parent);
             parent = parent.parent;
         }
-
         for (i = 0; i < nodePath.length; i += 1) {
             linkPath.push('<a href="' + linkMapper.ancestor(node, i + 1) + '">' +
                 (cleanPath(nodePath[i].relativeName) || 'all files') + '</a>');
@@ -416,16 +444,25 @@ Report.mix(HtmlReport, {
         };
     },
     writeDetailPage: function (writer, node, fileCoverage) {
+        var reqs = writer.socket._httpMessage.req,
+            reqsUrl = reqs.originalUrl || reqs.url,
+            vue = '.vue',
+            html = '.html',
+            isHtmlVue = reqsUrl.indexOf(vue) > -1 || reqsUrl.indexOf(html) > -1
         var opts = this.opts,
             sourceStore = opts.sourceStore,
             templateData = opts.templateData,
             sourceText = fileCoverage.code && Array.isArray(fileCoverage.code) ?
                 fileCoverage.code.join('\n') + '\n' : sourceStore.get(fileCoverage.path),
-            code = sourceText.split(/(?:\r?\n)|\r/),
-            count = 0,
-            structured = code.map(function (str) { count += 1; return { line: count, covered: null, text: new InsertionText(str, true) }; }),
+            IS_HTML_CSS = fileCoverage.IS_HTML_CSS !== undefined || fileCoverage.IS_HTML_CSS !== null ? fileCoverage.IS_HTML_CSS : true,
+            {code, startIndex = 0} = jsChange({code: sourceText.split(/(?:\r?\n)|\r/), isHtmlVue, IS_HTML_CSS}),
+            count = 0
+        console.log(IS_HTML_CSS, 'IS_HTML_CSS')
+        fileCoverage.startIndex = startIndex
+        var structured = code.map(function (str) { count += 1; return { line: count, covered: null, text: new InsertionText(str, true) }; }),
             context;
-
+            // code, 'code' // 页面结构在structured之前删除html和css结构
+            // structured, 'structured' 行数注入
         structured.unshift({ line: 0, covered: null, text: new InsertionText("") });
 
         this.fillTemplate(node, templateData);
@@ -433,7 +470,6 @@ Report.mix(HtmlReport, {
         var headerTemplatePush= headerTemplates.replace('</style>', '</style><style>' + prettifyCss + baseCss + '</style>')
         writer.write(headerTemplatePush);
         writer.write('<pre><table class="coverage">\n');
-
         annotateLines(fileCoverage, structured);
         //note: order is important, since statements typically result in spanning the whole line and doing branches late
         //causes mismatched tags
@@ -569,7 +605,6 @@ Report.mix(HtmlReport, {
                     }
                 });
             };
-
         collector.files().forEach(function (key) {
             summarizer.addFileCoverageSummary(key, utils.summarizeFileCoverage(collector.fileCoverageFor(key)));
         });

package.json

 {
   "name": "ry-istanbul-web",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Yet another JS code coverage tool that computes statement, line, function and branch coverage with module loader hooks to transparently add coverage when running tests. Supports all JS coverage use cases including unit tests, server side functional tests and browser tests. Built for scale",
   "keywords": [
     "coverage",