diff --git a/.gitignore b/.gitignore index 235495c4a3..e6c26dc825 100644 --- a/.gitignore +++ b/.gitignore @@ -24,6 +24,7 @@ coverage # Bundle visualizer stats.html +**/stats.html # Snapshots error images __tests__/integration/snapshots/**/*-actual.* @@ -36,5 +37,7 @@ site/.dumi/tmp-production # Editor .vscode -# Bundle analyzer -analyse.html + +# Other +!/src/lib +!/__tests__/unit/lib \ No newline at end of file diff --git a/__tests__/integration/snapshots/static/metrosLinkTrending.png b/__tests__/integration/snapshots/static/metrosLinkTrending.png index d2df62f855..227220d9a8 100644 Binary files a/__tests__/integration/snapshots/static/metrosLinkTrending.png and b/__tests__/integration/snapshots/static/metrosLinkTrending.png differ diff --git a/__tests__/integration/snapshots/static/windVectorWind.png b/__tests__/integration/snapshots/static/windVectorWind.png index 83abadbd2d..2583a68a1f 100644 Binary files a/__tests__/integration/snapshots/static/windVectorWind.png and b/__tests__/integration/snapshots/static/windVectorWind.png differ diff --git a/__tests__/integration/utils/renderSpec.ts b/__tests__/integration/utils/renderSpec.ts index 8a7e26b71c..5a277a2efd 100644 --- a/__tests__/integration/utils/renderSpec.ts +++ b/__tests__/integration/utils/renderSpec.ts @@ -1,6 +1,6 @@ import { Canvas } from '@antv/g'; import { createCanvas } from 'canvas'; -import { G2Context, G2Spec, createLibrary, render } from '../../../src'; +import { G2Context, G2Spec, stdlib, render } from '../../../src'; import { renderToMountedElement } from '../../utils/renderToMountedElement'; import { createNodeGCanvas } from './createNodeGCanvas'; @@ -15,7 +15,7 @@ export async function renderSpec( const renderFunction = mounted ? renderToMountedElement : render; const options = preprocess({ ...raw, width, height }); context.canvas = gCanvas; - context.library = createLibrary(); + context.library = stdlib(); context.createCanvas = () => { // The width attribute defaults to 300, and the height attribute defaults to 150. // @see https://stackoverflow.com/a/12019582 diff --git a/__tests__/main.ts b/__tests__/main.ts index e6812789f3..42c7d698d1 100644 --- a/__tests__/main.ts +++ b/__tests__/main.ts @@ -5,7 +5,7 @@ import { Plugin as ControlPlugin } from '@antv/g-plugin-control'; import { Plugin as ThreeDPlugin } from '@antv/g-plugin-3d'; import { Renderer as SVGRenderer } from '@antv/g-svg'; import { Renderer as WebGLRenderer } from '@antv/g-webgl'; -import { createLibrary, render } from '../src'; +import { stdlib, render } from '../src'; import { renderToMountedElement } from './utils/renderToMountedElement'; import * as statics from './plots/static'; import * as interactions from './plots/interaction'; @@ -169,7 +169,7 @@ function createSpecRender(object) { const node = renderChart( { theme: 'classic', ...options }, // @ts-ignore - { canvas, library: createLibrary() }, + { canvas, library: stdlib() }, () => after?.(), ); diff --git a/__tests__/treeshaking/main.ts b/__tests__/treeshaking/main.ts deleted file mode 100644 index e4fd8d76cc..0000000000 --- a/__tests__/treeshaking/main.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Chart } from '../../esm'; - -const chart = new Chart({ theme: 'classic', container: 'container' }); - -chart.data([ - { genre: 'Sports', sold: 275 }, - { genre: 'Strategy', sold: 115 }, - { genre: 'Action', sold: 120 }, - { genre: 'Shooter', sold: 350 }, - { genre: 'Other', sold: 150 }, -]); - -chart - .interval() - .encode('x', 'genre') - .encode('y', 'sold') - .encode('color', 'genre'); - -chart.render(); diff --git a/__tests__/unit/api/chart.spec.ts b/__tests__/unit/api/chart.spec.ts index 21ec000492..bc1d3b786c 100644 --- a/__tests__/unit/api/chart.spec.ts +++ b/__tests__/unit/api/chart.spec.ts @@ -1,6 +1,6 @@ import { Canvas } from '@antv/g'; import { Renderer as SVGRenderer } from '@antv/g-svg'; -import { Chart, createLibrary, ChartEvent } from '../../../src'; +import { Chart, stdlib, ChartEvent } from '../../../src'; const TEST_OPTIONS = { type: 'interval', @@ -344,7 +344,7 @@ describe('Chart', () => { const context = chart.getContext(); expect(context.canvas).toBeUndefined(); - expect(context.library).toEqual(createLibrary()); + expect(context.library).toEqual(stdlib()); chart.render(); expect(context.canvas).toBeInstanceOf(Canvas); }); diff --git a/__tests__/unit/lib/core.spec.ts b/__tests__/unit/lib/core.spec.ts new file mode 100644 index 0000000000..ab9cd6e04a --- /dev/null +++ b/__tests__/unit/lib/core.spec.ts @@ -0,0 +1,332 @@ +import { corelib } from '../../../src/lib'; +import { + Cartesian, + Polar, + Transpose, + Parallel, + Fisheye, + Helix, + Theta, + Radial, + Radar, +} from '../../../src/coordinate'; +import { Constant, Field, Transform, Column } from '../../../src/encode'; +import { + Interval, + Rect, + Line, + Point as PointGeometry, + Text as TextGeometry, + Cell, + Area as AreaGeometry, + Image as ImageGeometry, + Polygon as PolygonGeometry, + Box as BoxGeometry, + Vector as VectorGeometry, + Link as LinkGeometry, + LineX, + LineY, + Range, + RangeX, + RangeY, + Connector, + Path, + Shape, + Density, + Heatmap, +} from '../../../src/mark'; +import { Category10, Category20 } from '../../../src/palette'; +import { + Linear, + Ordinal, + Band, + Identity, + Point, + Time, + Log, + Pow, + Threshold, + Quantile, + Quantize, + Sqrt, + Sequential, + Constant as ConstantScale, +} from '../../../src/scale'; +import { Classic, ClassicDark, Academy } from '../../../src/theme'; +import { + AxisX, + AxisY, + AxisArc, + AxisLinear, + AxisRadar, + LegendCategory, + LegendContinuous, + LegendContinuousBlock, + LegendContinuousBlockSize, + LegendContinuousSize, + SliderX, + SliderY, + ScrollbarX, + ScrollbarY, + TitleComponent, + Legends, +} from '../../../src/component'; +import { + ScaleInX, + ScaleOutX, + ScaleInY, + ScaleOutY, + FadeIn, + FadeOut, + Morphing, + WaveIn, + ZoomIn, + ZoomOut, + PathIn, + GrowInX, + GrowInY, +} from '../../../src/animation'; +import { + ElementHighlight, + ElementHighlightByColor, + ElementHighlightByX, + ElementSelect, + ElementSelectByColor, + ElementSelectByX, + Fisheye as ChartFisheye, + ChartIndex, + Tooltip, + LegendFilter, + BrushXHighlight, + BrushYHighlight, + BrushHighlight, + BrushAxisHighlight, + BrushFilter, + BrushYFilter, + BrushXFilter, + SliderFilter, + ScrollbarFilter, + LegendHighlight, + Poptip, + Event, +} from '../../../src/interaction'; +import { + SpaceLayer, + SpaceFlex, + RepeatMatrix, + View, + FacetCircle, + FacetRect, + TimingKeyframe, + Mark, +} from '../../../src/composition'; +import { + StackY, + DodgeX, + StackEnter, + NormalizeY, + Jitter, + JitterX, + SymmetryY, + DiffY, + Select, + SelectX, + SelectY, + GroupX, + SortX, + FlexX, + SortColor, + SortY, + Group, + GroupY, + GroupColor, + Pack, + Bin, + BinX, + Sample, + Filter as FilterTransform, +} from '../../../src/transform'; +import { + Fetch, + SortBy, + Sort, + Filter, + Map, + Pick, + Rename, + Fold, + Slice, + Inline, + Custom, + Join, + KDE, +} from '../../../src/data'; +import { + OverflowHide, + ContrastReverse, + OverlapHide, + OverlapDodgeY, +} from '../../../src/label-transform'; +import { LabelShape } from '../../../src/shape'; + +describe('corelib', () => { + it('corelib() should returns expected basic marks and components.', () => { + expect(corelib()).toEqual({ + 'data.fetch': Fetch, + 'data.inline': Inline, + 'data.sortBy': SortBy, + 'data.sort': Sort, + 'data.filter': Filter, + 'data.pick': Pick, + 'data.rename': Rename, + 'data.fold': Fold, + 'data.slice': Slice, + 'data.custom': Custom, + 'data.map': Map, + 'data.join': Join, + 'data.kde': KDE, + 'transform.stackY': StackY, + 'transform.binX': BinX, + 'transform.bin': Bin, + 'transform.dodgeX': DodgeX, + 'transform.jitter': Jitter, + 'transform.jitterX': JitterX, + 'transform.symmetryY': SymmetryY, + 'transform.diffY': DiffY, + 'transform.stackEnter': StackEnter, + 'transform.normalizeY': NormalizeY, + 'transform.select': Select, + 'transform.selectX': SelectX, + 'transform.selectY': SelectY, + 'transform.groupX': GroupX, + 'transform.groupY': GroupY, + 'transform.groupColor': GroupColor, + 'transform.group': Group, + 'transform.sortX': SortX, + 'transform.sortY': SortY, + 'transform.sortColor': SortColor, + 'transform.flexX': FlexX, + 'transform.pack': Pack, + 'transform.sample': Sample, + 'transform.filter': FilterTransform, + 'coordinate.cartesian': Cartesian, + 'coordinate.polar': Polar, + 'coordinate.helix': Helix, + 'coordinate.transpose': Transpose, + 'coordinate.theta': Theta, + 'coordinate.parallel': Parallel, + 'coordinate.radar': Radar, + 'coordinate.fisheye': Fisheye, + 'coordinate.radial': Radial, + 'encode.constant': Constant, + 'encode.field': Field, + 'encode.transform': Transform, + 'encode.column': Column, + 'mark.interval': Interval, + 'mark.rect': Rect, + 'mark.line': Line, + 'mark.point': PointGeometry, + 'mark.text': TextGeometry, + 'mark.cell': Cell, + 'mark.area': AreaGeometry, + 'mark.link': LinkGeometry, + 'mark.image': ImageGeometry, + 'mark.polygon': PolygonGeometry, + 'mark.box': BoxGeometry, + 'mark.vector': VectorGeometry, + 'mark.lineX': LineX, + 'mark.lineY': LineY, + 'mark.connector': Connector, + 'mark.range': Range, + 'mark.rangeX': RangeX, + 'mark.rangeY': RangeY, + 'mark.path': Path, + 'mark.shape': Shape, + 'mark.density': Density, + 'mark.heatmap': Heatmap, + 'shape.label.label': LabelShape, + 'palette.category10': Category10, + 'palette.category20': Category20, + 'scale.linear': Linear, + 'scale.ordinal': Ordinal, + 'scale.band': Band, + 'scale.identity': Identity, + 'scale.point': Point, + 'scale.time': Time, + 'scale.log': Log, + 'scale.pow': Pow, + 'scale.sqrt': Sqrt, + 'scale.threshold': Threshold, + 'scale.quantile': Quantile, + 'scale.quantize': Quantize, + 'scale.sequential': Sequential, + 'scale.constant': ConstantScale, + 'theme.classic': Classic, + 'theme.classicDark': ClassicDark, + 'theme.academy': Academy, + 'component.axisX': AxisX, + 'component.axisY': AxisY, + 'component.axisArc': AxisArc, + 'component.axisLinear': AxisLinear, + 'component.axisRadar': AxisRadar, + 'component.legendCategory': LegendCategory, + 'component.legendContinuous': LegendContinuous, + 'component.legendContinuousBlock': LegendContinuousBlock, + 'component.legendContinuousBlockSize': LegendContinuousBlockSize, + 'component.legendContinuousSize': LegendContinuousSize, + 'component.legends': Legends, + 'component.title': TitleComponent, + 'component.sliderX': SliderX, + 'component.sliderY': SliderY, + 'component.scrollbarX': ScrollbarX, + 'component.scrollbarY': ScrollbarY, + 'animation.scaleInX': ScaleInX, + 'animation.scaleOutX': ScaleOutX, + 'animation.scaleInY': ScaleInY, + 'animation.scaleOutY': ScaleOutY, + 'animation.waveIn': WaveIn, + 'animation.fadeIn': FadeIn, + 'animation.fadeOut': FadeOut, + 'animation.zoomIn': ZoomIn, + 'animation.zoomOut': ZoomOut, + 'animation.pathIn': PathIn, + 'animation.morphing': Morphing, + 'animation.growInX': GrowInX, + 'animation.growInY': GrowInY, + 'interaction.elementHighlight': ElementHighlight, + 'interaction.elementHighlightByX': ElementHighlightByX, + 'interaction.elementHighlightByColor': ElementHighlightByColor, + 'interaction.elementSelect': ElementSelect, + 'interaction.elementSelectByX': ElementSelectByX, + 'interaction.elementSelectByColor': ElementSelectByColor, + 'interaction.fisheye': ChartFisheye, + 'interaction.chartIndex': ChartIndex, + 'interaction.tooltip': Tooltip, + 'interaction.legendFilter': LegendFilter, + 'interaction.legendHighlight': LegendHighlight, + 'interaction.brushXHighlight': BrushXHighlight, + 'interaction.brushYHighlight': BrushYHighlight, + 'interaction.brushHighlight': BrushHighlight, + 'interaction.brushAxisHighlight': BrushAxisHighlight, + 'interaction.brushYFilter': BrushYFilter, + 'interaction.brushXFilter': BrushXFilter, + 'interaction.brushFilter': BrushFilter, + 'interaction.sliderFilter': SliderFilter, + 'interaction.scrollbarFilter': ScrollbarFilter, + 'interaction.poptip': Poptip, + 'interaction.event': Event, + 'composition.spaceLayer': SpaceLayer, + 'composition.spaceFlex': SpaceFlex, + 'composition.mark': Mark, + 'composition.view': View, + 'composition.facetRect': FacetRect, + 'composition.repeatMatrix': RepeatMatrix, + 'composition.facetCircle': FacetCircle, + 'composition.timingKeyframe': TimingKeyframe, + 'labelTransform.overlapHide': OverlapHide, + 'labelTransform.overlapDodgeY': OverlapDodgeY, + 'labelTransform.overflowHide': OverflowHide, + 'labelTransform.contrastReverse': ContrastReverse, + }); + }); +}); diff --git a/__tests__/unit/lib/geo.spec.ts b/__tests__/unit/lib/geo.spec.ts new file mode 100644 index 0000000000..af82f6335b --- /dev/null +++ b/__tests__/unit/lib/geo.spec.ts @@ -0,0 +1,11 @@ +import { geolib } from '../../../src/lib'; +import { GeoView, GeoPath } from '../../../src/composition'; + +describe('geolib', () => { + it('geolib() should returns expected geo compoents.', () => { + expect(geolib()).toEqual({ + 'composition.geoView': GeoView, + 'composition.geoPath': GeoPath, + }); + }); +}); diff --git a/__tests__/unit/lib/graph.spec.ts b/__tests__/unit/lib/graph.spec.ts new file mode 100644 index 0000000000..84bd68c441 --- /dev/null +++ b/__tests__/unit/lib/graph.spec.ts @@ -0,0 +1,11 @@ +import { graphlib } from '../../../src/lib'; +import { ForceGraph, Tree } from '../../../src/mark'; + +describe('graphlib', () => { + it('graphlib() should returns expected graph components.', () => { + expect(graphlib()).toEqual({ + 'mark.forceGraph': ForceGraph, + 'mark.tree': Tree, + }); + }); +}); diff --git a/__tests__/unit/lib/plot.spec.ts b/__tests__/unit/lib/plot.spec.ts new file mode 100644 index 0000000000..51a9a69c2f --- /dev/null +++ b/__tests__/unit/lib/plot.spec.ts @@ -0,0 +1,26 @@ +import { plotlib } from '../../../src/lib'; +import { + Sankey, + Treemap, + Pack, + Boxplot, + WordCloud, + Gauge, +} from '../../../src/mark'; +import { Venn, Cluster, Arc } from '../../../src/data'; + +describe('plotlib', () => { + it('plotlib() should returns expected plot components.', () => { + expect(plotlib()).toEqual({ + 'data.venn': Venn, + 'data.cluster': Cluster, + 'data.arc': Arc, + 'mark.sankey': Sankey, + 'mark.treemap': Treemap, + 'mark.pack': Pack, + 'mark.boxplot': Boxplot, + 'mark.wordCloud': WordCloud, + 'mark.gauge': Gauge, + }); + }); +}); diff --git a/__tests__/unit/stdlib/index.spec.ts b/__tests__/unit/lib/std.spec.ts similarity index 95% rename from __tests__/unit/stdlib/index.spec.ts rename to __tests__/unit/lib/std.spec.ts index f99b628cb4..e3109719fc 100644 --- a/__tests__/unit/stdlib/index.spec.ts +++ b/__tests__/unit/lib/std.spec.ts @@ -1,4 +1,4 @@ -import { createLibrary } from '../../../src/stdlib'; +import { stdlib } from '../../../src/lib'; import { Cartesian, Polar, @@ -127,6 +127,8 @@ import { FacetRect, TimingKeyframe, Mark, + GeoView, + GeoPath, } from '../../../src/composition'; import { StackY, @@ -166,14 +168,11 @@ import { Slice, Inline, Custom, - Cluster, - Tree, - Sankey as SankeyTransform, - Arc as ArcTransform, - WordCloud, Join, KDE, Venn, + Cluster, + Arc, } from '../../../src/data'; import { OverflowHide, @@ -181,12 +180,11 @@ import { OverlapHide, OverlapDodgeY, } from '../../../src/label-transform'; -import { GeoView, GeoPath } from '../../../src/geo'; import { LabelShape } from '../../../src/shape'; describe('stdlib', () => { - it('createLibrary() should returns expected builtin', () => { - expect(createLibrary()).toEqual({ + it('stdlib() should returns expected all components.', () => { + expect(stdlib()).toEqual({ 'data.fetch': Fetch, 'data.inline': Inline, 'data.sortBy': SortBy, @@ -198,14 +196,11 @@ describe('stdlib', () => { 'data.slice': Slice, 'data.custom': Custom, 'data.map': Map, - 'data.cluster': Cluster, - 'data.tree': Tree, - 'data.sankey': SankeyTransform, - 'data.arc': ArcTransform, - 'data.wordCloud': WordCloud, 'data.join': Join, 'data.kde': KDE, 'data.venn': Venn, + 'data.cluster': Cluster, + 'data.arc': Arc, 'transform.stackY': StackY, 'transform.binX': BinX, 'transform.bin': Bin, diff --git a/package.json b/package.json index e5121d9329..605fad5646 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,6 @@ "test": "node --expose-gc --max-old-space-size=4096 --unhandled-rejections=strict node_modules/jest/bin/jest __tests__/ --coverage -i --logHeapUsage", "test:unit": "node --expose-gc --max-old-space-size=4096 --unhandled-rejections=strict node_modules/jest/bin/jest __tests__/unit/ --coverage -i --logHeapUsage", "test:integration": "node --expose-gc --max-old-space-size=4096 --unhandled-rejections=strict node_modules/jest/bin/jest __tests__/integration/ --coverage -i --logHeapUsage", - "test:treeshaking": "vite build -c ./__tests__/treeshaking/vite.config.js", "build:umd": "rimraf ./dist && rollup -c && npm run size", "build:cjs": "rimraf ./lib && tsc --module commonjs --outDir lib", "build:esm": "rimraf ./esm && tsc --module ESNext --outDir esm", @@ -32,9 +31,12 @@ "ci": "run-s lint test build", "prepublishOnly": "npm run ci", "prepare": "husky install", - "upload": "node scripts/uploadSnapshot.js", + "upload": "node scripts/upload/snapshot.js", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s" }, + "sideEffects": [ + "./src/index.ts" + ], "keywords": [ "antv", "g2", @@ -71,10 +73,10 @@ }, "devDependencies": { "@antv/data-set": "^0.11.8", + "@antv/g-plugin-3d": "^1.9.5", + "@antv/g-plugin-control": "^1.9.5", "@antv/g-plugin-rough-canvas-renderer": "^1.7.9", "@antv/g-plugin-rough-svg-renderer": "^1.7.9", - "@antv/g-plugin-control": "^1.9.5", - "@antv/g-plugin-3d": "^1.9.5", "@antv/g-svg": "^1.10.7", "@antv/g-webgl": "^1.9.8", "@commitlint/cli": "^11.0.0", @@ -119,7 +121,7 @@ "rollup-plugin-polyfill-node": "^0.8.0", "rollup-plugin-typescript": "^1.0.1", "rollup-plugin-uglify": "^6.0.4", - "rollup-plugin-visualizer": "^5.6.0", + "rollup-plugin-visualizer": "^5.9.2", "topojson": "^3.0.2", "ts-jest": "^26.5.1", "typescript": "^4.1.5", diff --git a/scripts/treeshaking/common/bar.js b/scripts/treeshaking/common/bar.js new file mode 100644 index 0000000000..d890653563 --- /dev/null +++ b/scripts/treeshaking/common/bar.js @@ -0,0 +1,18 @@ +export function bar(Chart) { + const chart = new Chart({ theme: 'classic', container: 'container' }); + + chart + .interval() + .data([ + { genre: 'Sports', sold: 275 }, + { genre: 'Strategy', sold: 115 }, + { genre: 'Action', sold: 120 }, + { genre: 'Shooter', sold: 350 }, + { genre: 'Other', sold: 150 }, + ]) + .encode('x', 'genre') + .encode('y', 'sold') + .encode('color', 'genre'); + + chart.render(); +} diff --git a/scripts/treeshaking/corelib/index.html b/scripts/treeshaking/corelib/index.html new file mode 100644 index 0000000000..1cf7cf580d --- /dev/null +++ b/scripts/treeshaking/corelib/index.html @@ -0,0 +1,12 @@ + + +
+ + +