feat: update readme

canyon-project · Nov 9, 2023 · 5afe09f · 5afe09f
1 parent 51987a1
commit 5afe09f
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 93 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,47 @@
 # Canyon [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/canyon-project/canyon/blob/main/LICENSE) [![build status](https://github.com/canyon-project/canyon/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/canyon-project/canyon/actions/workflows/ci.yml)
 
 👋 Canyon is a JavaScript code coverage solution
+
+![](./screenshots/overview1.jpg)
+
+### **Introduction**
+
+JavaScript 代码覆盖率解决方案。在前端工程构建阶段，将代码探针及工程信息插桩进产物中；在前端应用运行时，将内存中的覆盖率数据上报至服务端。支持覆盖率聚合、报告生成、新增行覆盖率。
+
+主要用于端到端的UI测试用例覆盖率数据收集(也支持node或者UT覆盖率上报收集)。
+
+### **Features**
+
+**Bundling:** 多种生态的bundling方案。
+
+- `vite` - vite-plugin-istanbul
+- `babel` - babel-plugin-istanbul
+- `swc` - swc-coverage-instrument
+
+**React Native:** 支持React Native覆盖率数据收集。
+
+**File:** 支持多种文件类型，例如js、jsx、ts、tsx。
+
+**源码回溯:** 开启sourceMap选项来回溯源码覆盖率信息。
+
+**CI** 提供覆盖率接口，方便CI工具集成。
+
+**变更代码:** 通过配置想要对比的基线Commit Sha或者分支名，过滤筛选出变更代码文件的覆盖率以及计算出整体新增代码行覆盖率。
+
+**Commit:** 使用oauth2登陆与github、gitlab等代码仓库链接，根据Commit Sha拉取代码进行覆盖率详情绘制。
+
+**聚合:** 根据上报的报告ID进行实时聚合覆盖率数据聚合。
+
+**报告组件:** 构建最小原生JavasScript的npm包，提供现代化前端报告水合方案以代替传统istanbul report。
+
+**浏览器插件:** 提供浏览器插件，供开发人员实时检测应用覆盖率详情。
+
+### Screenshots
+
+![报告](./screenshots/report1.jpg)
+
+![覆盖率](./screenshots/demo1.jpg)
+
+![新增行](./screenshots/codechange1.jpg)
+
+![配置](./screenshots/ci1.jpg)
diff --git a/packages/canyon-backend/package.json b/packages/canyon-backend/package.json
@@ -7,18 +7,8 @@
   "license": "UNLICENSED",
   "scripts": {
     "do-build": "nest build",
-    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
-    "start": "nest start",
     "do-dev": "nest start --watch",
     "dev-backend": "nest start --watch",
-    "start:debug": "nest start --debug --watch",
-    "start:prod": "node dist/main",
-    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:cov": "jest --coverage",
-    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
-    "test:e2e": "jest --config ./test/jest-e2e.json",
     "preinstall": "prisma generate && nest build",
     "do-migrate": "prisma migrate dev"
   },

diff --git a/packages/canyon-data/package.json b/packages/canyon-data/package.json
@@ -11,9 +11,8 @@
   ],
   "scripts": {
     "build:code": "vite build",
-    "build:decl": "echo hi",
-    "build": "pnpm run build:code && pnpm run build:decl",
-    "prepare": "pnpm run build:code && pnpm run build:decl",
+    "build": "pnpm run build:code",
+    "prepare": "pnpm run build:code",
     "do-test": "vitest run"
   },
   "devDependencies": {

diff --git a/packages/canyon-platform/README.md b/packages/canyon-platform/README.md
@@ -1,11 +1 @@
-Dashboard 接口名称
-
-getDashboardData
-
-```json
-{
-  "chartData": [],
-  "listData": [],
-  "gonggeData": []
-}
-```
+# canyon-platform
diff --git a/packages/canyon-report/README.md b/packages/canyon-report/README.md
@@ -7,65 +7,3 @@
 ```bash
 npm install canyon-report
 ```
-
-### Usage
-
-#### Simple usage
-
-
-在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head> 之后，添加：
-
-```html
-<body>
-  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
-  <div id="main" style="width: 600px;height:400px;"></div>
-</body>
-```
-
-下面是一个将 monaco 编辑器与 React 项目简单集成的示例。
-您只需导入并渲染编辑器组件即可：
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <title>ECharts</title>
-  <!-- 引入刚刚下载的 ECharts 文件 -->
-  <script src="canyon-report.js"></script>
-</head>
-<body>
-<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
-<div id="main" style="width: 600px;height:400px;"></div>
-<script type="text/javascript">
-  // 基于准备好的dom，初始化echarts实例
-  var myChart = echarts.init(document.getElementById('main'));
-
-  // 指定图表的配置项和数据
-  var option = {
-    title: {
-      text: 'ECharts 入门示例'
-    },
-    tooltip: {},
-    legend: {
-      data: ['销量']
-    },
-    xAxis: {
-      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
-    },
-    yAxis: {},
-    series: [
-      {
-        name: '销量',
-        type: 'bar',
-        data: [5, 20, 36, 10, 10, 20]
-      }
-    ]
-  };
-
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
-</script>
-</body>
-</html>
-```
diff --git a/packages/canyon-report/package.json b/packages/canyon-report/package.json
@@ -12,10 +12,8 @@
   "scripts": {
     "do-dev": "vite",
     "dev-report": "vite",
-    "build:code": "vite build",
-    "build:decl": "echo hi",
-    "build": "pnpm run build:code && pnpm run build:decl",
-    "prepare": "pnpm run build:code && pnpm run build:decl"
+    "build": "pnpm run build:code",
+    "prepare": "pnpm run build:code"
   },
   "dependencies": {
     "@canyon/data": "workspace:^",

diff --git a/packages/canyon-report/vite.config.ts b/packages/canyon-report/vite.config.ts
@@ -2,11 +2,10 @@ import preact from '@preact/preset-vite';
 import { resolve } from 'path';
 import * as path from 'path';
 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts'
+import dts from 'vite-plugin-dts';
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact(),dts()],
+  plugins: [preact(), dts()],
   resolve: {
     alias: {
       '@canyon/data': path.resolve('../canyon-data/src'),

diff --git a/screenshots/ci1.jpg b/screenshots/ci1.jpg
diff --git a/screenshots/codechange1.jpg b/screenshots/codechange1.jpg
diff --git a/screenshots/demo1.jpg b/screenshots/demo1.jpg
diff --git a/screenshots/overview1.jpg b/screenshots/overview1.jpg
diff --git a/screenshots/report1.jpg b/screenshots/report1.jpg