Skip to content

Commit 755d1c3

Browse files
committed
update readme to reflect that parse_html is no longer needed
1 parent 284fc11 commit 755d1c3

File tree

1 file changed

+25
-48
lines changed

1 file changed

+25
-48
lines changed

README.md

Lines changed: 25 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,13 @@ npm install @projectwallace/css-code-coverage
2323
```ts
2424
import { calculate_coverage } from '@projectwallace/css-code-coverage'
2525

26-
function parse_html(html) {
27-
return new DOMParser().parseFromString(html, 'text/html')
28-
}
26+
let report = await calculcate_coverage(coverage_data)
2927

30-
let report = calculcate_coverage(coverage_data, parse_html)
28+
// => report.line_coverage_ratio: 0.80
29+
// => report.byte_coverage_ratio: 0.85
30+
// => report.total_lines: 1000
31+
// => report.covered_lines: 800
32+
// etc.
3133
```
3234

3335
See [src/index.ts](https://github.com/projectwallace/css-code-coverage/blob/main/src/index.ts) for the data that's returned.
@@ -36,12 +38,30 @@ See [src/index.ts](https://github.com/projectwallace/css-code-coverage/blob/main
3638

3739
There are two principal ways of collecting CSS Coverage data:
3840

41+
### Coverage API (preferred)
42+
43+
Both Puppeteer and Playwright provide an API to programmatically get the coverage data, allowing you to put that directly into this library. Here is the gist:
44+
45+
```ts
46+
// Start collecting coverage
47+
await page.coverage.startCSSCoverage()
48+
// Load the page, do all sorts of interactions to increase coverage, etc.
49+
await page.goto('http://example.com')
50+
// Stop the coverage and store the result in a variable to pass along
51+
let coverage = await page.coverage.stopCSSCoverage()
52+
53+
// Now we can process it
54+
import { calculate_coverage } from '@projectwallace/css-code-coverage'
55+
56+
let report = await calculcate_coverage(coverage)
57+
```
58+
3959
### Browser devtools
4060

4161
In Edge, Chrome or chromium you can manually collect coverage in the browser's DevTools. In all cases you'll generate coverage data manually and the browser will let you export the data to a JSON file. Note that this JSON contains both JS coverage as well as the CSS coverage. Learn how it works:
4262

4363
- Collect coverage in Microsoft Edge: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/coverage/
44-
- Collect coevrage in Google Chrome: https://developer.chrome.com/docs/devtools/coverage/
64+
- Collect coverage in Google Chrome: https://developer.chrome.com/docs/devtools/coverage/
4565

4666
Additionally, DevTools Tips writes about it in their [explainer](https://devtoolstips.org/tips/en/detect-unused-code/).
4767

@@ -67,46 +87,3 @@ for (let file of files) {
6787
coverage_data.push(...parse_coverage(json_content))
6888
}
6989
```
70-
71-
### Coverage API
72-
73-
Both Puppeteer and Playwright provide an API to programmatically get the coverage data, allowing you to put that directly into this library. Here is the gist:
74-
75-
```ts
76-
// Start collecting coverage
77-
await page.coverage.startCSSCoverage()
78-
// Load the page, do all sorts of interactions to increase coverage, etc.
79-
await page.goto('http://example.com')
80-
// Stop the coverage and store the result in a variable to pass along
81-
let coverage = await page.coverage.stopCSSCoverage()
82-
83-
// Now we can process it
84-
import { calculate_coverage } from '@projectwallace/css-code-coverage'
85-
86-
function parse_html(html) {
87-
return new DOMParser().parseFromString(html, 'text/html')
88-
}
89-
90-
let report = calculcate_coverage(coverage, parse_html)
91-
```
92-
93-
### Optional: coverage from `<style>` blocks
94-
95-
Coverage generators also create coverage ranges for `<style>` blocks in HTML. If this applies to your code you should provide a HTML parser that we use to 'scrape' the HTML in case the browser gives us not just plain CSS contents. Depending on where you run this analysis you can use:
96-
97-
1. Browser:
98-
```ts
99-
function parse_html(html) {
100-
return new DOMParser().parseFromString(html, 'text/html')
101-
}
102-
```
103-
1. Node (using [linkedom](https://github.com/WebReflection/linkedom) in this example, but other parsers could work, too):
104-
105-
```ts
106-
// $ npm install linkedom
107-
import { DOMParser } from 'linkedom'
108-
109-
function parse_html(html: string) {
110-
return new DOMParser().parseFromString(html, 'text/html')
111-
}
112-
```

0 commit comments

Comments
 (0)