@canyonjs/report-component 0.0.1-beta.12 → 0.0.1-beta.16

package/dist/index.d.ts

@@ -10,12 +10,16 @@ interface FileDataResponse {
   fileContent: string;
   fileCodeChange: number[];
 }
+interface DataSourceItem {
+  path: string;
+  [key: string]: unknown;
+}
 interface CanyonReportProps {
   /** 报告名称 */
   name: string;
   /** 当前选中的文件 */
   value: string;
-  dataSource: any[];
+  dataSource: DataSourceItem[];
   onSelect: (val: string) => Promise<FileDataResponse>;
 }
 //#endregion

package/dist/index.js

@@ -2,565 +2,13 @@ import { ConfigProvider, Divider, Input, Progress, Segmented, Space, Spin, Switc
 import { Suspense, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { genSummaryTreeItem } from "canyon-data";
+import { renderToStaticMarkup } from "react-dom/server";
 import Highlighter from "react-highlight-words";
 import { FileOutlined, FolderFilled } from "@ant-design/icons";
 
-//#region rolldown:runtime
-var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-
-//#endregion
-//#region ../../node_modules/.pnpm/istanbul-lib-coverage@3.2.2/node_modules/istanbul-lib-coverage/lib/percent.js
-var require_percent = /* @__PURE__ */ __commonJSMin(((exports, module) => {
-	module.exports = function percent$2(covered, total) {
-		let tmp;
-		if (total > 0) {
-			tmp = 1e3 * 100 * covered / total;
-			return Math.floor(tmp / 10) / 100;
-		} else return 100;
-	};
-}));
-
-//#endregion
-//#region ../../node_modules/.pnpm/istanbul-lib-coverage@3.2.2/node_modules/istanbul-lib-coverage/lib/data-properties.js
-var require_data_properties = /* @__PURE__ */ __commonJSMin(((exports, module) => {
-	module.exports = function dataProperties$2(klass, properties) {
-		properties.forEach((p) => {
-			Object.defineProperty(klass.prototype, p, {
-				enumerable: true,
-				get() {
-					return this.data[p];
-				}
-			});
-		});
-	};
-}));
-
-//#endregion
-//#region ../../node_modules/.pnpm/istanbul-lib-coverage@3.2.2/node_modules/istanbul-lib-coverage/lib/coverage-summary.js
-var require_coverage_summary = /* @__PURE__ */ __commonJSMin(((exports, module) => {
-	const percent$1 = require_percent();
-	const dataProperties$1 = require_data_properties();
-	function blankSummary() {
-		const empty = () => ({
-			total: 0,
-			covered: 0,
-			skipped: 0,
-			pct: "Unknown"
-		});
-		return {
-			lines: empty(),
-			statements: empty(),
-			functions: empty(),
-			branches: empty(),
-			branchesTrue: empty()
-		};
-	}
-	function assertValidSummary(obj) {
-		if (!(obj && obj.lines && obj.statements && obj.functions && obj.branches)) throw new Error("Invalid summary coverage object, missing keys, found:" + Object.keys(obj).join(","));
-	}
-	/**
-	* CoverageSummary provides a summary of code coverage . It exposes 4 properties,
-	* `lines`, `statements`, `branches`, and `functions`. Each of these properties
-	* is an object that has 4 keys `total`, `covered`, `skipped` and `pct`.
-	* `pct` is a percentage number (0-100).
-	*/
-	var CoverageSummary$3 = class CoverageSummary$3 {
-		/**
-		* @constructor
-		* @param {Object|CoverageSummary} [obj=undefined] an optional data object or
-		* another coverage summary to initialize this object with.
-		*/
-		constructor(obj) {
-			if (!obj) this.data = blankSummary();
-			else if (obj instanceof CoverageSummary$3) this.data = obj.data;
-			else this.data = obj;
-			assertValidSummary(this.data);
-		}
-		/**
-		* merges a second summary coverage object into this one
-		* @param {CoverageSummary} obj - another coverage summary object
-		*/
-		merge(obj) {
-			[
-				"lines",
-				"statements",
-				"branches",
-				"functions",
-				"branchesTrue"
-			].forEach((key) => {
-				if (obj[key]) {
-					this[key].total += obj[key].total;
-					this[key].covered += obj[key].covered;
-					this[key].skipped += obj[key].skipped;
-					this[key].pct = percent$1(this[key].covered, this[key].total);
-				}
-			});
-			return this;
-		}
-		/**
-		* returns a POJO that is JSON serializable. May be used to get the raw
-		* summary object.
-		*/
-		toJSON() {
-			return this.data;
-		}
-		/**
-		* return true if summary has no lines of code
-		*/
-		isEmpty() {
-			return this.lines.total === 0;
-		}
-	};
-	dataProperties$1(CoverageSummary$3, [
-		"lines",
-		"statements",
-		"functions",
-		"branches",
-		"branchesTrue"
-	]);
-	module.exports = { CoverageSummary: CoverageSummary$3 };
-}));
-
-//#endregion
-//#region ../../node_modules/.pnpm/istanbul-lib-coverage@3.2.2/node_modules/istanbul-lib-coverage/lib/file-coverage.js
-var require_file_coverage = /* @__PURE__ */ __commonJSMin(((exports, module) => {
-	const percent = require_percent();
-	const dataProperties = require_data_properties();
-	const { CoverageSummary: CoverageSummary$2 } = require_coverage_summary();
-	function emptyCoverage(filePath, reportLogic) {
-		const cov = {
-			path: filePath,
-			statementMap: {},
-			fnMap: {},
-			branchMap: {},
-			s: {},
-			f: {},
-			b: {}
-		};
-		if (reportLogic) cov.bT = {};
-		return cov;
-	}
-	function assertValidObject(obj) {
-		if (!(obj && obj.path && obj.statementMap && obj.fnMap && obj.branchMap && obj.s && obj.f && obj.b)) throw new Error("Invalid file coverage object, missing keys, found:" + Object.keys(obj).join(","));
-	}
-	const keyFromLoc = ({ start, end }) => `${start.line}|${start.column}|${end.line}|${end.column}`;
-	const isObj = (o) => !!o && typeof o === "object";
-	const isLineCol = (o) => isObj(o) && typeof o.line === "number" && typeof o.column === "number";
-	const isLoc = (o) => isObj(o) && isLineCol(o.start) && isLineCol(o.end);
-	const getLoc = (o) => isLoc(o) ? o : isLoc(o.loc) ? o.loc : null;
-	const findNearestContainer = (item, map) => {
-		const itemLoc = getLoc(item);
-		if (!itemLoc) return null;
-		let nearestContainingItem = null;
-		let containerDistance = null;
-		let containerKey = null;
-		for (const [i, mapItem] of Object.entries(map)) {
-			const mapLoc = getLoc(mapItem);
-			if (!mapLoc) continue;
-			const distance = [
-				itemLoc.start.line - mapLoc.start.line,
-				itemLoc.start.column - mapLoc.start.column,
-				mapLoc.end.line - itemLoc.end.line,
-				mapLoc.end.column - itemLoc.end.column
-			];
-			if (distance[0] < 0 || distance[2] < 0 || distance[0] === 0 && distance[1] < 0 || distance[2] === 0 && distance[3] < 0) continue;
-			if (nearestContainingItem === null) {
-				containerDistance = distance;
-				nearestContainingItem = mapItem;
-				containerKey = i;
-				continue;
-			}
-			const closerBefore = distance[0] < containerDistance[0] || distance[0] === 0 && distance[1] < containerDistance[1];
-			const closerAfter = distance[2] < containerDistance[2] || distance[2] === 0 && distance[3] < containerDistance[3];
-			if (closerBefore || closerAfter) {
-				containerDistance = distance;
-				nearestContainingItem = mapItem;
-				containerKey = i;
-			}
-		}
-		return containerKey;
-	};
-	const addHits = (aHits, bHits) => {
-		if (typeof aHits === "number" && typeof bHits === "number") return aHits + bHits;
-		else if (Array.isArray(aHits) && Array.isArray(bHits)) return aHits.map((a, i) => (a || 0) + (bHits[i] || 0));
-		return null;
-	};
-	const addNearestContainerHits = (item, itemHits, map, mapHits) => {
-		const container = findNearestContainer(item, map);
-		if (container) return addHits(itemHits, mapHits[container]);
-		else return itemHits;
-	};
-	const mergeProp = (aHits, aMap, bHits, bMap, itemKey = keyFromLoc) => {
-		const aItems = {};
-		for (const [key, itemHits] of Object.entries(aHits)) {
-			const item = aMap[key];
-			aItems[itemKey(item)] = [itemHits, item];
-		}
-		const bItems = {};
-		for (const [key, itemHits] of Object.entries(bHits)) {
-			const item = bMap[key];
-			bItems[itemKey(item)] = [itemHits, item];
-		}
-		const mergedItems = {};
-		for (const [key, aValue] of Object.entries(aItems)) {
-			let aItemHits = aValue[0];
-			const aItem = aValue[1];
-			const bValue = bItems[key];
-			if (!bValue) aItemHits = addNearestContainerHits(aItem, aItemHits, bMap, bHits);
-			else aItemHits = addHits(aItemHits, bValue[0]);
-			mergedItems[key] = [aItemHits, aItem];
-		}
-		for (const [key, bValue] of Object.entries(bItems)) {
-			let bItemHits = bValue[0];
-			const bItem = bValue[1];
-			if (mergedItems[key]) continue;
-			bItemHits = addNearestContainerHits(bItem, bItemHits, aMap, aHits);
-			mergedItems[key] = [bItemHits, bItem];
-		}
-		const hits = {};
-		const map = {};
-		Object.values(mergedItems).forEach(([itemHits, item], i) => {
-			hits[i] = itemHits;
-			map[i] = item;
-		});
-		return [hits, map];
-	};
-	/**
-	* provides a read-only view of coverage for a single file.
-	* The deep structure of this object is documented elsewhere. It has the following
-	* properties:
-	*
-	* * `path` - the file path for which coverage is being tracked
-	* * `statementMap` - map of statement locations keyed by statement index
-	* * `fnMap` - map of function metadata keyed by function index
-	* * `branchMap` - map of branch metadata keyed by branch index
-	* * `s` - hit counts for statements
-	* * `f` - hit count for functions
-	* * `b` - hit count for branches
-	*/
-	var FileCoverage$2 = class FileCoverage$2 {
-		/**
-		* @constructor
-		* @param {Object|FileCoverage|String} pathOrObj is a string that initializes
-		* and empty coverage object with the specified file path or a data object that
-		* has all the required properties for a file coverage object.
-		*/
-		constructor(pathOrObj, reportLogic = false) {
-			if (!pathOrObj) throw new Error("Coverage must be initialized with a path or an object");
-			if (typeof pathOrObj === "string") this.data = emptyCoverage(pathOrObj, reportLogic);
-			else if (pathOrObj instanceof FileCoverage$2) this.data = pathOrObj.data;
-			else if (typeof pathOrObj === "object") this.data = pathOrObj;
-			else throw new Error("Invalid argument to coverage constructor");
-			assertValidObject(this.data);
-		}
-		/**
-		* returns computed line coverage from statement coverage.
-		* This is a map of hits keyed by line number in the source.
-		*/
-		getLineCoverage() {
-			const statementMap = this.data.statementMap;
-			const statements = this.data.s;
-			const lineMap = Object.create(null);
-			Object.entries(statements).forEach(([st, count]) => {
-				/* istanbul ignore if: is this even possible? */
-				if (!statementMap[st]) return;
-				const { line } = statementMap[st].start;
-				const prevVal = lineMap[line];
-				if (prevVal === void 0 || prevVal < count) lineMap[line] = count;
-			});
-			return lineMap;
-		}
-		/**
-		* returns an array of uncovered line numbers.
-		* @returns {Array} an array of line numbers for which no hits have been
-		*  collected.
-		*/
-		getUncoveredLines() {
-			const lc = this.getLineCoverage();
-			const ret = [];
-			Object.entries(lc).forEach(([l, hits]) => {
-				if (hits === 0) ret.push(l);
-			});
-			return ret;
-		}
-		/**
-		* returns a map of branch coverage by source line number.
-		* @returns {Object} an object keyed by line number. Each object
-		* has a `covered`, `total` and `coverage` (percentage) property.
-		*/
-		getBranchCoverageByLine() {
-			const branchMap = this.branchMap;
-			const branches = this.b;
-			const ret = {};
-			Object.entries(branchMap).forEach(([k, map]) => {
-				const line = map.line || map.loc.start.line;
-				const branchData = branches[k];
-				ret[line] = ret[line] || [];
-				ret[line].push(...branchData);
-			});
-			Object.entries(ret).forEach(([k, dataArray]) => {
-				const covered = dataArray.filter((item) => item > 0);
-				const coverage = covered.length / dataArray.length * 100;
-				ret[k] = {
-					covered: covered.length,
-					total: dataArray.length,
-					coverage
-				};
-			});
-			return ret;
-		}
-		/**
-		* return a JSON-serializable POJO for this file coverage object
-		*/
-		toJSON() {
-			return this.data;
-		}
-		/**
-		* merges a second coverage object into this one, updating hit counts
-		* @param {FileCoverage} other - the coverage object to be merged into this one.
-		*  Note that the other object should have the same structure as this one (same file).
-		*/
-		merge(other) {
-			if (other.all === true) return;
-			if (this.all === true) {
-				this.data = other.data;
-				return;
-			}
-			let [hits, map] = mergeProp(this.s, this.statementMap, other.s, other.statementMap);
-			this.data.s = hits;
-			this.data.statementMap = map;
-			const keyFromLocProp = (x) => keyFromLoc(x.loc);
-			const keyFromLocationsProp = (x) => keyFromLoc(x.locations[0]);
-			[hits, map] = mergeProp(this.f, this.fnMap, other.f, other.fnMap, keyFromLocProp);
-			this.data.f = hits;
-			this.data.fnMap = map;
-			[hits, map] = mergeProp(this.b, this.branchMap, other.b, other.branchMap, keyFromLocationsProp);
-			this.data.b = hits;
-			this.data.branchMap = map;
-			if (this.bT && other.bT) {
-				[hits, map] = mergeProp(this.bT, this.branchMap, other.bT, other.branchMap, keyFromLocationsProp);
-				this.data.bT = hits;
-			}
-		}
-		computeSimpleTotals(property) {
-			let stats = this[property];
-			if (typeof stats === "function") stats = stats.call(this);
-			const ret = {
-				total: Object.keys(stats).length,
-				covered: Object.values(stats).filter((v) => !!v).length,
-				skipped: 0
-			};
-			ret.pct = percent(ret.covered, ret.total);
-			return ret;
-		}
-		computeBranchTotals(property) {
-			const stats = this[property];
-			const ret = {
-				total: 0,
-				covered: 0,
-				skipped: 0
-			};
-			Object.values(stats).forEach((branches) => {
-				ret.covered += branches.filter((hits) => hits > 0).length;
-				ret.total += branches.length;
-			});
-			ret.pct = percent(ret.covered, ret.total);
-			return ret;
-		}
-		/**
-		* resets hit counts for all statements, functions and branches
-		* in this coverage object resulting in zero coverage.
-		*/
-		resetHits() {
-			const statements = this.s;
-			const functions = this.f;
-			const branches = this.b;
-			const branchesTrue = this.bT;
-			Object.keys(statements).forEach((s) => {
-				statements[s] = 0;
-			});
-			Object.keys(functions).forEach((f) => {
-				functions[f] = 0;
-			});
-			Object.keys(branches).forEach((b) => {
-				branches[b].fill(0);
-			});
-			if (branchesTrue) Object.keys(branchesTrue).forEach((bT) => {
-				branchesTrue[bT].fill(0);
-			});
-		}
-		/**
-		* returns a CoverageSummary for this file coverage object
-		* @returns {CoverageSummary}
-		*/
-		toSummary() {
-			const ret = {};
-			ret.lines = this.computeSimpleTotals("getLineCoverage");
-			ret.functions = this.computeSimpleTotals("f", "fnMap");
-			ret.statements = this.computeSimpleTotals("s", "statementMap");
-			ret.branches = this.computeBranchTotals("b");
-			if (this.bT) ret.branchesTrue = this.computeBranchTotals("bT");
-			return new CoverageSummary$2(ret);
-		}
-	};
-	dataProperties(FileCoverage$2, [
-		"path",
-		"statementMap",
-		"fnMap",
-		"branchMap",
-		"s",
-		"f",
-		"b",
-		"bT",
-		"all"
-	]);
-	module.exports = {
-		FileCoverage: FileCoverage$2,
-		findNearestContainer,
-		addHits,
-		addNearestContainerHits
-	};
-}));
-
-//#endregion
-//#region ../../node_modules/.pnpm/istanbul-lib-coverage@3.2.2/node_modules/istanbul-lib-coverage/lib/coverage-map.js
-var require_coverage_map = /* @__PURE__ */ __commonJSMin(((exports, module) => {
-	const { FileCoverage: FileCoverage$1 } = require_file_coverage();
-	const { CoverageSummary: CoverageSummary$1 } = require_coverage_summary();
-	function maybeConstruct(obj, klass) {
-		if (obj instanceof klass) return obj;
-		return new klass(obj);
-	}
-	function loadMap(source) {
-		const data = Object.create(null);
-		if (!source) return data;
-		Object.entries(source).forEach(([k, cov]) => {
-			data[k] = maybeConstruct(cov, FileCoverage$1);
-		});
-		return data;
-	}
-	/** CoverageMap is a map of `FileCoverage` objects keyed by file paths. */
-	var CoverageMap$1 = class CoverageMap$1 {
-		/**
-		* @constructor
-		* @param {Object} [obj=undefined] obj A coverage map from which to initialize this
-		* map's contents. This can be the raw global coverage object.
-		*/
-		constructor(obj) {
-			if (obj instanceof CoverageMap$1) this.data = obj.data;
-			else this.data = loadMap(obj);
-		}
-		/**
-		* merges a second coverage map into this one
-		* @param {CoverageMap} obj - a CoverageMap or its raw data. Coverage is merged
-		*  correctly for the same files and additional file coverage keys are created
-		*  as needed.
-		*/
-		merge(obj) {
-			const other = maybeConstruct(obj, CoverageMap$1);
-			Object.values(other.data).forEach((fc) => {
-				this.addFileCoverage(fc);
-			});
-		}
-		/**
-		* filter the coveragemap based on the callback provided
-		* @param {Function (filename)} callback - Returns true if the path
-		*  should be included in the coveragemap. False if it should be
-		*  removed.
-		*/
-		filter(callback) {
-			Object.keys(this.data).forEach((k) => {
-				if (!callback(k)) delete this.data[k];
-			});
-		}
-		/**
-		* returns a JSON-serializable POJO for this coverage map
-		* @returns {Object}
-		*/
-		toJSON() {
-			return this.data;
-		}
-		/**
-		* returns an array for file paths for which this map has coverage
-		* @returns {Array{string}} - array of files
-		*/
-		files() {
-			return Object.keys(this.data);
-		}
-		/**
-		* returns the file coverage for the specified file.
-		* @param {String} file
-		* @returns {FileCoverage}
-		*/
-		fileCoverageFor(file) {
-			const fc = this.data[file];
-			if (!fc) throw new Error(`No file coverage available for: ${file}`);
-			return fc;
-		}
-		/**
-		* adds a file coverage object to this map. If the path for the object,
-		* already exists in the map, it is merged with the existing coverage
-		* otherwise a new key is added to the map.
-		* @param {FileCoverage} fc the file coverage to add
-		*/
-		addFileCoverage(fc) {
-			const cov = new FileCoverage$1(fc);
-			const { path } = cov;
-			if (this.data[path]) this.data[path].merge(cov);
-			else this.data[path] = cov;
-		}
-		/**
-		* returns the coverage summary for all the file coverage objects in this map.
-		* @returns {CoverageSummary}
-		*/
-		getCoverageSummary() {
-			const ret = new CoverageSummary$1();
-			Object.values(this.data).forEach((fc) => {
-				ret.merge(fc.toSummary());
-			});
-			return ret;
-		}
-	};
-	module.exports = { CoverageMap: CoverageMap$1 };
-}));
-
-//#endregion
-//#region ../../node_modules/.pnpm/istanbul-lib-coverage@3.2.2/node_modules/istanbul-lib-coverage/index.js
-var require_istanbul_lib_coverage = /* @__PURE__ */ __commonJSMin(((exports, module) => {
-	/**
-	* istanbul-lib-coverage exports an API that allows you to create and manipulate
-	* file coverage, coverage maps (a set of file coverage objects) and summary
-	* coverage objects. File coverage for the same file can be merged as can
-	* entire coverage maps.
-	*
-	* @module Exports
-	*/
-	const { FileCoverage } = require_file_coverage();
-	const { CoverageMap } = require_coverage_map();
-	const { CoverageSummary } = require_coverage_summary();
-	module.exports = {
-		createCoverageSummary(obj) {
-			if (obj && obj instanceof CoverageSummary) return obj;
-			return new CoverageSummary(obj);
-		},
-		createCoverageMap(obj) {
-			if (obj && obj instanceof CoverageMap) return obj;
-			return new CoverageMap(obj);
-		},
-		createFileCoverage(obj) {
-			if (obj && obj instanceof FileCoverage) return obj;
-			return new FileCoverage(obj);
-		}
-	};
-	/** classes exported for reuse */
-	module.exports.classes = { FileCoverage };
-}));
-
-//#endregion
 //#region src/components/RIf.tsx
-var import_istanbul_lib_coverage = require_istanbul_lib_coverage();
 const RIf = ({ condition, children }) => {
-	return /* @__PURE__ */ jsx(Fragment, { children: condition ? /* @__PURE__ */ jsx(Fragment, { children }) : null });
+	return /* @__PURE__ */ jsx(Fragment, { children: condition ? children : null });
 };
 var RIf_default = RIf;
 
@@ -598,28 +46,312 @@ const generateCoreDataForEachComponent = ({ dataSource, filenameKeywords, value,
 	};
 };
 
+//#endregion
+//#region src/helpers/annotate.ts
+function annotateStatements(fileCoverage) {
+	const annotateStatementsList = [];
+	const statementStats = fileCoverage.s;
+	const statementMeta = fileCoverage.statementMap;
+	Object.entries(statementStats).forEach(([stName, count]) => {
+		const meta = statementMeta[stName];
+		const type = count > 0 ? "yes" : "no";
+		const startCol = meta.start.column;
+		const endCol = meta.end.column + 1;
+		const startLine = meta.start.line;
+		const endLine = meta.end.line;
+		if (type === "no") annotateStatementsList.push({
+			startLine,
+			endLine,
+			startCol: startCol + 1,
+			endCol: endCol + 1,
+			type: "S"
+		});
+	});
+	return annotateStatementsList;
+}
+function annotateFunctions(fileCoverage, structuredText) {
+	const fnStats = fileCoverage.f;
+	const fnMeta = fileCoverage.fnMap;
+	if (!fnStats) return [];
+	const list = [];
+	Object.entries(fnStats).forEach(([fName, count]) => {
+		const meta = fnMeta[fName];
+		const type = count > 0 ? "yes" : "no";
+		const decl = meta.decl || meta.loc;
+		const startCol = decl.start.column;
+		let endCol = decl.end.column + 1;
+		const startLine = decl.start.line;
+		const endLine = decl.end.line;
+		if (type === "no") {
+			if (endLine !== startLine) endCol = structuredText[startLine - 1].length;
+			list.push({
+				startLine,
+				endLine,
+				startCol: startCol + 1,
+				endCol: endCol + 1,
+				type: "F"
+			});
+		}
+	});
+	return list;
+}
+function annotateBranches(fileCoverage, structuredText) {
+	const branchStats = fileCoverage.b;
+	const branchMeta = fileCoverage.branchMap;
+	if (!branchStats) return [];
+	const arr = [];
+	Object.entries(branchStats).forEach(([branchName, branchArray]) => {
+		const sumCount = branchArray.reduce((p, n) => p + n, 0);
+		const metaArray = branchMeta[branchName].locations;
+		let i;
+		let count;
+		let meta;
+		let startCol;
+		let endCol;
+		let startLine;
+		let endLine;
+		if (sumCount > 0 || sumCount === 0 && branchArray.length === 1) {
+			if (branchMeta[branchName].type === "if" && branchArray.length === 2 && metaArray.length === 1 && branchArray[1] === 0) metaArray[1] = {
+				start: {},
+				end: {}
+			};
+			for (i = 0; i < branchArray.length && i < metaArray.length; i += 1) {
+				count = branchArray[i];
+				meta = metaArray[i];
+				startCol = meta.start.column;
+				endCol = meta.end.column + 1;
+				startLine = meta.start.line;
+				endLine = meta.end.line;
+				if (count === 0 && startLine === void 0 && branchMeta[branchName].type === "if") {
+					const prevMeta = metaArray[i - 1];
+					startCol = prevMeta.start.column;
+					endCol = prevMeta.end.column + 1;
+					startLine = prevMeta.start.line;
+					endLine = prevMeta.end.line;
+				}
+				if (count === 0 && structuredText[startLine]) {
+					if (endLine !== startLine) {}
+					structuredText[startLine].text;
+					if (branchMeta[branchName].type === "if") arr.push({
+						startLine,
+						endLine,
+						startCol: startCol + 1,
+						endCol: endCol + 1,
+						type: i === 0 ? "I" : "E",
+						skip: meta.skip
+					});
+					else arr.push({
+						startLine,
+						endLine,
+						startCol: startCol + 1,
+						endCol: endCol + 1,
+						type: "B",
+						skip: meta.skip
+					});
+				}
+			}
+		}
+	});
+	return arr;
+}
+
+//#endregion
+//#region src/helpers/coreFn.ts
+function coreFn(fileCoverage, fileDetail) {
+	const nullData = {
+		times: [],
+		rows: [],
+		maxWidth: 0,
+		lines: []
+	};
+	if (!fileCoverage.s) return nullData;
+	const content = fileDetail;
+	const rows = [""];
+	let index = 0;
+	for (let i = 0; i < content.length; i++) if (content[i] === "\n") {
+		index += 1;
+		rows.push("");
+	} else rows[index] += content[i];
+	const maxWidth = JSON.parse(JSON.stringify(rows)).sort((a, b) => -(a.length - b.length))[0].length;
+	function getLineCoverage(data) {
+		const statementMap = data.statementMap;
+		const statements = data.s;
+		const lineMap = Object.create(null);
+		Object.entries(statements).forEach(([st, count]) => {
+			if (!statementMap[st]) return;
+			const { line } = statementMap[st].start;
+			const prevVal = lineMap[line];
+			if (prevVal === void 0 || prevVal < count) lineMap[line] = count;
+		});
+		return lineMap;
+	}
+	const lineStats = getLineCoverage(fileCoverage);
+	if (!lineStats) return nullData;
+	const numberOfRows = [];
+	Object.entries(lineStats).forEach(([lineNumber, count]) => {
+		numberOfRows.push({
+			lineNumber,
+			count
+		});
+	});
+	const lines = [];
+	for (let i = 0; i < rows.length; i++) if (numberOfRows.find((n) => Number(n.lineNumber) === i + 1)) lines.push({ executionNumber: numberOfRows.find((n) => Number(n.lineNumber) === i + 1).count });
+	else lines.push({ executionNumber: -1 });
+	return {
+		times: numberOfRows,
+		rows,
+		lines,
+		maxWidth
+	};
+}
+
+//#endregion
+//#region src/widgets/lineNumbers.tsx
+function genBgColor(hit) {
+	if (hit > 0) return "rgb(230, 245, 208)";
+	else if (hit === 0) return "#f3aeac";
+	else return "rgb(234, 234, 234)";
+}
+const LineNumber = ({ lineNumber }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: "line-number",
+		children: lineNumber
+	});
+};
+const LineChange = ({ hasChange }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: "line-change",
+		children: hasChange ? "+" : ""
+	});
+};
+const LineCoverage = ({ hit, width }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: "line-coverage",
+		style: {
+			background: genBgColor(hit),
+			width: `${width}px`
+		},
+		children: hit > 0 ? `${hit}x` : ""
+	});
+};
+const LineNumberWrapper = ({ lineNumber, line, maxHitWidth }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "line-number-wrapper",
+		children: [
+			/* @__PURE__ */ jsx(LineNumber, { lineNumber }),
+			/* @__PURE__ */ jsx(LineChange, { hasChange: line.change }),
+			/* @__PURE__ */ jsx(LineCoverage, {
+				hit: line.hit,
+				width: maxHitWidth
+			})
+		]
+	});
+};
+function lineNumbers(lineNumber, linesState, _addLines) {
+	return renderToStaticMarkup(/* @__PURE__ */ jsx(LineNumberWrapper, {
+		lineNumber,
+		line: linesState.find((line) => line.lineNumber === lineNumber) || {
+			change: false,
+			hit: 0,
+			lineNumber
+		},
+		maxHitWidth: (Math.max(...linesState.map((line) => line.hit)).toString().length + 2) * 7.2
+	}));
+}
+
 //#endregion
 //#region src/widgets/CoverageDetail.tsx
