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 @@ + + + + + + G2: Bar(Core) + + +
+ + + diff --git a/scripts/treeshaking/corelib/main.js b/scripts/treeshaking/corelib/main.js new file mode 100644 index 0000000000..fd1cf9dc8e --- /dev/null +++ b/scripts/treeshaking/corelib/main.js @@ -0,0 +1,4 @@ +import { Runtime, extend, corelib } from '@antv/g2'; +import { bar } from '../common/bar'; + +bar(extend(Runtime, corelib())); diff --git a/scripts/treeshaking/index.html b/scripts/treeshaking/index.html new file mode 100644 index 0000000000..49498cf6da --- /dev/null +++ b/scripts/treeshaking/index.html @@ -0,0 +1,35 @@ + + + + + + G2: Overview + + +
+ + + diff --git a/scripts/treeshaking/litelib/index.html b/scripts/treeshaking/litelib/index.html new file mode 100644 index 0000000000..1cf7cf580d --- /dev/null +++ b/scripts/treeshaking/litelib/index.html @@ -0,0 +1,12 @@ + + + + + + G2: Bar(Core) + + +
+ + + diff --git a/scripts/treeshaking/litelib/main.js b/scripts/treeshaking/litelib/main.js new file mode 100644 index 0000000000..e7480ff15f --- /dev/null +++ b/scripts/treeshaking/litelib/main.js @@ -0,0 +1,9 @@ +import { Runtime, extend, litelib, Interval } from '@antv/g2'; +import { bar } from '../common/bar'; + +bar( + extend(Runtime, { + ...litelib(), + 'mark.interval': Interval, + }), +); diff --git a/scripts/treeshaking/package.json b/scripts/treeshaking/package.json new file mode 100644 index 0000000000..db1cc6fc09 --- /dev/null +++ b/scripts/treeshaking/package.json @@ -0,0 +1,23 @@ +{ + "name": "treeshaking", + "type": "module", + "private": true, + "description": "Test tree shaking for @antv/g2.", + "scripts": { + "start": "npm run build && node size.js && vite dev", + "build": "npm run build:litelib && npm run build:corelib && npm run build:stdlib", + "build:litelib": "vite build -c vite.config.litelib.js", + "build:corelib": "vite build -c vite.config.corelib.js", + "build:stdlib": "vite build -c vite.config.stdlib.js", + "dev:litelib": "vite dev -c vite.config.litelib.js", + "dev:corelib": "vite dev -c vite.config.corelib.js", + "dev:stdlib": "vite dev -c vite.config.stdlib.js" + }, + "dependencies": { + "@antv/g2": "file:../../" + }, + "devDependencies": { + "rollup-plugin-gzip": "^3.0.1", + "vite": "^4.4.9" + } +} diff --git a/scripts/treeshaking/size.js b/scripts/treeshaking/size.js new file mode 100644 index 0000000000..21c014a959 --- /dev/null +++ b/scripts/treeshaking/size.js @@ -0,0 +1,33 @@ +import * as path from 'path'; +import * as fs from 'fs'; + +const folders = [ + 'corelib/dist/assets/', + 'litelib/dist/assets', + 'stdlib/dist/assets', +]; + +const data = folders.flatMap((name) => { + const dirs = fs.readdirSync(name); + const raw = dirs.find( + (d) => d.startsWith('index') && d.split('.').pop() !== 'gz', + ); + const gzip = dirs.find( + (d) => d.startsWith('index') && d.split('.').pop() === 'gz', + ); + const lib = name.split('/')[0]; + return [ + { + lib, + size: fs.statSync(path.resolve(name, raw)).size, + type: 'raw', + }, + { + lib, + size: fs.statSync(path.resolve(name, gzip)).size, + type: 'gzip', + }, + ]; +}); + +fs.writeFileSync('./size.json', JSON.stringify(data), { encoding: 'utf-8' }); diff --git a/scripts/treeshaking/size.json b/scripts/treeshaking/size.json new file mode 100644 index 0000000000..bd1f17a1c1 --- /dev/null +++ b/scripts/treeshaking/size.json @@ -0,0 +1 @@ +[{"lib":"corelib","size":855619,"type":"raw"},{"lib":"corelib","size":252045,"type":"gzip"},{"lib":"litelib","size":707854,"type":"raw"},{"lib":"litelib","size":214453,"type":"gzip"},{"lib":"stdlib","size":957772,"type":"raw"},{"lib":"stdlib","size":288753,"type":"gzip"}] \ No newline at end of file diff --git a/__tests__/treeshaking/index.html b/scripts/treeshaking/stdlib/index.html similarity index 72% rename from __tests__/treeshaking/index.html rename to scripts/treeshaking/stdlib/index.html index 240f36cf70..1cd9ef4ce2 100644 --- a/__tests__/treeshaking/index.html +++ b/scripts/treeshaking/stdlib/index.html @@ -3,10 +3,10 @@ - G2: Preview + G2: Bar(Std)
- + diff --git a/scripts/treeshaking/stdlib/main.js b/scripts/treeshaking/stdlib/main.js new file mode 100644 index 0000000000..b23e78f95c --- /dev/null +++ b/scripts/treeshaking/stdlib/main.js @@ -0,0 +1,4 @@ +import { Runtime, extend, stdlib } from '@antv/g2'; +import { bar } from '../common/bar'; + +bar(extend(Runtime, stdlib())); diff --git a/scripts/treeshaking/vite.config.corelib.js b/scripts/treeshaking/vite.config.corelib.js new file mode 100644 index 0000000000..132c03b0af --- /dev/null +++ b/scripts/treeshaking/vite.config.corelib.js @@ -0,0 +1,19 @@ +import gzip from 'rollup-plugin-gzip'; +import { visualizer } from 'rollup-plugin-visualizer'; +import { defineConfig } from 'vite'; +import config from './vite.config.js'; + +export default defineConfig({ + ...config, + root: './corelib', + plugins: [ + visualizer({ + template: 'treemap', // or sunburst + open: true, + gzipSize: true, + brotliSize: true, + filename: './corelib/stats.html', // will be saved in project's root + }), + gzip(), + ], +}); diff --git a/scripts/treeshaking/vite.config.js b/scripts/treeshaking/vite.config.js new file mode 100644 index 0000000000..99896f706e --- /dev/null +++ b/scripts/treeshaking/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; + +export default defineConfig({ + server: { + port: 8081, + open: '/', + }, +}); diff --git a/scripts/treeshaking/vite.config.litelib.js b/scripts/treeshaking/vite.config.litelib.js new file mode 100644 index 0000000000..66810f6e80 --- /dev/null +++ b/scripts/treeshaking/vite.config.litelib.js @@ -0,0 +1,19 @@ +import { visualizer } from 'rollup-plugin-visualizer'; +import gzip from 'rollup-plugin-gzip'; +import { defineConfig } from 'vite'; +import config from './vite.config.js'; + +export default defineConfig({ + ...config, + root: './litelib', + plugins: [ + visualizer({ + template: 'treemap', // or sunburst + open: true, + gzipSize: true, + brotliSize: true, + filename: './litelib/stats.html', // will be saved in project's root + }), + gzip(), + ], +}); diff --git a/__tests__/treeshaking/vite.config.js b/scripts/treeshaking/vite.config.stdlib.js similarity index 58% rename from __tests__/treeshaking/vite.config.js rename to scripts/treeshaking/vite.config.stdlib.js index 6352988b81..a4a67b6c2f 100644 --- a/__tests__/treeshaking/vite.config.js +++ b/scripts/treeshaking/vite.config.stdlib.js @@ -1,19 +1,19 @@ -import { defineConfig } from 'vite'; +import gzip from 'rollup-plugin-gzip'; import { visualizer } from 'rollup-plugin-visualizer'; +import { defineConfig } from 'vite'; +import config from './vite.config.js'; export default defineConfig({ - root: './__tests__/treeshaking', - server: { - port: 8081, - open: '/', - }, + ...config, + root: './stdlib', plugins: [ visualizer({ template: 'treemap', // or sunburst open: true, gzipSize: true, brotliSize: true, - filename: 'analyse.html', // will be saved in project's root + filename: './stdlib/stats.html', // will be saved in project's root }), + gzip(), ], }); diff --git a/scripts/uploadSnapshot.js b/scripts/upload/snapshot.js similarity index 100% rename from scripts/uploadSnapshot.js rename to scripts/upload/snapshot.js diff --git a/src/api/index.ts b/src/api/index.ts index d2d1e8df35..0dd28777fc 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -2,3 +2,5 @@ export { Chart } from './chart'; export { MarkNode } from './mark'; export { CompositionNode } from './composition'; export { register } from './library'; +export { Runtime } from './runtime'; +export { extend } from './extend'; diff --git a/src/api/library.ts b/src/api/library.ts index f16083e12f..c5065a5601 100644 --- a/src/api/library.ts +++ b/src/api/library.ts @@ -1,7 +1,7 @@ -import { createLibrary } from '../stdlib'; +import { stdlib } from '../lib/std'; import { G2ComponentNamespaces, G2Component } from '../runtime'; -export const library = createLibrary(); +export const library = stdlib(); // @todo Warn if override existing key. export function register( diff --git a/src/geo/d3Projection.ts b/src/composition/d3Projection.ts similarity index 100% rename from src/geo/d3Projection.ts rename to src/composition/d3Projection.ts diff --git a/src/geo/geoPath.ts b/src/composition/geoPath.ts similarity index 100% rename from src/geo/geoPath.ts rename to src/composition/geoPath.ts diff --git a/src/geo/geoView.ts b/src/composition/geoView.ts similarity index 100% rename from src/geo/geoView.ts rename to src/composition/geoView.ts diff --git a/src/composition/index.ts b/src/composition/index.ts index 0a346d3bec..d9944e69bb 100644 --- a/src/composition/index.ts +++ b/src/composition/index.ts @@ -6,6 +6,8 @@ export { FacetRect } from './facetRect'; export { RepeatMatrix } from './repeatMatrix'; export { FacetCircle } from './facetCircle'; export { TimingKeyframe } from './timingKeyframe'; +export { GeoPath } from './geoPath'; +export { GeoView } from './geoView'; export type { SpaceLayerOptions } from './spaceLayer'; export type { SpaceFlexOptions } from './spaceFlex'; diff --git a/src/geo/index.ts b/src/geo/index.ts deleted file mode 100644 index c03891a54d..0000000000 --- a/src/geo/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { GeoView } from './geoView'; -import { GeoPath } from './geoPath'; - -export { GeoView, GeoPath }; - -export type { GeoViewOptions } from './geoView'; -export type { GeoPathOptions } from './geoPath'; - -export const geoLibrary = { - 'composition.geoView': GeoView, - 'composition.geoPath': GeoPath, -}; diff --git a/src/index.ts b/src/index.ts index 8690da220e..fe46b86196 100644 --- a/src/index.ts +++ b/src/index.ts @@ -15,12 +15,21 @@ export { AREA_CLASS_NAME, } from './runtime'; -export type { G2Context } from './runtime'; +export { corelib, stdlib, litelib } from './lib'; -export { createLibrary } from './stdlib'; +export * from './mark'; -export { Chart, MarkNode, CompositionNode, register } from './api'; +export { + Chart, + MarkNode, + CompositionNode, + register, + Runtime, + extend, +} from './api'; export { ChartEvent } from './utils/event'; +export type { G2Context } from './runtime'; + export * from './spec'; diff --git a/src/label-transform/overlapDodgeY.ts b/src/label-transform/overlapDodgeY.ts index 977f05b71a..b8f1364433 100644 --- a/src/label-transform/overlapDodgeY.ts +++ b/src/label-transform/overlapDodgeY.ts @@ -2,7 +2,6 @@ import { DisplayObject } from '@antv/g'; import { ascending } from 'd3-array'; import { OverlapDodgeYLabelTransform } from '../spec'; import { LabelTransformComponent as LLC } from '../runtime'; -import { defined } from '../utils/helper'; export type OverlapDodgeYOptions = Omit; diff --git a/src/stdlib/index.ts b/src/lib/core.ts similarity index 74% rename from src/stdlib/index.ts rename to src/lib/core.ts index a3451279ca..7bd3afcf8f 100644 --- a/src/stdlib/index.ts +++ b/src/lib/core.ts @@ -15,49 +15,41 @@ import { Interval, Rect, Line, - Point as PointGeometry, - Text as TextGeometry, - Area as AreaGeometry, - Image as ImageGeometry, - Polygon as PolygonGeometry, - Box as BoxGeometry, - Vector as VectorGeometry, - Link as LinkGeometry, + Point, + Text, + Area, + Image, + Polygon, + Box, + Vector, + Link, LineX, LineY, Connector, Range, RangeX, RangeY, - Sankey, Path, - Treemap, - Pack as PackGeometry, Shape, - Boxplot, - ForceGraph, - Tree as TreeGeometry, - WordCloud as WordCloudGeometry, - Density as DensityGeometry, - Gauge, + Density, Heatmap, } from '../mark'; import { Category10, Category20 } from '../palette'; import { - Linear, - Ordinal, - Band, - Identity, - Point, - Time, - Log, - Pow, - Threshold, - Quantile, - Quantize, - Sqrt, - Sequential, - Constant as ConstantScale, + Linear as ScaleLinear, + Ordinal as ScaleOrdinal, + Band as ScaleBand, + Identity as ScaleIdenity, + Point as ScalePoint, + Time as ScaleTime, + Log as ScaleLog, + Pow as ScalePow, + Threshold as ScaleThreshold, + Quantile as ScaleQuantile, + Quantize as ScaleQuantize, + Sqrt as ScaleSqrt, + Sequential as ScaleSequential, + Constant as ScaleConstant, } from '../scale'; import { Classic, ClassicDark, Academy } from '../theme'; import { @@ -154,25 +146,19 @@ import { Filter, } from '../transform'; import { - Fetch, - SortBy, + Fetch as DataFetch, + SortBy as DataSortBy, Filter as DataFilter, - Map, - Pick, - Rename, - Fold, - Slice, - Inline, - Custom, - Cluster, - Tree, - Sankey as SankeyTransform, - Arc as ArcTransform, - WordCloud, - Join, - Sort, - KDE, - Venn, + Map as DataMap, + Pick as DataPick, + Rename as DataRename, + Fold as DataFold, + Slice as DataSlice, + Inline as DataInline, + Custom as DataCustom, + Join as DataJoin, + Sort as DataSort, + KDE as DataKDE, } from '../data'; import { OverlapDodgeY, @@ -180,30 +166,23 @@ import { ContrastReverse, OverlapHide, } from '../label-transform'; -import { geoLibrary } from '../geo'; import { LabelShape } from '../shape'; -export function createLibrary() { +export function corelib() { return { - 'data.fetch': Fetch, - 'data.inline': Inline, - 'data.sortBy': SortBy, - 'data.sort': Sort, + 'data.fetch': DataFetch, + 'data.inline': DataInline, + 'data.sortBy': DataSortBy, + 'data.sort': DataSort, 'data.filter': DataFilter, - 'data.pick': Pick, - 'data.rename': Rename, - 'data.fold': Fold, - '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.pick': DataPick, + 'data.rename': DataRename, + 'data.fold': DataFold, + 'data.slice': DataSlice, + 'data.custom': DataCustom, + 'data.map': DataMap, + 'data.join': DataJoin, + 'data.kde': DataKDE, 'transform.stackY': StackY, 'transform.binX': BinX, 'transform.bin': Bin, @@ -244,50 +223,42 @@ export function createLibrary() { 'mark.interval': Interval, 'mark.rect': Rect, 'mark.line': Line, - 'mark.point': PointGeometry, - 'mark.text': TextGeometry, + 'mark.point': Point, + 'mark.text': Text, 'mark.cell': Cell, - 'mark.area': AreaGeometry, - 'mark.link': LinkGeometry, - 'mark.image': ImageGeometry, - 'mark.polygon': PolygonGeometry, - 'mark.box': BoxGeometry, - 'mark.vector': VectorGeometry, + 'mark.area': Area, + 'mark.link': Link, + 'mark.image': Image, + 'mark.polygon': Polygon, + 'mark.box': Box, + 'mark.vector': Vector, 'mark.lineX': LineX, 'mark.lineY': LineY, 'mark.connector': Connector, 'mark.range': Range, 'mark.rangeX': RangeX, 'mark.rangeY': RangeY, - 'mark.sankey': Sankey, 'mark.path': Path, - 'mark.treemap': Treemap, - 'mark.pack': PackGeometry, - 'mark.boxplot': Boxplot, 'mark.shape': Shape, - 'mark.forceGraph': ForceGraph, - 'mark.gauge': Gauge, - 'mark.tree': TreeGeometry, - 'mark.wordCloud': WordCloudGeometry, - 'mark.density': DensityGeometry, + '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, + 'scale.linear': ScaleLinear, + 'scale.ordinal': ScaleOrdinal, + 'scale.band': ScaleBand, + 'scale.identity': ScaleIdenity, + 'scale.point': ScalePoint, + 'scale.time': ScaleTime, + 'scale.log': ScaleLog, + 'scale.pow': ScalePow, + 'scale.sqrt': ScaleSqrt, + 'scale.threshold': ScaleThreshold, + 'scale.quantile': ScaleQuantile, + 'scale.quantize': ScaleQuantize, + 'scale.sequential': ScaleSequential, + 'scale.constant': ScaleConstant, 'theme.classic': Classic, 'theme.classicDark': ClassicDark, 'theme.academy': Academy, @@ -354,6 +325,5 @@ export function createLibrary() { 'labelTransform.overlapDodgeY': OverlapDodgeY, 'labelTransform.overflowHide': OverflowHide, 'labelTransform.contrastReverse': ContrastReverse, - ...geoLibrary, } as const; } diff --git a/src/lib/geo.ts b/src/lib/geo.ts new file mode 100644 index 0000000000..b5b6a094df --- /dev/null +++ b/src/lib/geo.ts @@ -0,0 +1,9 @@ +import { GeoView } from '../composition/geoView'; +import { GeoPath } from '../composition/geoPath'; + +export function geolib() { + return { + 'composition.geoView': GeoView, + 'composition.geoPath': GeoPath, + } as const; +} diff --git a/src/lib/graph.ts b/src/lib/graph.ts new file mode 100644 index 0000000000..d56c98fa1f --- /dev/null +++ b/src/lib/graph.ts @@ -0,0 +1,8 @@ +import { ForceGraph, Tree } from '../mark'; + +export function graphlib() { + return { + 'mark.forceGraph': ForceGraph, + 'mark.tree': Tree, + } as const; +} diff --git a/src/lib/index.ts b/src/lib/index.ts new file mode 100644 index 0000000000..6356b89857 --- /dev/null +++ b/src/lib/index.ts @@ -0,0 +1,6 @@ +export { corelib } from './core'; +export { geolib } from './geo'; +export { graphlib } from './graph'; +export { plotlib } from './plot'; +export { stdlib } from './std'; +export { litelib } from './lite'; diff --git a/src/lib/lite.ts b/src/lib/lite.ts new file mode 100644 index 0000000000..8fe4afe4bf --- /dev/null +++ b/src/lib/lite.ts @@ -0,0 +1,127 @@ +import { Cartesian } from '../coordinate'; +import { Constant, Field, Transform, Column } from '../encode'; +import { Interval } from '../mark'; +import { Category10, Category20 } from '../palette'; +import { + Linear as ScaleLinear, + Ordinal as ScaleOrdinal, + Band as ScaleBand, + Identity as ScaleIdenity, + Point as ScalePoint, + Time as ScaleTime, + Log as ScaleLog, + Pow as ScalePow, + Threshold as ScaleThreshold, + Quantile as ScaleQuantile, + Quantize as ScaleQuantize, + Sqrt as ScaleSqrt, + Sequential as ScaleSequential, + Constant as ScaleConstant, +} from '../scale'; +import { Classic } from '../theme'; +import { + AxisLinear, + AxisArc, + AxisX, + AxisY, + AxisRadar, + LegendCategory, + LegendContinuous, + LegendContinuousBlock, + LegendContinuousBlockSize, + LegendContinuousSize, + TitleComponent, + SliderX, + SliderY, + ScrollbarX, + ScrollbarY, + Legends, +} from '../component'; +import { + ScaleInX, + ScaleOutX, + ScaleInY, + ScaleOutY, + WaveIn, + FadeIn, + FadeOut, + Morphing, +} from '../animation'; +import { + Tooltip, + LegendFilter, + LegendHighlight, + SliderFilter, + Poptip, + Event, + ScrollbarFilter, +} from '../interaction'; +import { Mark, View } from '../composition'; +import { LabelShape } from '../shape'; +import { Inline } from '../data'; + +/** + * In test stage, don't use it. + */ +export function litelib() { + return { + 'data.inline': Inline, + 'coordinate.cartesian': Cartesian, + 'encode.constant': Constant, + 'encode.field': Field, + 'encode.transform': Transform, + 'encode.column': Column, + 'mark.interval': Interval, + 'shape.label.label': LabelShape, + 'palette.category10': Category10, + 'palette.category20': Category20, + 'scale.linear': ScaleLinear, + 'scale.ordinal': ScaleOrdinal, + 'scale.band': ScaleBand, + 'scale.identity': ScaleIdenity, + 'scale.point': ScalePoint, + 'scale.time': ScaleTime, + 'scale.log': ScaleLog, + 'scale.pow': ScalePow, + 'scale.sqrt': ScaleSqrt, + 'scale.threshold': ScaleThreshold, + 'scale.quantile': ScaleQuantile, + 'scale.quantize': ScaleQuantize, + 'scale.sequential': ScaleSequential, + 'scale.constant': ScaleConstant, + 'theme.classic': Classic, + 'component.axisX': AxisX, + 'component.axisY': AxisY, + 'component.axisRadar': AxisRadar, + 'component.axisLinear': AxisLinear, + 'component.axisArc': AxisArc, + '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.morphing': Morphing, + 'interaction.tooltip': Tooltip, + 'interaction.legendFilter': LegendFilter, + 'interaction.legendHighlight': LegendHighlight, + 'interaction.sliderFilter': SliderFilter, + 'interaction.scrollbarFilter': ScrollbarFilter, + 'interaction.poptip': Poptip, + 'interaction.event': Event, + 'composition.mark': Mark, + 'composition.view': View, + } as const; +} diff --git a/src/lib/plot.ts b/src/lib/plot.ts new file mode 100644 index 0000000000..e252f48cac --- /dev/null +++ b/src/lib/plot.ts @@ -0,0 +1,16 @@ +import { Sankey, Treemap, Pack, Boxplot, WordCloud, Gauge } from '../mark'; +import { Arc, Cluster, Venn } from '../data'; + +export function plotlib() { + return { + 'data.venn': Venn, + 'data.arc': Arc, + 'data.cluster': Cluster, + 'mark.sankey': Sankey, + 'mark.treemap': Treemap, + 'mark.boxplot': Boxplot, + 'mark.pack': Pack, + 'mark.gauge': Gauge, + 'mark.wordCloud': WordCloud, + } as const; +} diff --git a/src/lib/std.ts b/src/lib/std.ts new file mode 100644 index 0000000000..a1138b557a --- /dev/null +++ b/src/lib/std.ts @@ -0,0 +1,13 @@ +import { corelib } from './core'; +import { geolib } from './geo'; +import { graphlib } from './graph'; +import { plotlib } from './plot'; + +export function stdlib() { + return { + ...geolib(), + ...graphlib(), + ...plotlib(), + ...corelib(), + } as const; +}