feat: 新增 vio.object.createTable()

.github/workflows/publish.yaml

@@ -10,7 +10,8 @@ permissions:
 env:
  PKG_NAME: npm-package
 jobs:
- build:
+ prepare:
+ if: ${{github.repository_owner == 'asnowc'}}
  runs-on: ubuntu-latest
  outputs:
  version: ${{fromJson(env.PACKAGE_JSON).version}}
@@ -54,7 +55,7 @@ jobs:
  path: vio/assets/
  retention-days: 7
  publish-npm:
- needs: build
+ needs: prepare
  runs-on: ubuntu-latest
  steps:
  - name: Download
@@ -75,7 +76,7 @@ jobs:
 
  publish-jsr:
  runs-on: ubuntu-latest
- needs: build
+ needs: prepare
  steps:
  - name: Checkout
  uses: actions/checkout@v4

.github/workflows/test.yaml

@@ -1,10 +1,11 @@
-name: Test
+name: Unit Test
 on:
  push:
  branches:
  - main
- - feat/*
+ - dev
  - test/*
+ - feat/*
 jobs:
  test:
  runs-on: ubuntu-latest
@@ -19,8 +20,24 @@ jobs:
  run_install: true
  - name: Unit test
  run: pnpm run ci:test
+ - name: Type check
+ run: pnpm run type-check
+ e2e:
+ needs: test
+ if: ${{!startsWith(github.ref_name,'feat/')}}
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4
+ - name: Setup NodeJS
+ uses: asnowc/actions@setup-node/v2
+ with:
+ node_v: 22
+ pnpm_v: 9
+ run_install: true
  - name: Build
  run: pnpm run -r ci:build
+
  - name: Install browser
  run: pnpm playwright install chromium webkit firefox --with-deps
  working-directory: ./e2e
@@ -36,4 +53,4 @@ jobs:
  path: e2e/playwright-report/
  - name: Result
  if: ${{steps.e2e.outcome=='failure'}}
- run: exit 1
+ run: exit

.vscode/settings.json

@@ -1,7 +1,5 @@
 {
- "deno.enable": true,
- "deno.config": "./vio/deno.json",
- "deno.enablePaths": ["./scripts", "./vio/src/mod_deno.ts"],
+ "deno.enablePaths": ["./scripts", "./vio/src/mod.deno.ts"],
  "cSpell.words": ["asla", "cpcall", "dockview", "echarts"],
  "code-runner.executorMap": {
  "javascript": "node",

CHANGELOG.md

@@ -1,4 +1,28 @@
-### 0.1.x
+## 0.x
+
+#### 0.2.0
+
+##### API
+
+feat: 新增 VioHttpServerOption.frontendConfig 选项，可以直接更改前端配置
+feat: 新增 VioHttpServerOption.rpcAuthenticate 选项，可对RPC连接鉴权
+feat: VioHttpServerOption 废弃 staticHandler，改为 requestHandler
+
+feat: ChartCreateOption 新增 name、updateThrottle、onRequestUpdate选项
+feat!: 废弃 vio.chart, 请使用 vio.object 代替
+feat!: 新增 `vio.object.createTable()`
+
+fix: http server 关闭连接应断开所有http连接
+
+refactor!: RPC 接口更改
+
+BREAKING CHANGE: 删除导出 ChartCenter
+BREAKING CHANGE: 删除导出 FileData 请使用 VioFileData 代替
+BREAKING CHANGE: `VioChart.onRequestUpdate()` 改为 `VioChart.requestUpdate()`
+
+##### WEB
+
+feat: chart 面板 tab 标签的标题显示未 VioChart.name
 
 #### 0.1.1
 

README.md

@@ -16,7 +16,7 @@
 
 ## Web 终端
 
-提供各种图形化的控件。在浏览器中与进程进行交互
+提供各种图形化的控件。通过基于 WebSocket 的 RPC ([cpcall](https://github.com/asnowc/cpcall)) 通信，在浏览器中与进程进行交互
 
 <img src="https://github.com/asnowc/vio/raw/main/docs/img/vio.png"/>
 
@@ -34,8 +34,8 @@ import vio, { VioHttpServer } from "@asla/vio";
 
 ### 权限
 
-- --allow-net：启动 web 服务器
-- --allow-read：web 服务器读取文件
+- `--allow-net`：启动 web 服务器
+- `--allow-read`：web 服务器读取文件
 
 ```ts
 import vio, { VioHttpServer } from "jsr:@asla/vio";
@@ -64,5 +64,5 @@ setInterval(() => {
 
 在浏览器访问 https://127.0.0.1:8887，你看到的就是 vio 的 WEB 终端。你可以与其进行交互
 
-[输出图表的示例](https://github.com/asnowc/vio/blob/main/docs/usage/chart.md)
+[输出图表的示例](https://github.com/asnowc/vio/blob/main/docs/usage/chart.md)\
 [WEB终端 输出与输入示例](https://github.com/asnowc/vio/blob/main/docs/usage/tty.md)

docs/usage/chart.md

@@ -12,7 +12,7 @@ function getMemoryChartData() {
  return [data.external, data.heapUsed, data.heapTotal, data.rss]; // 应与 indexNames 对应
 }
 
-const chart = vio.chart.create(2, {
+const chart = vio.object.create(2, {
  meta: {
  chartType: "line", //折线图
  title: "内存", // 图表标题
@@ -24,15 +24,15 @@ const chart = vio.chart.create(2, {
 setInterval(() => {
  chart.updateData(getMemoryChartData()); // 每秒更新一次图的数据
 }, 1000);
-vio.chart.dispose(chart); // 如果不再使用，应销毁
+vio.object.dispose(chart); // 如果不再使用，应销毁
 ```
 
 #### 被动更新
 
 有时候，我们不想在没有连接的时候去更新图的数据，因为获取图的数据可能是非常耗费性能的，我们可以让客户端决定何时更新图的数据
 
 ```ts
-const chart = vio.chart.create(2, {
+const chart = vio.object.create(2, {
  meta: {
  chartType: "line",
  title: "内存",
@@ -81,7 +81,7 @@ const dimensions = {
  indexNames: ["external", "heapUsed", "heapTotal", "rss"],
  },
 };
-const chart = vio.chart.create(2, {
+const chart = vio.object.create(2, {
  meta,
  dimensions: dimensions, //设置 维度信息
 });

e2e/test/chart/chart.spec.ts

@@ -8,12 +8,15 @@ beforeEach(async ({ appPage, vioServerInfo: { visitUrl } }) => {
 });
 test("二维折线图更新", async function ({ vioServerInfo: { vio }, appPage: page }) {
  const maxDiffPixelRatio = 0.02;
- const chart = vio.chart.create(2, { meta: { chartType: "line", enableTimeline: true, title: "图测试1" } });
+ const chart = vio.object.createChart(2, {
+ name: "图测试1",
+ meta: { chartType: "line", enableTimeline: true, title: "图测试1" },
+ });
  chart.updateData([2, 8]);
  chart.updateData([12, 3]);
 
  await page.getByLabel("dashboard").locator("svg").click();
- await page.getByRole("button", { name: "line-chart 图测试1" }).click(); // 打开面板
+ await page.getByRole("button", { name: chart.name }).click(); // 打开面板
  const chartPanel = page.locator(`.${E2E_SELECT_CLASS.panels.chart}`);
  await expect(chartPanel.count(), "面板已打开").resolves.toBe(1);
 
@@ -35,17 +38,23 @@ test("创建与删除图", async function ({ vioServerInfo: { vio }, appPage: pa
 
  await page.getByLabel("dashboard").locator("svg").click();
 
- const chart1 = vio.chart.create(2, { meta: { chartType: "bar", title: "abc图1", requestInterval: 1234 } });
+ const chart1 = vio.object.createChart(2, {
+ name: "abc图1",
+ meta: { chartType: "bar", title: "abc图1", requestInterval: 1234 },
+ });
 
  await page.getByRole("button", { name: chart1.meta.title! }).click(); // 打开面板
  await expect(chartPanel.count(), "图1面板已打开").resolves.toBe(1);
 
- const chart2 = vio.chart.create(1, { meta: { chartType: "gauge", title: "abc图2", requestInterval: 8769 } });
- await page.getByRole("button", { name: chart2.meta.title! }).click(); // 打开面板
+ const chart2 = vio.object.createChart(1, {
+ name: "abc图2",
+ meta: { chartType: "gauge", title: "abc图2", requestInterval: 8769 },
+ });
+ await page.getByRole("button", { name: chart2.name! }).click(); // 打开面板
  await page.getByRole("button", { name: "setting" }).click(); //打开设置面板
  await expect(page.getByLabel("自动请求更新间隔")).toHaveValue(chart2.meta.requestInterval!.toString()); //通过 requestInterval 判读面板属于 chart2
 
- vio.chart.disposeChart(chart1);
+ vio.object.disposeObject(chart1);
  await afterTime(100);
  await expect(page.getByRole("button", { name: chart1.meta.title! }).count(), "侧栏统计已被删除").resolves.toBe(0);
 });

package.json

@@ -4,6 +4,7 @@
  "ci:build": "pnpm run -r ci:build",
  "ci:test": "vitest run",
  "ci:check-api": "pnpm run -r ci:api-check",
+ "type-check": "pnpm run -r type-check",
  "test:coverage": "vitest --coverage --ui"
  },
  "keywords": [],