-function CanyonReport$1({ fileContent, fileCoverage, fileCodeChange }) {
-	console.log(fileCodeChange, "fileCodeChange");
+const CoverageDetail = ({ source, coverage, diff }) => {
+	const { lines } = coreFn(coverage, source);
+	const addLines = diff.additions || [];
+	const linesState = (() => {
+		return lines.map((line, index) => {
+			return {
+				lineNumber: index + 1,
+				change: addLines.includes(index + 1),
+				hit: line.executionNumber
+			};
+		});
+	})();
+	const lineNumbersMinChars = (() => {
+		return Math.max(...linesState.map((line) => line.hit)).toString().length + 8;
+	})();
 	const ref = useRef(null);
 	useEffect(() => {
 		if (ref.current) {
 			const dom = ref.current;
 			const options = {
-				value: fileContent,
+				value: source,
 				language: "javascript",
-				fontFamily: "IBMPlexMono"
+				fontFamily: "IBMPlexMono",
+				lineHeight: 18,
+				lineNumbers: (lineNumber) => {
+					return lineNumbers(lineNumber, linesState);
+				},
+				lineNumbersMinChars,
+				readOnly: true,
+				folding: false,
+				minimap: { enabled: false },
+				scrollBeyondLastLine: false,
+				showUnused: false,
+				fontSize: 12,
+				contextmenu: false,
+				automaticLayout: true
 			};
-			if (window.monaco?.editor && dom) window.monaco.editor.create(dom, options);
+			if (window.monaco?.editor && dom) {
+				const editor = window.monaco.editor.create(dom, options);
+				const decorations = (() => {
+					const all = [];
+					const annotateStatementsList = annotateStatements(coverage);
+					all.push(...annotateStatementsList);
+					const annotateFunctionsList = annotateFunctions(coverage, source);
+					all.push(...annotateFunctionsList);
+					const annotateBranchesList = annotateBranches(coverage, source);
+					all.push(...annotateBranchesList);
+					const arr = [];
+					for (let i = 0; i < all.length; i++) {
+						const { startLine, startCol, endLine, endCol } = all[i];
+						if (all[i].type === "S" || all[i].type === "F") arr.push({
+							range: new window.monaco.Range(startLine, startCol, endLine, endCol),
+							options: {
+								isWholeLine: false,
+								inlineClassName: "content-class-no-found"
+							}
+						});
+						else if (all[i].type === "B") arr.push({
+							range: new window.monaco.Range(startLine, startCol, endLine, endCol),
+							options: {
+								isWholeLine: false,
+								inlineClassName: "content-class-no-found-branch"
+							}
+						});
+						else if (all[i].type === "I") arr.push({
+							range: new window.monaco.Range(startLine, startCol, startLine, startCol),
+							options: {
+								beforeContentClassName: "insert-i-decoration",
+								stickiness: window.monaco.editor.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges
+							}
+						});
+						else if (all[i].type === "E") arr.push({
+							range: new window.monaco.Range(startLine, startCol, startLine, startCol),
+							options: {
+								beforeContentClassName: "insert-e-decoration",
+								stickiness: window.monaco.editor.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges
+							}
+						});
+					}
+					return arr;
+				})();
+				if (editor) editor?.createDecorationsCollection?.(decorations);
+			}
 		}
-	}, []);
+	}, [source]);
 	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", {
 		ref,
 		style: { height: "calc(100vh - 150px)" }
 	}) });
