update docs

cenfun · Dec 3, 2023 · 4f5c8db · 4f5c8db
1 parent 1232c41
commit 4f5c8db
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -31,27 +31,39 @@ const results = await coverageReport.generate();
 ## Options
 - [lib/options.js](lib/options.js)
 
-## Compare Istanbul, V8 and V8 to Istanbul
+## Compare Reports
 | | Istanbul | V8 | V8 to Istanbul |
 | :--------------| :------ | :------ | :----------------------  |
-| Input data format | Istanbul (Object) | V8 (Array) | V8 (Array) |
+| Input | Istanbul (Object) | V8 (Array) | V8 (Array) |
 | Output | [Istanbul HTML report](https://cenfun.github.io/monocart-coverage-reports/istanbul) | [V8 HTML report](https://cenfun.github.io/monocart-coverage-reports/v8)  | [Istanbul HTML report](https://cenfun.github.io/monocart-coverage-reports/v8-to-istanbul) |
 | Indicators | Covered Lines, Branches, Statements and Functions, Execution Counts | Covered Bytes, Lines❔, Execution Counts | Covered Lines, Branches❔, Statements and Functions, Execution Counts |
-| Source code without [instrumentation](https://github.com/istanbuljs/babel-plugin-istanbul) | ❌ | ✅ | ✅ |
 | CSS coverage | ❌ | ✅ | ✅ |
 | Minified code | N/A | ✅ | ❌ |
 | Code formatting | N/A | ✅ | ❌ |
 
 ❔ - Partial or conditional support
 
-## Links
+## Compare Workflows
+- Istanbul Workflows
+    - 1, Only for source code: instrumenting code with [babel-plugin-istanbul](https://github.com/istanbuljs/babel-plugin-istanbul)，see [webpack.config-istanbul.js](mock/webpack.config-istanbul.js), or using [nyc](https://github.com/istanbuljs/nyc).
+    - 2, Collecting coverage data from browser `window.__coverage__`, see [example](tests/test-istanbul.js).
+    - 3, Generating coverage report.
 
+- V8 Workflows
+    - 1, For any runtime code: nothing to do. For source code: building code with `development` mode and sourcemap support, see [webpack.config-v8.js](mock/webpack.config-v8.js).
+    - 2, Collecting coverage data with [Chromium Coverage API](#chromium-coverage-api), see [example](tests/test-v8.js).
+    - 3, Generating coverage report.
+
+## Chromium Coverage API
 - [V8 coverage report](https://v8.dev/blog/javascript-code-coverage) - Native support for JavaScript code coverage to V8. (Chromium only)
-    - [Puppeteer Coverage Class](https://pptr.dev/api/puppeteer.coverage)
-    - [Playwright Coverage Class](https://playwright.dev/docs/api/class-coverage)
-    - [DevTools Protocol for Coverage](https://chromedevtools.github.io/devtools-protocol/tot/Profiler/#method-startPreciseCoverage)
+- [Puppeteer Coverage Class](https://pptr.dev/api/puppeteer.coverage)
+- [Playwright Coverage Class](https://playwright.dev/docs/api/class-coverage)
+- [DevTools Protocol for Coverage](https://chromedevtools.github.io/devtools-protocol/tot/Profiler/#method-startPreciseCoverage)
+
+
+## Istanbul Coverage
 - [Istanbul coverage report](https://istanbul.js.org/) - Instrumenting source codes and generating coverage reports
-    - [babel-plugin-istanbul](https://github.com/istanbuljs/babel-plugin-istanbul)
-    - [istanbul-reports](https://github.com/istanbuljs/istanbuljs/tree/master/packages/istanbul-reports/lib)
-    - [Code Coverage Introduction](https://docs.cypress.io/guides/tooling/code-coverage)
+- [babel-plugin-istanbul](https://github.com/istanbuljs/babel-plugin-istanbul)
+- [istanbul-reports](https://github.com/istanbuljs/istanbuljs/tree/master/packages/istanbul-reports/lib)
+- [Code Coverage Introduction](https://docs.cypress.io/guides/tooling/code-coverage)
 
diff --git a/docs/index.html b/docs/index.html
@@ -45,7 +45,7 @@ <h2>Options</h2>
 <ul>
 <li><a target="_blank" href="lib/options.js">lib/options.js</a></li>
 </ul>
-<h2>Compare Istanbul, V8 and V8 to Istanbul</h2>
+<h2>Compare Reports</h2>
 <table>
 <thead>
 <tr>
@@ -56,7 +56,7 @@ <h2>Compare Istanbul, V8 and V8 to Istanbul</h2>
 </tr>
 </thead>
 <tbody><tr>
-<td align="left">Input data format</td>
+<td align="left">Input</td>
 <td align="left">Istanbul (Object)</td>
 <td align="left">V8 (Array)</td>
 <td align="left">V8 (Array)</td>
@@ -74,12 +74,6 @@ <h2>Compare Istanbul, V8 and V8 to Istanbul</h2>
 <td align="left">Covered Lines, Branches❔, Statements and Functions, Execution Counts</td>
 </tr>
 <tr>
-<td align="left">Source code without <a target="_blank" href="https://github.com/istanbuljs/babel-plugin-istanbul">instrumentation</a></td>
-<td align="left">❌</td>
-<td align="left">✅</td>
-<td align="left">✅</td>
-</tr>
-<tr>
 <td align="left">CSS coverage</td>
 <td align="left">❌</td>
 <td align="left">✅</td>
@@ -99,21 +93,37 @@ <h2>Compare Istanbul, V8 and V8 to Istanbul</h2>
 </tr>
 </tbody></table>
 <p>❔ - Partial or conditional support</p>
-<h2>Links</h2>
+<h2>Compare Workflows</h2>
+<ul>
+<li><p>Istanbul Workflows</p>
+<ul>
+<li>1, Only for source code: instrumenting code with <a target="_blank" href="https://github.com/istanbuljs/babel-plugin-istanbul">babel-plugin-istanbul</a>，see <a target="_blank" href="mock/webpack.config-istanbul.js">webpack.config-istanbul.js</a>, or using <a target="_blank" href="https://github.com/istanbuljs/nyc">nyc</a>.</li>
+<li>2, Collecting coverage data from browser <code>window.__coverage__</code>, see <a target="_blank" href="tests/test-istanbul.js">example</a>.</li>
+<li>3, Generating coverage report.</li>
+</ul>
+</li>
+<li><p>V8 Workflows</p>
 <ul>
-<li><a target="_blank" href="https://v8.dev/blog/javascript-code-coverage">V8 coverage report</a> - Native support for JavaScript code coverage to V8. (Chromium only)<ul>
+<li>1, For any runtime code: nothing to do. For source code: building code with <code>development</code> mode and sourcemap support, see <a target="_blank" href="mock/webpack.config-v8.js">webpack.config-v8.js</a>.</li>
+<li>2, Collecting coverage data with <a target="_blank" href="#chromium-coverage-api">Chromium Coverage API</a>, see <a target="_blank" href="tests/test-v8.js">example</a>.</li>
+<li>3, Generating coverage report.</li>
+</ul>
+</li>
+</ul>
+<h2>Chromium Coverage API</h2>
+<ul>
+<li><a target="_blank" href="https://v8.dev/blog/javascript-code-coverage">V8 coverage report</a> - Native support for JavaScript code coverage to V8. (Chromium only)</li>
 <li><a target="_blank" href="https://pptr.dev/api/puppeteer.coverage">Puppeteer Coverage Class</a></li>
 <li><a target="_blank" href="https://playwright.dev/docs/api/class-coverage">Playwright Coverage Class</a></li>
 <li><a target="_blank" href="https://chromedevtools.github.io/devtools-protocol/tot/Profiler/#method-startPreciseCoverage">DevTools Protocol for Coverage</a></li>
 </ul>
-</li>
-<li><a target="_blank" href="https://istanbul.js.org/">Istanbul coverage report</a> - Instrumenting source codes and generating coverage reports<ul>
+<h2>Istanbul Coverage</h2>
+<ul>
+<li><a target="_blank" href="https://istanbul.js.org/">Istanbul coverage report</a> - Instrumenting source codes and generating coverage reports</li>
 <li><a target="_blank" href="https://github.com/istanbuljs/babel-plugin-istanbul">babel-plugin-istanbul</a></li>
 <li><a target="_blank" href="https://github.com/istanbuljs/istanbuljs/tree/master/packages/istanbul-reports/lib">istanbul-reports</a></li>
 <li><a target="_blank" href="https://docs.cypress.io/guides/tooling/code-coverage">Code Coverage Introduction</a></li>
 </ul>
-</li>
-</ul>
 
 </div>
 </body>