dev-0213

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,
       }
     },

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",

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<IstanbulReportProps> = ({
             fileCoverage={fileCoverage}
             fileContent={fileContent}
             fileCodeChange={fileCodeChange}
+            theme={'dark'}
           />
         )
       )}

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 (
+    <div
+      style={{
+        display: 'flex',
+        fontSize: '12px',
+        lineHeight: '14px',
+        backgroundColor: theme === 'dark' ? '#1a1b26' : 'white',
+      }}
+    >
+      <LineNumber theme={theme} count={code.split('\n').length} />
+      <LineCoverage
+        theme={theme}
+        covers={lines.map((i) => {
+          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,
+            };
+          }
+        })}
+      />
+      <LineNew news={fileCodeChange} />
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};
+
+export default Code;

packages/canyon-report/src/Report/components/line/coverage.tsx

@@ -0,0 +1,53 @@
+// import { CSSProperties } from 'react';
+
+const LineCoverage = ({ covers, theme }) => {
+  return (
+    <div style={{ textAlign: 'right' }}>
+      {covers.map(({ covered, hits }, index) => {
+        if (covered === 'yes') {
+          return (
+            <div
+              key={index}
+              style={{
+                backgroundColor:
+                  theme === 'light' ? 'rgb(230,245,208)' : '#0A6640',
+                color: theme === 'light' ? 'rgba(0,0,0,0.5)' : '#eaeaea',
+                padding: '0 5px',
+              }}
+            >
+              {hits}x
+            </div>
+          );
+        } else if (covered === 'no') {
+          return (
+            <div
+              key={index}
+              style={{
+                backgroundColor:
+                  theme === 'light' ? 'rgb(252,225,229)' : '#7A5474',
+                color: theme === 'light' ? 'rgba(0,0,0,0.5)' : '#eaeaea',
+                padding: '0 5px',
+                height: '14px',
+              }}
+            ></div>
+          );
+        } else {
+          return (
+            <div
+              key={index}
+              style={{
+                backgroundColor:
+                  theme === 'light' ? 'rgb(234,234,234)' : 'rgb(45, 52, 54)',
+                color: theme === 'light' ? 'rgba(0,0,0,0.5)' : '#eaeaea',
+                padding: '0 5px',
+                height: '14px',
+              }}
+            ></div>
+          );
+        }
+      })}
+    </div>
+  );
+};
+
+export default LineCoverage;

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 (
+    <div style={{ width: '20px', textAlign: 'center' }}>
+      {[...Array(200)].map((line, index) => {
+        return (
+          <div style={{ height: '14px', color: 'green' }}>
+            {news.includes(index) ? '+' : ''}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default LineNew;

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 (
+    <div style={style}>
+      {[...Array(count)].map((i, index) => {
+        return <div key={index}>{index + 1}</div>;
+      })}
+    </div>
+  );
+};
+
+export default LineNumber;

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;

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)
     });
   },
 });

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'
     },
   },
 });