refactor: change widget to plugin (#5490)

* refactor: rename widget to plugin

* refactor: change module to extension

packages/g6/__tests__/demo/case/common-graph.ts

@@ -13,7 +13,7 @@ export const commonGraph: STDTestCase = async (context) => {
     },
     layout: { type: 'd3force' },
     behaviors: ['zoom-canvas', 'drag-canvas'],
-    widgets: [],
+    plugins: [],
   });
 
   await graph.render();

packages/g6/__tests__/demo/case/viewport-fit.ts

@@ -19,7 +19,7 @@ export const viewportFit: STDTestCase = async (context) => {
       },
     },
     behaviors: ['zoom-canvas', 'drag-canvas'],
-    widgets: [],
+    plugins: [],
   });
 
   await graph.render();

packages/g6/__tests__/unit/behaviors/behavior-zoom-canvas.spec.ts

@@ -113,7 +113,7 @@ describe('behavior zoom canvas', () => {
         if (typeof behavior === 'object') {
           return {
             ...behavior,
-            enable: (event) => event.targetType === 'canvas',
+            enable: (event: any) => event.targetType === 'canvas',
           };
         }
         return behavior;

packages/g6/__tests__/unit/registry.spec.ts

@@ -13,32 +13,32 @@ import {
   Star,
   Triangle,
 } from '@/src/elements';
-import { getPlugin, getPlugins, register } from '@/src/registry';
+import { getExtension, getExtensions, register } from '@/src/registry';
 import { dark, light } from '@/src/themes';
 import { pick } from '@antv/util';
 
 describe('registry', () => {
   it('registerBuiltInPlugins', () => {
-    expect(getPlugins('node')).toEqual({
+    expect(getExtensions('node')).toEqual({
       circle: Circle,
       ellipse: Ellipse,
       image: Image,
       rect: Rect,
       star: Star,
       triangle: Triangle,
     });
-    expect(getPlugins('edge')).toEqual({
+    expect(getExtensions('edge')).toEqual({
       cubic: Cubic,
       line: Line,
       polyline: Polyline,
       quadratic: Quadratic,
       'cubic-horizontal': CubicHorizontal,
       'cubic-vertical': CubicVertical,
     });
-    expect(getPlugins('combo')).toEqual({
+    expect(getExtensions('combo')).toEqual({
       circle: CircleCombo,
     });
-    expect(getPlugins('theme')).toEqual({
+    expect(getExtensions('theme')).toEqual({
       dark,
       light,
     });
@@ -51,19 +51,19 @@ describe('registry', () => {
     register('node', 'circle-node', CircleNode as any);
     register('node', 'rect-node', RectNode as any);
     register('edge', 'line-edge', Edge as any);
-    expect(getPlugin('node', 'circle-node')).toEqual(CircleNode);
-    expect(getPlugin('node', 'rect-node')).toEqual(RectNode);
-    expect(getPlugin('node', 'diamond-node')).toEqual(undefined);
-    expect(getPlugin('edge', 'line-edge')).toEqual(Edge);
+    expect(getExtension('node', 'circle-node')).toEqual(CircleNode);
+    expect(getExtension('node', 'rect-node')).toEqual(RectNode);
+    expect(getExtension('node', 'diamond-node')).toEqual(undefined);
+    expect(getExtension('edge', 'line-edge')).toEqual(Edge);
 
     const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
 
     register('node', 'circle-node', CircleNode as any);
-    expect(consoleErrorSpy.mock.calls[0][0]).toBe('The plugin circle-node of node has been registered before.');
+    expect(consoleErrorSpy.mock.calls[0][0]).toBe('The extension circle-node of node has been registered before.');
 
     consoleErrorSpy.mockRestore();
 
-    expect(pick(getPlugins('node'), ['circle-node', 'rect-node'])).toEqual({
+    expect(pick(getExtensions('node'), ['circle-node', 'rect-node'])).toEqual({
       'circle-node': CircleNode,
       'rect-node': RectNode,
     });

packages/g6/__tests__/unit/runtime/graph/graph.spec.ts

@@ -64,9 +64,9 @@ describe('Graph', () => {
 
   it('getWidgets/setWidgets', () => {
     expect(graph.getWidgets()).toEqual([]);
-    graph.setWidgets([{ type: 'test' }]);
+    graph.setPlugins([{ type: 'test' }]);
     expect(graph.getWidgets()).toEqual([{ type: 'test' }]);
-    graph.setWidgets([]);
+    graph.setPlugins([]);
   });
 
   it('updateData/getData/setData', () => {

packages/g6/__tests__/unit/spec/index.spec.ts

@@ -53,7 +53,7 @@ describe('spec', () => {
       },
       theme: 'light',
       behaviors: ['drag-canvas', 'my-behavior', { type: 'drag-node' }],
-      widgets: ['my-widget', { type: 'another-widget', text: 'text', value: 1 }],
+      plugins: ['my-plugin', { type: 'another-plugin', text: 'text', value: 1 }],
     };
 
     expect(options).toBeTruthy();

packages/g6/__tests__/unit/spec/plugin.spec.ts

@@ -0,0 +1,9 @@
+import type { PluginOptions } from '@/src';
+
+describe('spec plugin', () => {
+  it('plugin', () => {
+    const plugin: PluginOptions = ['minimap', { type: 'unset', key: '1' }];
+
+    expect(plugin).toBeTruthy();
+  });
+});

packages/g6/__tests__/unit/utils/module.spec.ts → packages/g6/__tests__/unit/utils/extension.spec.ts

@@ -1,9 +1,9 @@
-import { BehaviorOptions, WidgetOptions } from '@/src';
-import { parseModules } from '@/src/utils/module';
+import { BehaviorOptions, PluginOptions } from '@/src';
+import { parseExtensions } from '@/src/utils/extension';
 
-describe('module', () => {
-  it('parse behavior module', () => {
-    expect(parseModules('behavior', [])).toEqual([]);
+describe('extension', () => {
+  it('parseBehaviors', () => {
+    expect(parseExtensions('behavior', [])).toEqual([]);
 
     const options: BehaviorOptions = [
       'drag-node',
@@ -14,7 +14,7 @@ describe('module', () => {
       'scroll-canvas',
     ];
 
-    expect(parseModules('behavior', options)).toEqual([
+    expect(parseExtensions('behavior', options)).toEqual([
       { type: 'drag-node', key: 'behavior-drag-node-0' },
       { type: 'drag-canvas', key: 'behavior-drag-canvas-0' },
       { type: 'shortcut', key: 'shortcut-zoom-in' },
@@ -24,10 +24,10 @@ describe('module', () => {
     ]);
   });
 
-  it('parseWidgets', () => {
-    expect(parseModules('widget', [])).toEqual([]);
+  it('parsePlugins', () => {
+    expect(parseExtensions('plugin', [])).toEqual([]);
 
-    const options: WidgetOptions = [
+    const options: PluginOptions = [
       'minimap',
       { key: 'my-tooltip', type: 'tooltip' },
       { type: 'tooltip' },
@@ -39,16 +39,16 @@ describe('module', () => {
       'minimap',
     ];
 
-    expect(parseModules('widget', options)).toEqual([
-      { type: 'minimap', key: 'widget-minimap-0' },
+    expect(parseExtensions('plugin', options)).toEqual([
+      { type: 'minimap', key: 'plugin-minimap-0' },
       { type: 'tooltip', key: 'my-tooltip' },
-      { type: 'tooltip', key: 'widget-tooltip-0' },
+      { type: 'tooltip', key: 'plugin-tooltip-0' },
       {
         type: 'menu',
         key: 'my-context-menu',
         trigger: 'contextmenu',
       },
-      { type: 'minimap', key: 'widget-minimap-1' },
+      { type: 'minimap', key: 'plugin-minimap-1' },
     ]);
   });
 });

packages/g6/src/animations/executor.ts

@@ -1,7 +1,7 @@
 import type { DisplayObject, IAnimation } from '@antv/g';
 import { isString, upperFirst } from '@antv/util';
 import { DEFAULT_ELEMENTS_ANIMATION_OPTIONS } from '../constants';
-import { getPlugin } from '../registry';
+import { getExtension } from '../registry';
 import { createAnimationsProxy, executeAnimation, inferDefaultValue, preprocessKeyframes } from '../utils/animation';
 import type { AnimationExecutor } from './types';
 
@@ -20,7 +20,7 @@ export const executor: AnimationExecutor = (element, animation, commonEffectTimi
 
   const { animationsFilter = () => true } = context;
 
-  const animations = (isString(animation) ? getPlugin('animation', animation) || [] : animation).filter(
+  const animations = (isString(animation) ? getExtension('animation', animation) || [] : animation).filter(
     animationsFilter,
   );
   if (animations.length === 0) return null;

packages/g6/src/behaviors/base-behavior.ts

@@ -1,6 +1,6 @@
+import { BaseExtension } from '../registry/extension';
 import type { CustomBehaviorOption } from '../spec/behavior';
-import { BaseModule } from '../utils/module';
 
 export type BaseBehaviorOptions = CustomBehaviorOption;
 
-export abstract class BaseBehavior<T extends BaseBehaviorOptions> extends BaseModule<T> {}
+export abstract class BaseBehavior<T extends BaseBehaviorOptions> extends BaseExtension<T> {}

packages/g6/src/behaviors/index.ts

@@ -1,9 +1,10 @@
+import type { DragCanvasOptions } from './drag-canvas';
 import type { ZoomCanvasOptions } from './zoom-canvas';
 
 export { BaseBehavior } from './base-behavior';
 export { DragCanvas } from './drag-canvas';
 export { ZoomCanvas } from './zoom-canvas';
 
 export type { BaseBehaviorOptions } from './base-behavior';
-export type { DragCanvasOptions } from './drag-canvas';
-export type BuiltInBehaviorOptions = ZoomCanvasOptions;
+export type { DragCanvasOptions, ZoomCanvasOptions };
+export type BuiltInBehaviorOptions = DragCanvasOptions | ZoomCanvasOptions;

packages/g6/src/index.ts

@@ -4,7 +4,7 @@ export const version = '5.0.0';
 
 export { BaseBehavior } from './behaviors';
 export { CanvasEvent, ComboEvent, CommonEvent, ContainerEvent, EdgeEvent, GraphEvent, NodeEvent } from './constants';
-export { getPlugin, getPlugins, register } from './registry';
+export { getExtension, getExtensions, register } from './registry';
 export { Graph } from './runtime/graph';
 export { treeToGraphData } from './utils/tree';
 

packages/g6/src/plugins/base-plugin.ts

@@ -0,0 +1,6 @@
+import { BaseExtension } from '../registry/extension';
+import type { CustomPluginOption } from '../spec/plugin';
+
+export type BasePluginOptions = CustomPluginOption;
+
+export abstract class BasePlugin<T extends BasePluginOptions> extends BaseExtension<T> {}

packages/g6/src/widgets/index.ts → packages/g6/src/plugins/index.ts

@@ -1,7 +1,7 @@
 /**
  * <zh/> 内置组件
  *
- * <en/> Built-in widgets
+ * <en/> Built-in plugins
  */
 
 export {};

packages/g6/src/plugins/types.ts

@@ -0,0 +1,4 @@
+import type { BasePlugin } from './base-plugin';
+
+export type BuiltInPluginOptions = { type: 'unset' };
+export type Plugin = BasePlugin<any>;

packages/g6/src/preset.ts

@@ -1,9 +1,9 @@
 import { runtime } from '@antv/g';
-import { registerBuiltInPlugins } from './registry';
+import { registerBuiltInExtensions } from './registry';
 
 const onload = () => {
   runtime.enableCSSParsing = false;
-  registerBuiltInPlugins();
+  registerBuiltInExtensions();
 };
 
 onload();

packages/g6/src/registry/build-in.ts

@@ -35,12 +35,13 @@ import {
 } from '../layouts';
 import { blues, greens, oranges, spectral } from '../palettes';
 import { dark, light } from '../themes';
+import type { ExtensionRegistry } from './types';
 
 /**
  * <zh/> 内置插件统一在这里注册。
- * <en/> Built-in plugins are registered here.
+ * <en/> Built-in extensions are registered here.
  */
-export const BUILT_IN_PLUGINS = {
+export const BUILT_IN_EXTENSIONS: ExtensionRegistry = {
   animation: {
     fade,
     translate,
@@ -96,5 +97,5 @@ export const BUILT_IN_PLUGINS = {
     dark,
     light,
   },
-  widget: {},
+  plugin: {},
 };