-}
-var CoverageDetail_default = CanyonReport$1;
+};
+var CoverageDetail_default = CoverageDetail;
 
 //#endregion
 //#region src/helpers/color.ts
@@ -643,24 +375,30 @@ const SummaryNav = ({ value, onClick, reportName }) => {
 			fontSize: "16px",
 			fontWeight: "bold"
 		},
-		children: `${reportName}/${value}`.split("/").map((item, index) => {
+		children: `${reportName}/${value}`.split("/").map((item, index, array) => {
+			const pathKey = `${reportName}-${array.slice(0, index + 1).join("/")}`;
 			return /* @__PURE__ */ jsxs("div", {
 				style: {
 					display: "flex",
 					gap: "6px"
 				},
-				children: [/* @__PURE__ */ jsx("a", {
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
 					style: {
 						color: token.colorPrimary,
 						cursor: "pointer",
-						textDecoration: "none"
+						textDecoration: "none",
+						background: "none",
+						border: "none",
+						padding: 0,
+						font: "inherit"
 					},
 					onClick: () => {
 						onClick(value.split("/").slice(0, index).join("/"));
 					},
 					children: item
-				}, index), index === value.split("/").length || !value ? null : /* @__PURE__ */ jsx("span", { children: "/" })]
-			}, index);
+				}), index === value.split("/").length || !value ? null : /* @__PURE__ */ jsx("span", { children: "/" })]
+			}, pathKey);
 		})
 	});
 };
