diff --git a/__tests__/plots/api/chart-render.ts b/__tests__/plots/api/chart-render.ts index a2989de38b..3f538cc5ae 100644 --- a/__tests__/plots/api/chart-render.ts +++ b/__tests__/plots/api/chart-render.ts @@ -1,4 +1,4 @@ -import { Chart } from '../../../src/api'; +import { Chart } from '../../../src/'; export function chartRender(context) { const { container, canvas } = context; diff --git a/__tests__/plots/api/register-data-transform.ts b/__tests__/plots/api/register-data-transform.ts index b546d9463e..b00923d02a 100644 --- a/__tests__/plots/api/register-data-transform.ts +++ b/__tests__/plots/api/register-data-transform.ts @@ -1,4 +1,4 @@ -import { register, Chart } from '../../../src/api'; +import { register, Chart } from '../../../src'; export function registerDataTransform(context) { const { container, canvas } = context; diff --git a/__tests__/plots/api/register-shape.ts b/__tests__/plots/api/register-shape.ts index d6b72a97e0..b7985e7596 100644 --- a/__tests__/plots/api/register-shape.ts +++ b/__tests__/plots/api/register-shape.ts @@ -1,5 +1,5 @@ import { Polygon } from '@antv/g'; -import { register, Chart } from '../../../src/api'; +import { register, Chart } from '../../../src'; export function registerShape(context) { const { container, canvas } = context; diff --git a/__tests__/unit/lib/lib.spec.ts b/__tests__/unit/lib/lib.spec.ts index d8f076d678..9685a091e7 100644 --- a/__tests__/unit/lib/lib.spec.ts +++ b/__tests__/unit/lib/lib.spec.ts @@ -3,8 +3,8 @@ import { corelib, plotlib, geolib, - threedlib, graphlib, + threedlib, } from '../../../src'; describe('libs', () => { @@ -13,7 +13,7 @@ describe('libs', () => { expect(corelib).toBeDefined(); expect(plotlib).toBeDefined(); expect(geolib).toBeDefined(); - expect(threedlib).toBeDefined(); expect(graphlib).toBeDefined(); + expect(threedlib).toBeDefined(); }); }); diff --git a/bundle/g2.full.ts b/bundle/g2.full.ts new file mode 100644 index 0000000000..4594bfa891 --- /dev/null +++ b/bundle/g2.full.ts @@ -0,0 +1,24 @@ +import { + corelib, + plotlib, + graphlib, + geolib, + stdlib, + threedlib, +} from '../src/lib'; +import { extend, Runtime } from '../src/api'; +import { API, CompositionAPI } from '../src/api/extend'; +import { G2Spec } from '../src/spec'; + +export * from '../src/exports'; + +/** + * G2 full library initial all the libs, include 3D and auto. + */ +const library = { ...stdlib(), ...threedlib() }; + +export const Chart = extend(Runtime, library); +export interface Chart extends API {} +export interface CompositionNode extends CompositionAPI {} + +export { corelib, plotlib, graphlib, geolib, stdlib, threedlib }; diff --git a/bundle/g2.lite.ts b/bundle/g2.lite.ts new file mode 100644 index 0000000000..b97227d155 --- /dev/null +++ b/bundle/g2.lite.ts @@ -0,0 +1,17 @@ +import { corelib } from '../src/lib'; +import { extend, Runtime } from '../src/api'; +import { API, CompositionAPI } from '../src/api/extend'; +import { G2Spec } from '../src/spec'; + +export * from '../src/exports'; + +/** + * G2 lite library only initial `corelib` which contains basic marks. + */ +const library = { ...corelib() }; + +export const Chart = extend(Runtime, library); +export interface Chart extends API {} +export interface CompositionNode extends CompositionAPI {} + +export { corelib }; diff --git a/bundle/g2.std.ts b/bundle/g2.std.ts new file mode 100644 index 0000000000..e5542a8d9d --- /dev/null +++ b/bundle/g2.std.ts @@ -0,0 +1,24 @@ +import { + corelib, + plotlib, + graphlib, + geolib, + stdlib, + threedlib, +} from '../src/lib'; +import { extend, Runtime } from '../src/api'; +import { API, CompositionAPI } from '../src/api/extend'; +import { G2Spec } from '../src/spec'; + +export * from '../src/exports'; + +/** + * G2 standard library initial all the libs except 3D and auto. + */ +const library = { ...stdlib() }; + +export const Chart = extend(Runtime, library); +export interface Chart extends API {} +export interface CompositionNode extends CompositionAPI {} + +export { corelib, plotlib, graphlib, geolib, stdlib }; diff --git a/index.html b/index.html index 1a55a32f7d..4f518769d0 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ UMD - +
diff --git a/package.json b/package.json index ef74c848d0..bed4830b97 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,9 @@ "require": "./lib/index.js" } }, + "sideEffects": [ + "./esm/exports.js" + ], "files": [ "src", "lib", @@ -41,9 +44,6 @@ "upload": "node scripts/upload/snapshot.js", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s" }, - "sideEffects": [ - "./esm/index.js" - ], "keywords": [ "antv", "g2", @@ -146,17 +146,28 @@ "limit-size": [ { "path": "dist/g2.min.js", - "limit": "400 Kb", + "limit": "280 Kb", "gzip": true }, { "path": "dist/g2.min.js", - "limit": "1.5 Mb" + "limit": "950 Kb", + "gzip": false + }, + { + "path": "dist/g2.lite.min.js", + "limit": "240 Kb", + "gzip": true + }, + { + "path": "dist/g2.full.min.js", + "limit": "350 Kb", + "gzip": true } ], "author": { "name": "AntV", - "url": "https://antv.vision/" + "url": "https://antv.antgroup.com/" }, "repository": { "type": "git", diff --git a/rollup.config.js b/rollup.config.js index dd0aa3acdc..ed3e9a2de5 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -7,35 +7,38 @@ import typescript from 'rollup-plugin-typescript2'; const isBundleVis = !!process.env.BUNDLE_VIS; -export default { - input: 'src/index.ts', - output: [ - { - file: 'dist/g2.min.js', - name: 'G2', - format: 'umd', - sourcemap: false, - plugins: [isBundleVis && visualizer()], +const Bundles = [ + // [input, output, name] + ['bundle/g2.std.ts', 'dist/g2.min.js', 'G2'], + ['bundle/g2.lite.ts', 'dist/g2.lite.min.js', 'G2'], + ['bundle/g2.full.ts', 'dist/g2.full.min.js', 'G2'], +]; + +export default [ + // Bundle for G2 umd entries. + ...Bundles.map(([input, file, name], idx) => ({ + input, + treeshake: { + preset: 'smallest', }, - { - file: 'dist/g2-lite.min.js', - name: 'G2', - format: 'umd', - sourcemap: false, - globals: { - '@antv/g': 'window.G', - '@antv/g-canvas': 'window.G.Canvas2D', + output: [ + { + file, + name, + format: 'umd', + sourcemap: false, + plugins: [isBundleVis && idx === Bundles.length - 1 && visualizer()], }, - }, - ], - plugins: [ - nodePolyfills(), - resolve(), - commonjs(), - typescript({ - useTsconfigDeclarationDir: true, - }), - terser(), - ], - context: 'window', // Disable 'THIS_IS_UNDEFINED' warnings -}; + ], + plugins: [ + nodePolyfills(), + resolve(), + commonjs(), + typescript({ + useTsconfigDeclarationDir: true, + }), + terser(), + ], + context: 'window', // Disable 'THIS_IS_UNDEFINED' warnings + })) +]; diff --git a/src/api/chart.ts b/src/api/chart.ts index 54bea9cb12..1c7c74f982 100644 --- a/src/api/chart.ts +++ b/src/api/chart.ts @@ -1,4 +1,4 @@ -import { G2Spec } from '../spec'; +import type { G2Spec } from '../spec'; import { extend, API, CompositionAPI } from './extend'; import { library } from './library'; import { Runtime } from './runtime'; diff --git a/src/api/library.ts b/src/api/library.ts index c5065a5601..1bed1abc28 100644 --- a/src/api/library.ts +++ b/src/api/library.ts @@ -1,7 +1,6 @@ -import { stdlib } from '../lib/std'; import { G2ComponentNamespaces, G2Component } from '../runtime'; -export const library = stdlib(); +export const library = {}; // @todo Warn if override existing key. export function register( diff --git a/src/api/runtime.ts b/src/api/runtime.ts index 09c8d751f3..e0bdd2f98e 100644 --- a/src/api/runtime.ts +++ b/src/api/runtime.ts @@ -6,7 +6,7 @@ import EventEmitter from '@antv/event-emitter'; import { G2Context, render, destroy } from '../runtime'; import { G2Spec, ViewComposition } from '../spec'; import { ChartEvent } from '../utils/event'; -import { G2Library } from '../runtime/types/options'; +import type { G2Library } from '../runtime/types/options'; import { normalizeContainer, removeContainer, @@ -20,6 +20,7 @@ import { CompositionNode } from './composition'; import { Node } from './node'; import { defineProps, nodeProps } from './define'; import { MarkNode } from './mark'; +import { library } from './library'; export const G2_CHART_KEY = 'G2_CHART_KEY'; @@ -58,7 +59,11 @@ export class Runtime extends CompositionNode { this._plugins = plugins || []; this._container = normalizeContainer(container); this._emitter = new EventEmitter(); - this._context = { library: lib, emitter: this._emitter, canvas }; + this._context = { + library: { ...lib, ...library }, + emitter: this._emitter, + canvas, + }; this._create(); } diff --git a/src/exports.ts b/src/exports.ts new file mode 100644 index 0000000000..620359d9d2 --- /dev/null +++ b/src/exports.ts @@ -0,0 +1,32 @@ +import { runtime } from '@antv/g'; + +runtime.enableCSSParsing = false; + +export { + render, + renderToMountedElement, + MAIN_LAYER_CLASS_NAME, + LABEL_LAYER_CLASS_NAME, + ELEMENT_CLASS_NAME, + VIEW_CLASS_NAME, + PLOT_CLASS_NAME, + COMPONENT_CLASS_NAME, + LABEL_CLASS_NAME, + AREA_CLASS_NAME, + MASK_CLASS_NAME, +} from './runtime'; + +export { + type MarkNode, + type CompositionNode, + register, + Runtime, + extend, + type ChartOptions, +} from './api'; + +export { ChartEvent } from './utils/event'; + +export type { G2Context } from './runtime'; + +export * from './spec'; diff --git a/src/index.ts b/src/index.ts index b300c7e492..2ecc71da2a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,45 +1,17 @@ -import { runtime } from '@antv/g'; +import { corelib, plotlib, graphlib, geolib, stdlib, threedlib } from './lib'; +import { extend, Runtime } from './api'; +import { API, CompositionAPI } from './api/extend'; +import { G2Spec } from './spec'; -runtime.enableCSSParsing = false; +export { corelib, plotlib, graphlib, geolib, stdlib, threedlib }; -export { - render, - renderToMountedElement, - MAIN_LAYER_CLASS_NAME, - LABEL_LAYER_CLASS_NAME, - ELEMENT_CLASS_NAME, - VIEW_CLASS_NAME, - PLOT_CLASS_NAME, - COMPONENT_CLASS_NAME, - LABEL_CLASS_NAME, - AREA_CLASS_NAME, - MASK_CLASS_NAME, -} from './runtime'; +export * from './exports'; -export { - corelib, - stdlib, - litelib, - graphlib, - plotlib, - geolib, - threedlib, -} from './lib'; +/** + * G2 standard library initial all the libs except 3D and auto. + */ +const library = { ...stdlib() }; -export * from './mark'; - -export { - Chart, - type MarkNode, - type CompositionNode, - register, - Runtime, - extend, - type ChartOptions, -} from './api'; - -export { ChartEvent } from './utils/event'; - -export type { G2Context } from './runtime'; - -export * from './spec'; +export const Chart = extend(Runtime, library); +export interface Chart extends API {} +export interface CompositionNode extends CompositionAPI {} diff --git a/src/shape/index.ts b/src/shape/index.ts index 9dce519918..d65d258479 100644 --- a/src/shape/index.ts +++ b/src/shape/index.ts @@ -66,7 +66,7 @@ export { Liquid as LiquidShape } from './liquid/liquid'; export type { RectOptions as IntervalShapeOptions } from './interval/rect'; export type { HollowOptions as IntervalHollowOptions } from './interval/hollow'; export type { FunnelOptions as IntervalFunnelOptions } from './interval/funnel'; -export type { PyramidOptions as IntervalPyline3DramidOptions } from './interval/pyramid'; +export type { PyramidOptions as IntervalPyramidOptions } from './interval/pyramid'; export type { LineOptions as LineShapeOptions } from './line/line'; export type { SmoothOptions as LineSmoothOptions } from './line/smooth'; export type { HVOptions as LineHVOptions } from './line/hv'; diff --git a/src/spec/index.ts b/src/spec/index.ts index 1e7895d164..71ed5e793f 100644 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -1,6 +1,6 @@ -import { AxisComponent, LegendComponent } from './component'; -import { Composition } from './composition'; -import { Mark } from './mark'; +import type { AxisComponent, LegendComponent } from './component'; +import type { Composition } from './composition'; +import type { Mark } from './mark'; export type G2Spec = (Mark | Composition | AxisComponent | LegendComponent) & { width?: number; diff --git a/src/utils/event.ts b/src/utils/event.ts index d410dd976a..62bf3f4104 100644 --- a/src/utils/event.ts +++ b/src/utils/event.ts @@ -1,52 +1,39 @@ // to prevent users from tampering with internal values. -const ChartEvent = new Proxy( - { - BEFORE_RENDER: 'beforerender', - AFTER_RENDER: 'afterrender', +export const ChartEvent = { + BEFORE_RENDER: 'beforerender', + AFTER_RENDER: 'afterrender', - BEFORE_PAINT: 'beforepaint', - AFTER_PAINT: 'afterpaint', + BEFORE_PAINT: 'beforepaint', + AFTER_PAINT: 'afterpaint', - BEFORE_CHANGE_DATA: 'beforechangedata', - AFTER_CHANGE_DATA: 'afterchangedata', + BEFORE_CHANGE_DATA: 'beforechangedata', + AFTER_CHANGE_DATA: 'afterchangedata', - BEFORE_CLEAR: 'beforeclear', - AFTER_CLEAR: 'afterclear', + BEFORE_CLEAR: 'beforeclear', + AFTER_CLEAR: 'afterclear', - BEFORE_DESTROY: 'beforedestroy', - AFTER_DESTROY: 'afterdestroy', + BEFORE_DESTROY: 'beforedestroy', + AFTER_DESTROY: 'afterdestroy', - BEFORE_CHANGE_SIZE: 'beforechangesize', - AFTER_CHANGE_SIZE: 'afterchangesize', + BEFORE_CHANGE_SIZE: 'beforechangesize', + AFTER_CHANGE_SIZE: 'afterchangesize', - POINTER_TAP: 'pointertap', - POINTER_DOWN: 'pointerdown', - POINTER_UP: 'pointerup', - POINTER_OVER: 'pointerover', - POINTER_OUT: 'pointerout', - POINTER_MOVE: 'pointermove', - POINTER_ENTER: 'pointerenter', - POINTER_LEAVE: 'pointerleave', - POINTER_UPOUTSIDE: 'pointerupoutside', - DRAG_START: 'dragstart', - DRAG: 'drag', - DRAG_END: 'dragend', - DRAG_ENTER: 'dragenter', - DRAG_LEAVE: 'dragleave', - DRAG_OVER: 'dragover', - DROP: 'DROP', - CLICK: 'click', - DBLCLICK: 'dblclick', - } as const, - { - get(target, prop) { - if (prop in target) return target[prop]; - return undefined; - }, - set() { - return true; - }, - }, -); - -export { ChartEvent }; + POINTER_TAP: 'pointertap', + POINTER_DOWN: 'pointerdown', + POINTER_UP: 'pointerup', + POINTER_OVER: 'pointerover', + POINTER_OUT: 'pointerout', + POINTER_MOVE: 'pointermove', + POINTER_ENTER: 'pointerenter', + POINTER_LEAVE: 'pointerleave', + POINTER_UPOUTSIDE: 'pointerupoutside', + DRAG_START: 'dragstart', + DRAG: 'drag', + DRAG_END: 'dragend', + DRAG_ENTER: 'dragenter', + DRAG_LEAVE: 'dragleave', + DRAG_OVER: 'dragover', + DROP: 'DROP', + CLICK: 'click', + DBLCLICK: 'dblclick', +};