fix: 修改版本依赖 & pattern & vis包体积工具 (#1609)

package.json

@@ -32,12 +32,14 @@
     "build-ci": "CI=true npm run build",
     "build-watch": "CI=true father build -w",
     "changelog": "generate-changelog",
+    "limit-size": "limit-size",
     "ci": "npm run lint && npm run build && npm run test",
     "clean": "lerna clean",
     "coverage": "jest --coverage",
     "dev": "npm run test-watch",
     "lint": "eslint ./",
     "lint-fix": "eslint --fix ./",
+    "bundle-viz": "cross-env BUNDLE_VIS=1 PACKAGE=f2 npm run build",
     "prettier": "prettier --write './packages/**/*.{ts,tsx}'",
     "publish": "npm run build && npm run test && lerna publish",
     "refresh": "lerna clean && yarn && lerna bootstrap",
@@ -70,16 +72,25 @@
     "@types/jest-image-snapshot": "^4.3.1",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
+    "rollup-plugin-visualizer": "^5.6.0",
     "canvas-to-buffer": "^1.1.1",
     "eslint": "^7.32.0",
     "father": "^2.30.0",
     "generate-changelog": "^1.8.0",
+    "cross-env": "^6.0.3",
     "jest": "^26.6.3",
     "jest-electron": "^0.1.12",
     "jest-image-snapshot": "^4.5.1",
     "lerna": "^3.22.1",
     "pre-commit": "^1.2.2",
     "ts-jest": "^26.4.4",
-    "typescript": "^4.1.3"
-  }
+    "typescript": "^4.1.3",
+    "limit-size": "^0.1.4"
+  },
+  "limit-size": [
+    {
+      "path": "packages/f2/dist/index.min.js",
+      "limit": "180 Kb",
+      "gzip": true
+    }]
 }

packages/f2/.fatherrc.js

@@ -1,3 +1,6 @@
+import { visualizer } from 'rollup-plugin-visualizer';
+const isBundleVis = !!process.env.BUNDLE_VIS;
+
 export default process.env.CI
   ? {}
   : {
@@ -16,4 +19,7 @@ export default process.env.CI
           umd: { name: 'F2JSXRuntime', file: 'jsx-runtime' },
         },
       },
+      extraRollupPlugins: [...(isBundleVis ? [visualizer()] : [])],
     };
+
+

packages/f2/package.json

@@ -33,7 +33,7 @@
   "dependencies": {
     "@antv/adjust": "~0.2.5",
     "@antv/event-emitter": "^0.1.2",
-    "@antv/f-engine": "~0.0.1",
+    "@antv/f-engine": "~0.0.2",
     "@antv/scale": "~0.3.3",
     "@antv/util": "~2.0.6",
     "@babel/runtime": "^7.12.5",

packages/f2/src/chart/index.ts

@@ -1,9 +1,8 @@
 import { JSX } from '../jsx/jsx-namespace';
 import { ScaleConfig } from '@antv/scale';
 import { each, findIndex, isArray } from '@antv/util';
-import { Component } from '@antv/f-engine';
 import equal from '../base/equal';
-import Layout from '../base/layout';
+import { Layout, Component } from '../index';
 import Coord from '../coord';
 import Children from '../children';
 // types

packages/f2/src/components/geometry/index.tsx

@@ -5,8 +5,8 @@ import { toTimeStamp } from '../../util/index';
 import { GeomType, GeometryProps, GeometryAdjust } from './interface';
 import AttrController from '../../controller/attr';
 import equal from '../../base/equal';
-import { AnimationCycle } from '../../canvas/animation/interface';
 import { Scale } from '@antv/scale';
+import { Types } from '@antv/f-engine';
 
 // 保留原始数据的字段
 const FIELD_ORIGIN = 'origin';
@@ -41,7 +41,7 @@ class Geometry<
   attrController: AttrController;
 
   // 动画配置
-  animation: AnimationCycle;
+  animation: Types.AnimationCycle;
 
   getDefaultCfg() {
     return {};

packages/f2/src/components/geometry/interface.ts

@@ -1,6 +1,6 @@
 import Chart from '../../chart';
 import Coord from '../../coord';
-import { AnimationCycle } from '../../canvas/animation/interface';
+import { Types } from '@antv/f-engine';
 import { SelectionProps } from './selection';
 
 export interface AttrRange {
@@ -40,6 +40,6 @@ export interface GeometryProps extends SelectionProps {
   coord?: Coord;
   startOnZero?: boolean;
   style?: Style;
-  animation?: AnimationCycle;
+  animation?: Types.AnimationCycle;
   [k: string]: any; // TODO
 }

packages/f2/src/components/treemap/treemapView.tsx

@@ -1,4 +1,4 @@
-import { jsx } from '../../jsx';
+import { jsx } from '../../index';
 
 export default (props) => {
   const { nodes, coord } = props;

packages/f2/src/controller/layout.ts

@@ -1,4 +1,4 @@
-import Layout from '../base/layout';
+import { Layout } from '../index';
 
 interface Style {
   left: number;

packages/f2/src/coord/base.ts

@@ -1,4 +1,4 @@
-import Layout from '../base/layout';
+import { Layout } from '../index';
 import { Range, Point, Option } from './types';
 import { isArray } from '@antv/util';
 

packages/f2/src/coord/types.ts

@@ -1,4 +1,4 @@
-import { LayoutProps } from '../base/layout';
+import { LayoutProps } from '../index';
 interface Point {
   x: number;
   y: number;

packages/f2/src/index.ts

@@ -1,11 +1,11 @@
 import type * as Types from './types'
 export { Types };
 
-import { CanvasRenderer, jsx as createElement, Timeline, Fragment, createRef, Component, Children, jsx, renderShape, JSX} from '@antv/f-engine'
+import { CanvasRenderer, jsx as createElement, Timeline, Fragment, createRef, Component, Children, jsx, Layout, LayoutProps, renderShape, JSX} from '@antv/f-engine'
 import  Canvas  from './canvas';
 import Chart from './chart';
 
 
 export * from './components';
 export { Fragment, createRef, jsx, JSX }
-export { Children, createElement, Component, Timeline, Canvas, Chart, renderShape, CanvasRenderer };
+export { Children, createElement, Component, Timeline, Canvas, Chart, Layout, LayoutProps, renderShape, CanvasRenderer };

packages/f2/test/base/component.test.tsx

@@ -71,10 +71,10 @@ describe('base/component', () => {
     );
 
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
 
     const newChildren = <StatedComponent />;
-    canvas.update({ children: newChildren });
+    await canvas.update({ children: newChildren });
 
     await delay(500);
     expect(mockCallback.mock.calls.length).toBe(1);

packages/f2/test/canvas/animation.test.tsx

@@ -22,7 +22,7 @@ describe('Canvas', () => {
                 clip: {
                   type: 'rect',
                   property: ['width'],
-                  duration: 100,
+                  duration: 1000,
                   attrs: {
                     x: 0,
                     y: 0,
@@ -54,10 +54,12 @@ describe('Canvas', () => {
                   return {
                     type: 'rect',
                     property: ['width'],
-                    duration: 100,
+                    duration: 1000,
                     attrs: {
-                      x: attrs.x,
-                      y: attrs.y,
+                      x: 0,
+                      y: 0,
+                      // x: attrs.x,
+                      // y: attrs.y,
                       height: attrs.height,
                     },
                     start: {
@@ -76,7 +78,7 @@ describe('Canvas', () => {
     );
 
     const canvas = new Canvas(props);
-    canvas.render();
+    await canvas.render();
 
     expect(clipFn.mock.calls[0][0]).toMatchObject({
       x: 60,