Merge pull request #1994 from VisActor/feat/package-size

Feat/package size
VisActor · Jul 5, 2024 · d1b4d94 · d1b4d94
2 parents fbcaa1c + cb663df
commit d1b4d94
Show file tree

Hide file tree

Showing 87 changed files with 590 additions and 1,202 deletions.
diff --git a/common/changes/@visactor/vtable/feat-package-size_2024-07-01-07-08.json b/common/changes/@visactor/vtable/feat-package-size_2024-07-01-07-08.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "feat: optimize package size & add load on demand feature",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/docs/assets/guide/en/Load_on_Demand.md b/docs/assets/guide/en/Load_on_Demand.md
@@ -0,0 +1,38 @@
+# VTable on-demand loading
+
+By default, `ListTable`, `PivotTable` and `PivotChart` introduced from `@visactor/vtable` package contain all table-related components, which is a complete table component library.
+
+In order to meet the needs of package size optimization, VTable provides two types, `ListTableSimple` and `PivotTableSimple`, which are the most simplified lists and pivot tables, respectively. They only support text display and do not contain external components such as menus and titles. If you need some functions, you can load them on demand. The usage is as follows:
+
+```js
+// ListTableSimple, PivotTableSimple are the simplest list and pivot table components, which do not include cell types and any components other than text
+import {ListTableSimple, PivotTableSimple, registerTitle, registerTooltip} from '@visactor/vtable';
+
+// Register title component
+registerTitle();
+
+// Register tooltip component
+registerTooltip();
+```
+
+## Load functions on demand
+
+### Functional components
+
+* registerAxis: axis component
+* registerEmptyTip: empty prompt component
+* registerLegend: legend component
+* registerMenu: menu component
+* registerTitle: title component
+* registerTooltip: tooltip component
+
+### Cell type
+
+* registerChartCell: chart cell
+* registerCheckboxCell: checkbox cell
+* registerImageCell: Image cell
+* registerProgressBarCell: Progress bar cell
+* registerRadioCell: Radio button cell
+* registerSparkLineCell: Sparkline cell
+* registerTextCell: Text cell
+* registerVideoCell: Video cell
diff --git a/docs/assets/guide/menu.json b/docs/assets/guide/menu.json
@@ -551,6 +551,13 @@
         }
       ]
     },
