feat: add 3 bundle file (#5597)

* feat: add 3 bundle file * feat: export Chart class with libs extend * chore: fix ci * chore: update bundle config * chore: fix cr
antvis · Sep 27, 2023 · ba0c945 · ba0c945
1 parent b4c977f
commit ba0c945
Show file tree

Hide file tree

Showing 18 changed files with 211 additions and 137 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<G2Spec, typeof library> {}
+export interface CompositionNode extends CompositionAPI<typeof library> {}
+
+export { corelib, plotlib, graphlib, geolib, stdlib, threedlib };
diff --git a/bundle/g2.lite.ts 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<G2Spec, typeof library> {}
+export interface CompositionNode extends CompositionAPI<typeof library> {}
+
+export { corelib };
diff --git a/bundle/g2.std.ts 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<G2Spec, typeof library> {}
+export interface CompositionNode extends CompositionAPI<typeof library> {}
+
+export { corelib, plotlib, graphlib, geolib, stdlib };
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>UMD</title>
-    <script src="./dist/g2.min.js"></script>
+    <script src="./dist/g2.lite.min.js"></script>
   </head>
   <body>
     <div id="container"></div>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<Spec extends G2Spec = G2Spec> 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
@@ -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
@@ -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<G2Spec, typeof library> {}
+export interface CompositionNode extends CompositionAPI<typeof library> {}
diff --git 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
@@ -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;