feat: update

packages/canyon-data/src/index.ts

@@ -51,17 +51,22 @@ export const getSummaryByPath = (
 export const genSummaryTreeItem = (
   path: string,
   summary: CoverageSummaryMap,
-) => {
-
-  console.log(path,'sss')
-
+):{
+  path: string;
+  summary: CoverageSummaryData;
+  children: {
+    path: string;
+    summary: CoverageSummaryData;
+  }[];
+} => {
   function check(item: string, path: string) {
-    if (path === '') {
+    if (path === '~') {
       return true;
     }
     return item.includes(path);
   }
 
+  // 如果是文件
   if (Object.keys(summary).find((item) => item === path)) {
     return {
       path,

packages/canyon-report/src/Report/components/IstanbulReport.tsx

@@ -2,10 +2,10 @@ import { CoverageSummaryMap, genSummaryTreeItem } from '@canyon/data';
 import { FC, useMemo } from 'preact/compat';
 import { useEffect, useState } from 'preact/hooks';
 
-import { IstanbulReportProps } from '../types';
-import { Dims } from '../types.ts';
-import Th from './Th.tsx';
-import Tr from './Tr.tsx';
+import { Dims, IstanbulReportProps } from '../types';
+// import { Dims } from '../types';
+import Th from './Th';
+import Tr from './Tr';
 
 const capitalized = (word: string) =>
   word.charAt(0).toUpperCase() + word.slice(1);
@@ -29,10 +29,13 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
   watermarks,
 }) => {
   const [summary, setSummary] = useState<CoverageSummaryMap>({});
+  // @ts-ignore
+  const [fileCoverage, setFileCoverage] = useState({} as any);
+  const [fileContent, setFileContent] = useState('');
   const [activePath, setActivePath] = useState('~');
 
   const summaryTreeItem = useMemo(() => {
-    return genSummaryTreeItem('~', summary);
+    return genSummaryTreeItem(activePath, summary);
   }, [activePath, summary]);
   const paths = useMemo(() => {
     return activePath
@@ -51,6 +54,15 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
       );
   }, [activePath]);
 
+  useEffect(() => {
+    if (activePath.includes('.')) {
+      onSelectFile(activePath).then(({ fileContent, fileCoverage }) => {
+        setFileContent(fileContent);
+        setFileCoverage(fileCoverage);
+      });
+    }
+  }, [activePath]);
+
   useEffect(() => {
     const handleSetOptionEvent = (e: { detail: any }) => {
       setSummary(e.detail);
@@ -64,19 +76,19 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
     };
   }, []); // 空数组表示仅在组件挂载和卸载时运行
 
+
   return (
     <div id={'canyon-report'}>
-      <p>{activePath}</p>
       <div className={'pad1'}>
         <h1>
           <a
             onClick={() => {
-              setActivePath('');
+              setActivePath('~');
             }}
           >
             All files
-          </a>{' '}
-          /{' '}
+          </a>
+          <span> / </span>
           <div className="pathnames" style="display: inline">
             {paths.map(({ path, name }) => {
               return (
@@ -92,7 +104,8 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
                 </>
               );
             })}
-          </div>{' '}
+          </div>
+          <span>&nbsp;</span>
           <span className="filename">
             {summaryTreeItem.path.split('/').at(-1)}
           </span>
@@ -101,11 +114,14 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
           {dims.map((dim) => (
             <div className="fl pad1y space-right2">
               <span className="strong">
+                  {/*// @ts-ignore*/}
                 {summaryTreeItem.summary[dim].pct}%
               </span>
               <span className="quiet">{capitalized(dim)}</span>
               <span className="fraction">
+                                  {/*// @ts-ignore*/}
                 {summaryTreeItem.summary.statements.covered}/
+                {/*// @ts-ignore*/}
                 {summaryTreeItem.summary[dim].total}
               </span>
             </div>
@@ -133,14 +149,15 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
           <table className="coverage-summary">
             <Th />
             <tbody>
-              {summaryTreeItem.children.map((item) => {
+            {/*// @ts-ignore*/}
+              {summaryTreeItem.children.map(({ path, summary }) => {
                 return (
                   <Tr
                     setActivePath={(p) => {
                       setActivePath(p);
                     }}
-                    path={item.path}
-                    item={item.summary}
+                    path={path}
+                    item={summary}
                     watermarks={watermarks}
                   />
                 );
@@ -149,7 +166,7 @@ const IstanbulReport: FC<IstanbulReportProps> = ({
           </table>
         </div>
       ) : (
-        <div>wu</div>
+        <div>{fileContent}</div>
       )}
     </div>
   );

packages/canyon-report/src/Report/components/Tr.tsx

@@ -1,13 +1,13 @@
 import { FC } from 'preact/compat';
 
-import { Dims, TrProps, Watermarks } from '../types.ts';
+import { Dims, TrProps, Watermarks } from '../types';
 
 const classForPercent = (
   type: Dims,
   value: number,
   _watermarks: Watermarks,
 ) => {
-  const watermarks = _watermarks[type];
+  const watermarks = _watermarks[type] as any;
   if (!watermarks) {
     return 'unknown';
   }

packages/canyon-report/src/Report/index.ts

@@ -1,4 +1,4 @@
-import Init from './init.tsx';
+import Init from './init';
 
 export * from './types';
 

packages/canyon-report/src/Report/init.tsx

@@ -1,11 +1,14 @@
 import { render } from 'preact';
 
 import IstanbulReport from './components/IstanbulReport';
-import { Watermarks } from './types';
+import { OnSelectFile, Watermarks } from './types';
 
-function noop(path: string) {
+function noop(
+  path: string,
+): Promise<{ fileContent: string; fileCoverage: any }> {
+  console.log(path, 'path');
   return new Promise((resolve) => {
-    resolve({ name: path });
+    resolve({ fileCoverage: {}, fileContent: `` });
   });
 }
 const configWatermarks = {
@@ -19,7 +22,7 @@ const init = (
   {
     onSelectFile = noop,
     watermarks = configWatermarks,
-  }: { onSelectFile: (path: string) => Promise<any>; watermarks: Watermarks },
+  }: { onSelectFile: OnSelectFile; watermarks: Watermarks },
 ) => {
   render(
     <IstanbulReport onSelectFile={onSelectFile} watermarks={watermarks} />,

packages/canyon-report/src/Report/types.ts

@@ -1,17 +1,14 @@
-export type ReportType = {
-  init: (options: any) => void;
-  setOption: (options: any) => void;
-}
-export type Init = {
-
-}
 export enum Dims {
   statements = 'statements',
   functions = 'functions',
   branches = 'branches',
   lines = 'lines',
 }
 
+export type OnSelectFile = (
+  path: string,
+) => Promise<{ fileContent: string; fileCoverage: any }>;
+
 export type Watermarks = {
   [Dims.statements]: number[];
   [Dims.functions]: number[];

packages/canyon-report/src/main.tsx

@@ -13,8 +13,12 @@ const configWatermarks = {
 };
 const report = init(document.querySelector('#root') as any, {
   onSelectFile(path: string) {
+    console.log(path, 'path');
     return new Promise((resolve) => {
-      resolve(path);
+      resolve({
+        fileCoverage: {},
+        fileContent: `const a = 1`,
+      });
     });
   },
   watermarks: configWatermarks,