+    {
+      "path": "Load_on_Demand",
+      "title": {
+        "zh": "按需加载",
+        "en": "Load on Demand"
+      }
+    },
     {
       "path": "search",
       "title": {

diff --git a/docs/assets/guide/zh/Load_on_Demand.md b/docs/assets/guide/zh/Load_on_Demand.md
@@ -0,0 +1,38 @@
+# VTable 按需加载
+
+默认从 `@visactor/vtable` 包中引入的 `ListTable` 、 `PivotTable` 和 `PivotChart` 包含所有的表格相关的组件，是一个完整的表格组件库。
+
+为了满足包体积优化的需求，VTable提供了 `ListTableSimple` 和 `PivotTableSimple` 两个类型，分别是最简化的列表和透视表，只支持文字类型的显示，不包含菜单、标题等外部组件。如果需要部分功能，可以进行按需加载，使用方法如下：
+
+```js
+// ListTableSimple, PivotTableSimple 是最简单的列表和透视表组件，不包除了文字之外的单元格类型和任何组件
+import {ListTableSimple, PivotTableSimple, registerTitle, registerTooltip} from '@visactor/vtable'; 
+
+// 注册标题组件
+registerTitle();
+
+// 注册tooltip组件
+registerTooltip();
+```
+
+## 按需加载功能
+
+### 功能组件
+
+* registerAxis: 坐标轴组件
+* registerEmptyTip: 空白提示组件
+* registerLegend: 图例组件
+* registerMenu: 菜单组件
+* registerTitle: 标题组件
+* registerTooltip: tooltip组件
+
+### 单元格类型
+
+* registerChartCell: 图表单元格
+* registerCheckboxCell: 复选框单元格
+* registerImageCell: 图片单元格
+* registerProgressBarCell: 进度条单元格
+* registerRadioCell: 单选框单元格
+* registerSparkLineCell: 迷你图单元格
+* registerTextCell: 文字单元格
+* registerVideoCell: 视频单元格
diff --git a/packages/vtable/__tests__/api/listTable-getCellRect.test.ts b/packages/vtable/__tests__/api/listTable-getCellRect.test.ts
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
 import records from '../data/marketsales.json';
-import { ListTable } from '../../src/ListTable';
+import { ListTable } from '../../src';
 import { createDiv } from '../dom';
 global.__VERSION__ = 'none';
 describe('listTable getCellRect test', () => {

diff --git a/packages/vtable/__tests__/api/listTable-getCellRelativePosition.test.ts b/packages/vtable/__tests__/api/listTable-getCellRelativePosition.test.ts
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
 import records from '../data/marketsales.json';
-import { ListTable } from '../../src/ListTable';
+import { ListTable } from '../../src';
 import { createDiv } from '../dom';
 global.__VERSION__ = 'none';
 describe('listTable getCellRect test', () => {

diff --git a/packages/vtable/__tests__/columns/listTable-cellType-function.test.ts b/packages/vtable/__tests__/columns/listTable-cellType-function.test.ts
@@ -1,6 +1,6 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
-import { ListTable } from '../../src/ListTable';
+import { ListTable } from '../../src';
 import { createDiv } from '../dom';
 global.__VERSION__ = 'none';
 describe('listTable-cellType-function init test', () => {

diff --git a/packages/vtable/__tests__/columns/listTable-cellType.test.ts b/packages/vtable/__tests__/columns/listTable-cellType.test.ts
@@ -1,6 +1,6 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
-import { ListTable } from '../../src/ListTable';
+import { ListTable } from '../../src';
 import { createDiv } from '../dom';
 global.__VERSION__ = 'none';
 describe('listTable-cellType init test', () => {

diff --git a/packages/vtable/__tests__/columns/listTable-checkbox.test.ts b/packages/vtable/__tests__/columns/listTable-checkbox.test.ts
@@ -1,6 +1,6 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
-import { ListTable } from '../../src/ListTable';
+import { ListTable } from '../../src';
 import { createDiv } from '../dom';
 global.__VERSION__ = 'none';
 describe('listTable-checkbox init test', () => {

diff --git a/packages/vtable/__tests__/columns/listTable-custom-layout.test.ts b/packages/vtable/__tests__/columns/listTable-custom-layout.test.ts
@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
-import { ListTable } from '../../src/ListTable';
+import { ListTable } from '../../src';
 import * as VTable from '../../src/index';
 import { createDiv } from '../dom';
 global.__VERSION__ = 'none';

diff --git a/packages/vtable/__tests__/columns/listTable-dragHeader.test.ts b/packages/vtable/__tests__/columns/listTable-dragHeader.test.ts
@@ -1,6 +1,6 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
-import { ListTable } from '../../src/ListTable';
+import { ListTable } from '../../src';
 import { createDiv } from '../dom';
 global.__VERSION__ = 'none';
 const generatePersons = count => {

diff --git a/packages/vtable/__tests__/components/listTable-menu.test.ts b/packages/vtable/__tests__/components/listTable-menu.test.ts
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
 import records from '../data/marketsales.json';
-import { ListTable } from '../../src/ListTable';
+import { ListTable } from '../../src';
 import { createDiv } from '../dom';
 global.__VERSION__ = 'none';
 describe('listTable-menu init test', () => {

diff --git a/packages/vtable/__tests__/components/listTable-title.test.ts b/packages/vtable/__tests__/components/listTable-title.test.ts
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
 import records from '../data/marketsales.json';
-import { ListTable } from '../../src/ListTable';
+import { ListTable } from '../../src';
 import { createDiv } from '../dom';
 global.__VERSION__ = 'none';
 describe('listTable-title init test', () => {

diff --git a/packages/vtable/__tests__/components/listTable-tooltip.test.ts b/packages/vtable/__tests__/components/listTable-tooltip.test.ts
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
 import records from '../data/marketsales.json';
-import { ListTable } from '../../src/ListTable';
+import { ListTable } from '../../src';
 import * as VTable from '../../src/index';
 import { createDiv } from '../dom';
 global.__VERSION__ = 'none';

diff --git a/packages/vtable/__tests__/edit/pivotTable.test.ts b/packages/vtable/__tests__/edit/pivotTable.test.ts
@@ -2,7 +2,7 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestPivotTable
 import records from '../data/marketsales.json';
-import { PivotTable } from '../../src/PivotTable';
+import { PivotTable } from '../../src';
 import { register } from '../../src';
 import { InputEditor } from '@visactor/vtable-editors';
 import { createDiv } from '../dom';

diff --git a/packages/vtable/__tests__/listTable-1W.test.ts b/packages/vtable/__tests__/listTable-1W.test.ts
@@ -1,6 +1,6 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
-import { ListTable } from '../src/ListTable';
+import { ListTable } from '../src';
 import * as VTable from '../src/index';
 import { createDiv } from './dom';
 global.__VERSION__ = 'none';

diff --git a/packages/vtable/__tests__/listTable.test.ts b/packages/vtable/__tests__/listTable.test.ts
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
 import records from './data/marketsales.json';
-import { ListTable } from '../src/ListTable';
+import { ListTable } from '../src';
 import { createDiv } from './dom';
 global.__VERSION__ = 'none';
 describe('listTable init test', () => {

diff --git a/packages/vtable/__tests__/options/listTable-api-with-frozen.test.ts b/packages/vtable/__tests__/options/listTable-api-with-frozen.test.ts
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
 import records from '../data/marketsales.json';
-import { ListTable } from '../../src/ListTable';
+import { ListTable } from '../../src';
 import { createDiv } from '../dom';
 global.__VERSION__ = 'none';
 describe('listTable init test', () => {

diff --git a/packages/vtable/__tests__/options/listTable-autoRowHeight.test.ts b/packages/vtable/__tests__/options/listTable-autoRowHeight.test.ts
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
 import records from '../data/marketsales.json';
-import { ListTable } from '../../src/ListTable';
+import { ListTable } from '../../src';
 import { createDiv, removeDom } from '../dom';
 global.__VERSION__ = 'none';
 describe('listTable-autoRowHeight init test', () => {

diff --git a/packages/vtable/__tests__/options/listTable-frozen.test.ts b/packages/vtable/__tests__/options/listTable-frozen.test.ts
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
 import records from '../data/marketsales.json';
-import { ListTable } from '../../src/ListTable';
+import { ListTable } from '../../src';
 import { createDiv } from '../dom';
 global.__VERSION__ = 'none';
 describe('listTable-frozen init test', () => {

diff --git a/packages/vtable/__tests__/options/listTable-sort.test.ts b/packages/vtable/__tests__/options/listTable-sort.test.ts
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestListTable
 import records from '../data/marketsales.json';
-import { ListTable } from '../../src/ListTable';
+import { ListTable } from '../../src';
 import { createDiv } from '../dom';
 global.__VERSION__ = 'none';
 describe('listTable init test', () => {

diff --git a/packages/vtable/__tests__/pivotTable-analysis.test.ts b/packages/vtable/__tests__/pivotTable-analysis.test.ts
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestPivotTable
 import records from './data/marketsales.json';
-import { PivotTable } from '../src/PivotTable';
+import { PivotTable } from '../src';
 import * as VTable from '../src/index';
 import { createDiv } from './dom';
 global.__VERSION__ = 'none';

diff --git a/packages/vtable/__tests__/pivotTable-tree.test.ts b/packages/vtable/__tests__/pivotTable-tree.test.ts
@@ -2,7 +2,7 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestPivotTable
 import records from './data/North_American_Superstore_pivot_extension_rows.json';
-import { PivotTable } from '../src/PivotTable';
+import { PivotTable } from '../src';
 import { createDiv } from './dom';
 global.__VERSION__ = 'none';
 describe('pivotTableTree init test', () => {

diff --git a/packages/vtable/__tests__/pivotTable.test.ts b/packages/vtable/__tests__/pivotTable.test.ts
@@ -2,7 +2,7 @@
 // @ts-nocheck
 // 有问题可对照demo unitTestPivotTable
 import records from './data/marketsales.json';
-import { PivotTable } from '../src/PivotTable';
+import { PivotTable } from '../src';
 import { createDiv } from './dom';
 global.__VERSION__ = 'none';
 describe('pivotTable init test', () => {

diff --git a/packages/vtable/package.json b/packages/vtable/package.json
@@ -19,7 +19,15 @@
     "url": "https://VisActor.io/"
   },
   "license": "MIT",
-  "sideEffects": true,
+  "sideEffects": [
+    "./src/ListTable-all.js",
+    "./src/ListTable-simple.js",
+    "./src/PivotTable-all.js",
+    "./src/PivotTable-simple.js",
+    "./src/PivotChart.js",
+    "./src/index.js",
+    "./src/scenegraph/scenegraph.js"
+  ],
   "main": "cjs/index.js",
   "module": "es/index.js",
   "types": "es/index.d.ts",
@@ -56,6 +64,7 @@
     "@visactor/vutils": "~0.18.9",
     "@visactor/vscale": "~0.18.1",
     "@visactor/vdataset": "~0.18.1",
+    "@visactor/vutils-extension": "~1.11.5",
     "cssfontparser": "^1.2.1"
   },
   "devDependencies": {
@@ -123,4 +132,4 @@
     "url": "https://github.com/VisActor/VTable.git",
     "directory": "packages/vtable"
   }
-}
+}
diff --git a/packages/vtable/src/ListTable-all.ts b/packages/vtable/src/ListTable-all.ts
@@ -0,0 +1,36 @@
+import { ListTable } from './ListTable';
+import {
+  registerAxis,
+  registerEmptyTip,
+  registerLegend,
+  registerMenu,
+  registerTitle,
+  registerTooltip
+} from './components';
+import {
+  registerChartCell,
+  registerCheckboxCell,
+  registerImageCell,
+  registerProgressBarCell,
+  registerRadioCell,
+  registerSparkLineCell,
+  registerTextCell,
+  registerVideoCell
+} from './scenegraph/group-creater/cell-type';
+
+registerAxis();
+registerEmptyTip();
+registerLegend();
+registerMenu();
+registerTitle();
+registerTooltip();
+
+registerChartCell();
+registerCheckboxCell();
+registerImageCell();
+registerProgressBarCell();
+registerRadioCell();
+registerSparkLineCell();
+registerTextCell();
+registerVideoCell();
+export class ListTableAll extends ListTable {}
diff --git a/packages/vtable/src/ListTable-simple.ts b/packages/vtable/src/ListTable-simple.ts
@@ -0,0 +1,5 @@
+import { ListTable } from './ListTable';
+import { registerTextCell } from './scenegraph/group-creater/cell-type';
+
+registerTextCell();
+export class ListTableSimple extends ListTable {}