From fba52d7277569a80739251e64e6895f96c576aa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Allen=20Zhang=20=28=E5=BC=A0=E6=B6=9B=29?= Date: Tue, 13 Feb 2024 20:47:07 +0800 Subject: [PATCH] dev-0213 --- packages/canyon-platform/vite.config.ts | 2 +- packages/canyon-report/package.json | 3 +- .../src/Report/components/Code.tsx | 42 ---------- .../src/Report/components/IstanbulReport.tsx | 3 +- .../src/Report/components/code.tsx | 84 +++++++++++++++++++ .../src/Report/components/line/coverage.tsx | 53 ++++++++++++ .../src/Report/components/line/new.tsx | 16 ++++ .../src/Report/components/line/number.tsx | 20 +++++ packages/canyon-report/src/Report/loadcss.ts | 2 +- packages/canyon-report/src/main.tsx | 2 +- packages/canyon-report/vite.config.ts | 3 +- 11 files changed, 181 insertions(+), 49 deletions(-) delete mode 100755 packages/canyon-report/src/Report/components/Code.tsx create mode 100755 packages/canyon-report/src/Report/components/code.tsx create mode 100644 packages/canyon-report/src/Report/components/line/coverage.tsx create mode 100644 packages/canyon-report/src/Report/components/line/new.tsx create mode 100644 packages/canyon-report/src/Report/components/line/number.tsx diff --git a/packages/canyon-platform/vite.config.ts b/packages/canyon-platform/vite.config.ts index 9db56689..63f72199 100644 --- a/packages/canyon-platform/vite.config.ts +++ b/packages/canyon-platform/vite.config.ts @@ -43,7 +43,7 @@ export default defineConfig({ host: '0.0.0.0', proxy: { '^/graphql|^/api': { - target: 'http://10.128.59.28', + target: 'http://10.139.166.57', changeOrigin: true, } }, diff --git a/packages/canyon-report/package.json b/packages/canyon-report/package.json index e3cfee6b..a6e27082 100755 --- a/packages/canyon-report/package.json +++ b/packages/canyon-report/package.json @@ -17,7 +17,8 @@ "dependencies": { "@canyon/data": "workspace:^", "highlight.js": "^11.9.0", - "preact": "^10.16.0" + "preact": "^10.16.0", + "shiki": "^1.1.2" }, "devDependencies": { "@preact/preset-vite": "^2.5.0", diff --git a/packages/canyon-report/src/Report/components/Code.tsx b/packages/canyon-report/src/Report/components/Code.tsx deleted file mode 100755 index dba4365b..00000000 --- a/packages/canyon-report/src/Report/components/Code.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import hljs from 'highlight.js'; -import { FC } from 'preact/compat'; -import { useEffect, useState } from 'preact/hooks'; - -import { coreFn } from '../../helper.ts'; -import Line from './Line.tsx'; -import Mask from './Mask.tsx'; - -const Code: FC<{ - fileCoverage: any; - fileContent: string; - fileCodeChange: number[]; -}> = ({ fileCoverage, fileContent, fileCodeChange }) => { - const [renderMask, setRenderMask] = useState(false); - const { lines } = coreFn(fileCoverage, fileContent); - useEffect(() => { - if (fileContent) { - hljs.highlightAll(); - setRenderMask(true); - } - }, [fileContent]); - return ( -
-
- {renderMask && } -
- - 
-            
-              {fileContent}
-            
-
-
-
-
- ); -}; - -export default Code; diff --git a/packages/canyon-report/src/Report/components/IstanbulReport.tsx b/packages/canyon-report/src/Report/components/IstanbulReport.tsx index 5c3987ac..28c9ccf7 100755 --- a/packages/canyon-report/src/Report/components/IstanbulReport.tsx +++ b/packages/canyon-report/src/Report/components/IstanbulReport.tsx @@ -4,7 +4,7 @@ import { useEffect, useState } from 'preact/hooks'; import { classForPercent } from '../../helper.ts'; import { Dims, IstanbulReportProps } from '../types'; -import Code from './Code.tsx'; +import Code from './code.tsx'; import Th from './Th'; import Tr from './Tr'; @@ -154,6 +154,7 @@ const IstanbulReport: FC = ({ fileCoverage={fileCoverage} fileContent={fileContent} fileCodeChange={fileCodeChange} + theme={'dark'} /> ) )} diff --git a/packages/canyon-report/src/Report/components/code.tsx b/packages/canyon-report/src/Report/components/code.tsx new file mode 100755 index 00000000..85b2f440 --- /dev/null +++ b/packages/canyon-report/src/Report/components/code.tsx @@ -0,0 +1,84 @@ +// import {useEffect, useState} from "react"; +import { codeToHtml } from 'shiki'; + +// import { code as code1 } from '../code.ts'; +// import { coreFn } from '../helper.ts'; +// import LineCount from "./line-count.tsx"; +// import LineCoverage from "./line-coverage.tsx"; +// import LineNew from "./line-new.tsx"; +// import fileCoverage from '../meta/coverage.json'; +import LineCoverage from './line/coverage.tsx'; +import LineNew from './line/new.tsx'; +import LineNumber from './line/number.tsx'; +import {coreFn} from "../../helper.ts"; +import {useEffect, useState} from "preact/hooks"; +import {FC} from "preact/compat"; +function getDecode(str: string) { + return decodeURIComponent( + atob(str) + .split('') + .map(function (c) { + return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); + }) + .join(''), + ); +} +// const code = getDecode(code1); +const Code:FC<{ + fileCoverage: any; + fileContent: string; + fileCodeChange: number[]; + theme:string +}> = ({ fileCoverage, fileContent:code, fileCodeChange,theme }) => { + // const code = `const a=1` + const [html, setHtml] = useState(''); + const { lines } = coreFn(fileCoverage, code); + // console.log(lines,'lines') + useEffect(() => { + codeToHtml(code, { + theme: theme === 'light' ? 'light-plus' : 'tokyo-night', + lang: 'tsx', + decorations: [], + }).then((h) => { + setHtml(h); + }); + }, [theme]); + + return ( +
+ + { + if (i.executionNumber > 0) { + return { + covered: 'yes', + hits: i.executionNumber, + }; + } else if (i.executionNumber === 0) { + return { + covered: 'no', + hits: i.executionNumber, + }; + } else { + return { + covered: 'neutral', + hits: 0, + }; + } + })} + /> + +
+
+ ); +}; + +export default Code; diff --git a/packages/canyon-report/src/Report/components/line/coverage.tsx b/packages/canyon-report/src/Report/components/line/coverage.tsx new file mode 100644 index 00000000..c07c68ed --- /dev/null +++ b/packages/canyon-report/src/Report/components/line/coverage.tsx @@ -0,0 +1,53 @@ +// import { CSSProperties } from 'react'; + +const LineCoverage = ({ covers, theme }) => { + return ( +
+ {covers.map(({ covered, hits }, index) => { + if (covered === 'yes') { + return ( +
+ {hits}x +
+ ); + } else if (covered === 'no') { + return ( +
+ ); + } else { + return ( +
+ ); + } + })} +
+ ); +}; + +export default LineCoverage; diff --git a/packages/canyon-report/src/Report/components/line/new.tsx b/packages/canyon-report/src/Report/components/line/new.tsx new file mode 100644 index 00000000..f54764c3 --- /dev/null +++ b/packages/canyon-report/src/Report/components/line/new.tsx @@ -0,0 +1,16 @@ +const LineNew = ({news}) => { + // const news = [1, 2, 3, 7, 8, 9, 10, 14, 15]; + return ( +
+ {[...Array(200)].map((line, index) => { + return ( +
+ {news.includes(index) ? '+' : ''} +
+ ); + })} +
+ ); +}; + +export default LineNew; diff --git a/packages/canyon-report/src/Report/components/line/number.tsx b/packages/canyon-report/src/Report/components/line/number.tsx new file mode 100644 index 00000000..5a55a023 --- /dev/null +++ b/packages/canyon-report/src/Report/components/line/number.tsx @@ -0,0 +1,20 @@ +// import { CSSProperties } from 'react'; + +// import { CSSProperties } from 'preact-compat'; + +const LineNumber = ({ count, theme }) => { + const style: any = { + color: theme === 'light' ? '#0074D9' : '#0074D9', + textAlign: 'right', + padding: '0 5px 0 20px', + }; + return ( +
+ {[...Array(count)].map((i, index) => { + return
{index + 1}
; + })} +
+ ); +}; + +export default LineNumber; diff --git a/packages/canyon-report/src/Report/loadcss.ts b/packages/canyon-report/src/Report/loadcss.ts index 9439d3f5..9c1c46ef 100755 --- a/packages/canyon-report/src/Report/loadcss.ts +++ b/packages/canyon-report/src/Report/loadcss.ts @@ -55,7 +55,7 @@ html,body{ } #canyon-report pre { - font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace; + // font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0; padding: 0; -moz-tab-size: 2; diff --git a/packages/canyon-report/src/main.tsx b/packages/canyon-report/src/main.tsx index 9457b872..94860558 100755 --- a/packages/canyon-report/src/main.tsx +++ b/packages/canyon-report/src/main.tsx @@ -27,7 +27,7 @@ const report = init(document.querySelector('#root') as any, { fileContent: getDecode(__filecontent__[path]), fileCodeChange:[1,2,3,4] }); - },1000) + },200) }); }, }); diff --git a/packages/canyon-report/vite.config.ts b/packages/canyon-report/vite.config.ts index fc6d1fad..edef0f3d 100755 --- a/packages/canyon-report/vite.config.ts +++ b/packages/canyon-report/vite.config.ts @@ -19,8 +19,7 @@ export default defineConfig({ lib: { entry: resolve(__dirname, 'src/index.ts'), fileName: 'canyon-report', - name: 'CanyonReport', - formats: ['es', 'cjs', 'umd'], + name: 'CanyonReport' }, }, });