feat: add coverage chunks per stylesheet

Author: bartveneman

src/index.test.ts

@@ -195,6 +195,64 @@ test.describe('from coverage data downloaded directly from the browser as JSON',
 			]),
 		)
 	})
+
+	test('calculates chunks', () => {
+		let result = calculate_coverage(coverage, html_parser)
+		expect(result.coverage_per_stylesheet.at(0)?.chunks).toEqual([
+			{ start_line: 1, is_covered: true, end_line: 4, total_lines: 4 },
+			{ start_line: 4, is_covered: false, end_line: 8, total_lines: 5 },
+			{ start_line: 8, is_covered: true, end_line: 10, total_lines: 3 },
+			{ start_line: 10, is_covered: false, end_line: 11, total_lines: 2 },
+			{ start_line: 11, is_covered: true, end_line: 14, total_lines: 4 },
+		])
+	})
+
+	test('calculates chunks for fully covered file', () => {
+		let result = calculate_coverage(
+			[
+				{
+					url: 'https://example.com',
+					ranges: [
+						{
+							start: 0,
+							end: 19,
+						},
+					],
+					text: 'h1 { color: blue; }',
+				},
+			],
+			html_parser,
+		)
+		expect(result.coverage_per_stylesheet.at(0)?.chunks).toEqual([
+			{
+				start_line: 1,
+				is_covered: true,
+				end_line: 3,
+				total_lines: 3,
+			},
+		])
+	})
+
+	test('calculates chunks for fully uncovered file', () => {
+		let result = calculate_coverage(
+			[
+				{
+					url: 'https://example.com',
+					ranges: [],
+					text: 'h1 { color: blue; }',
+				},
+			],
+			html_parser,
+		)
+		expect(result.coverage_per_stylesheet.at(0)?.chunks).toEqual([
+			{
+				start_line: 1,
+				is_covered: false,
+				end_line: 3,
+				total_lines: 3,
+			},
+		])
+	})
 })
 
 test('handles empty input', () => {

src/index.ts

@@ -20,6 +20,12 @@ export type StylesheetCoverage = CoverageData & {
 	text: string
 	ranges: Range[]
 	line_coverage: Uint8Array
+	chunks: {
+		is_covered: boolean
+		start_line: number
+		end_line: number
+		total_lines: number
+	}[]
 }
 
 export type CoverageResult = CoverageData & {
@@ -117,6 +123,36 @@ export function calculate_coverage(coverage: Coverage[], parse_html?: Parser): C
 			offset = next_offset
 		}
 
+		// Create "chunks" of covered/uncovered lines for easier rendering later on
+		let chunks = [
+			{
+				start_line: 1,
+				is_covered: line_coverage[0] === 1,
+				end_line: 0,
+				total_lines: 0,
+			},
+		]
+
+		for (let index = 0; index < line_coverage.length; index++) {
+			let is_covered = line_coverage[index]
+			if (index > 0 && is_covered !== line_coverage[index - 1]) {
+				let last_chunk = chunks.at(-1)!
+				last_chunk.end_line = index
+				last_chunk.total_lines = index - last_chunk.start_line + 1
+
+				chunks.push({
+					start_line: index,
+					is_covered: is_covered === 1,
+					end_line: index,
+					total_lines: 0,
+				})
+			}
+		}
+
+		let last_chunk = chunks.at(-1)!
+		last_chunk.total_lines = line_coverage.length - last_chunk.start_line + 1
+		last_chunk.end_line = line_coverage.length
+
 		return {
 			url,
 			text,
@@ -130,7 +166,7 @@ export function calculate_coverage(coverage: Coverage[], parse_html?: Parser): C
 			total_lines: total_file_lines,
 			covered_lines: file_lines_covered,
 			uncovered_lines: total_file_lines - file_lines_covered,
-			// TODO: { is_covered: boolean, start_offset: number, start_line: number, end_offset: number, end_line: number }[]
+			chunks,
 		}
 	})