@@ -767,11 +505,19 @@ const SummaryList = ({ dataSource, onSelect, filenameKeywords, style, onlyChange
 						key: "path",
 						dataIndex: "path",
 						render(text) {
-							return /* @__PURE__ */ jsx("a", {
+							return /* @__PURE__ */ jsx("button", {
+								type: "button",
 								style: {
 									width: "420px",
 									display: "block",
-									overflowWrap: "break-word"
+									overflowWrap: "break-word",
+									background: "none",
+									border: "none",
+									padding: 0,
+									textAlign: "left",
+									cursor: "pointer",
+									color: "inherit",
+									font: "inherit"
 								},
 								onClick: () => {
 									onSelect(text);
@@ -889,10 +635,18 @@ const SummaryTree = ({ dataSource, onSelect, style, onlyChange }) => {
 						key: "path",
 						dataIndex: "path",
 						render(text) {
-							return /* @__PURE__ */ jsxs("a", {
+							return /* @__PURE__ */ jsxs("button", {
+								type: "button",
 								style: {
 									display: "flex",
-									gap: "6px"
+									gap: "6px",
+									background: "none",
+									border: "none",
+									padding: 0,
+									cursor: "pointer",
+									color: "inherit",
+									font: "inherit",
+									alignItems: "center"
 								},
 								onClick: () => {
 									onSelect(text);
@@ -1085,27 +839,29 @@ const CanyonReport = ({ value, name, dataSource, onSelect }) => {
 	const [fileContent, setFileContent] = useState("");
 	const [fileCodeChange, setFileCodeChange] = useState([]);
 	const [onlyChange, setOnlyChange] = useState(Boolean(false));
-	const rootClassName = useMemo(() => `report-scope-${Math.random().toString(36).slice(2, 9)}`, []);
+	const rootClassName = useMemo(() => `report-scope-${Math.random().toString(36).slice(2, 9)} canyonjs-report-html`, []);
 	function onChangeOnlyChange(v) {
 		setOnlyChange(v);
 	}
-	async function newOnSelect(val) {
-		const res = await onSelect(val);
-		setFileContent(res.fileContent || "");
-		setFileCoverage(res.fileCoverage || {});
-		setFileCodeChange(res.fileCodeChange || "");
-		return res;
-	}
+	const newOnSelect = useMemo(() => {
+		return async (val) => {
+			const res = await onSelect(val);
+			setFileContent(res.fileContent || "");
+			setFileCoverage(res.fileCoverage || {});
+			setFileCodeChange(res.fileCodeChange || "");
+			return res;
+		};
+	}, [onSelect]);
 	useEffect(() => {
 		newOnSelect(value);
-	}, []);
+	}, [newOnSelect, value]);
 	const isFile = useMemo(() => {
 		return /\.(js|jsx|ts|tsx|vue)$/.test(value);
 	}, [value]);
 	const mode = useMemo(() => {
 		if (isFile) return "file";
 		return showMode;
-	}, [showMode, value]);
+	}, [showMode, isFile]);
 	const isFileDataReady = useMemo(() => {
 		const hasCoverage = fileCoverage && Object.keys(fileCoverage).length > 0;
 		const hasContent = fileContent.length > 0;
@@ -1171,9 +927,9 @@ const CanyonReport = ({ value, name, dataSource, onSelect }) => {
 							children: /* @__PURE__ */ jsx(RIf_default, {
 								condition: isFileDataReady,
 								children: /* @__PURE__ */ jsx(CoverageDetail_default, {
-									fileContent,
-									fileCoverage,
-									fileCodeChange
+									source: fileContent,
+									coverage: fileCoverage,
+									diff: fileCodeChange
 								})
 							})
 						})

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@canyonjs/report-component",
   "type": "module",
-  "version": "0.0.1-beta.12",
+  "version": "0.0.1-beta.16",
   "author": "Travis Zhang<https://github.com/travzhang>",
   "repository": {
     "type": "git",
@@ -14,7 +14,8 @@
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./style.css": "./dist/style.css"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -22,9 +23,6 @@
   "files": [
     "dist"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "peerDependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
@@ -38,8 +36,8 @@
     "@vitejs/plugin-react": "^5.1.1",
     "istanbul-lib-coverage": "^3.2.2",
     "tsdown": "^0.17.0",
-    "typescript": "^5.9.3",
-    "vite": "^7.2.6"
+    "@typescript/native-preview": "^7.0.0-dev.20251215.1",
+    "vite": "8.0.0-beta.0"
   },
   "dependencies": {
     "@ant-design/icons": "^6.1.0",
@@ -54,7 +52,6 @@
     "build": "tsdown",
     "dev": "tsdown --watch",
     "play": "vite",
-    "test": "vitest",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsgo --noEmit"
   }
 }