docs: 改造文档「元素 - 节点 - 使用 React 定义节点」

packages/g6-extension-3d/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-extension-3d",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "3D extension for G6",
   "keywords": [
     "antv",

packages/g6-extension-react/__tests__/graph.tsx

@@ -10,7 +10,7 @@ export interface GraphProps {
 
 export const Graph = (props: GraphProps) => {
   const { options, onRender, onDestroy } = props;
-  const graphRef = useRef<G6Graph>();
+  const graphRef = useRef<G6Graph | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -22,7 +22,7 @@ export const Graph = (props: GraphProps) => {
       if (graph) {
         graph.destroy();
         onDestroy?.();
-        graphRef.current = undefined;
+        graphRef.current = null;
       }
     };
   }, []);

packages/g6-extension-react/__tests__/unit/attribute-changed-callback.spec.tsx

@@ -16,7 +16,8 @@ it('attribute changed callback', () => {
     },
   });
 
-  const spy = jest.spyOn(node, 'attributeChangedCallback');
+  const spy = jest.fn();
+  node.attributeChangedCallback = spy;
 
   const component = () => <div>test1</div>;
 

packages/g6-extension-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-extension-react",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Using React Component to Define Your G6 Graph Node",
   "keywords": [
     "antv",
@@ -41,11 +41,11 @@
   "devDependencies": {
     "@ant-design/icons": "^5.5.2",
     "@antv/g6": "workspace:*",
-    "@types/react": "^18.3.17",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
     "antd": "^5.22.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-router-dom": "^6.28.0",
     "styled-components": "^6.1.13"
   },

packages/g6-extension-react/rollup.config.mjs

@@ -15,6 +15,7 @@ export default [
       name: 'G6ExtensionReact',
       format: 'umd',
       sourcemap: false,
+      inlineDynamicImports: true,
     },
     plugins: [
       nodePolyfills(),

packages/g6-extension-react/src/react-node/render.ts

@@ -14,16 +14,27 @@ const fullClone = {
 
 type CreateRoot = (container: ContainerType) => Root;
 
-const { version, render: reactRender, unmountComponentAtNode } = fullClone;
+const { version, render: reactRender, unmountComponentAtNode } = fullClone as any;
 
 let createRoot: CreateRoot | undefined;
-try {
+
+async function initCreateRoot() {
+  if (createRoot) return;
   const mainVersion = Number((version || '').split('.')[0]);
-  if (mainVersion >= 18 && fullClone.createRoot) {
-    ({ createRoot } = fullClone);
+
+  // React 18+ 使用 createRoot
+  if (mainVersion >= 18) {
+    try {
+      /* @vite-ignore */
+      const client = await import('react-dom/client');
+      if (client.createRoot) {
+        createRoot = client.createRoot;
+      }
+    } catch (error) {
+      // 如果动态导入失败，回退到旧版本渲染
+      // Silent error
+    }
   }
-} catch (e) {
-  // Do nothing;
 }
 
 /**
@@ -85,7 +96,8 @@ function legacyRender(node: React.ReactElement, container: ContainerType) {
  * @param node - <zh/> React 节点 | <en/> React node
  * @param container - <zh/> 容器 | <en/> Container
  */
-export function render(node: React.ReactElement, container: ContainerType) {
+export async function render(node: React.ReactElement, container: ContainerType) {
+  await initCreateRoot();
   if (createRoot) modernRender(node, container);
   else legacyRender(node, container);
 }
@@ -123,6 +135,7 @@ function legacyUnmount(container: ContainerType) {
  * @returns <zh/> Promise | <en/> Promise
  */
 export async function unmount(container: ContainerType) {
+  await initCreateRoot();
   if (createRoot) {
     // Delay to unmount to avoid React 18 sync warning
     return modernUnmount(container);

packages/g6-ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-ssr",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Support SSR for G6",
   "keywords": [
     "antv",

packages/g6-ssr/src/index.ts

@@ -1,4 +1,7 @@
+import * as G6 from '@antv/g6';
+
 export { getExtension, getExtensions, register } from '@antv/g6';
 export { createCanvas } from './canvas';
 export { createGraph } from './graph';
 export type { Graph, MetaData, Options } from './types';
+export { G6 };

packages/g6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "5.0.44",
+  "version": "5.0.45",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",

packages/g6/src/plugins/edge-filter-lens/index.ts

@@ -1,6 +1,5 @@
-import type { BaseStyleProps } from '@antv/g';
 import { CommonEvent } from '../../constants';
-import { Circle } from '../../elements';
+import { Circle, type CircleStyleProps } from '../../elements';
 import type { RuntimeContext } from '../../runtime/types';
 import type { EdgeData, GraphData, NodeData } from '../../spec';
 import type { EdgeStyle } from '../../spec/element/edge';
@@ -100,7 +99,7 @@ export interface EdgeFilterLensOptions extends BasePluginOptions {
    *
    * <en/> The style of the lens
    */
-  style?: BaseStyleProps;
+  style?: Partial<CircleStyleProps>;
   /**
    * <zh/> 在透镜中节点的样式
    *
@@ -122,7 +121,7 @@ export interface EdgeFilterLensOptions extends BasePluginOptions {
   preventDefault?: boolean;
 }
 
-const defaultLensStyle: BaseStyleProps = {
+const defaultLensStyle: Exclude<CircleStyleProps, 'r'> = {
   fill: '#fff',
   fillOpacity: 1,
   lineWidth: 1,
@@ -388,6 +387,7 @@ export class EdgeFilterLens extends BasePlugin<EdgeFilterLensOptions> {
   public update(options: Partial<EdgeFilterLensOptions>) {
     this.unbindEvents();
     super.update(options);
+    this.r = options.r ?? this.r;
     this.bindEvents();
   }
 

packages/g6/src/plugins/fisheye/index.ts

@@ -466,6 +466,8 @@ export class Fisheye extends BasePlugin<FisheyeOptions> {
   public update(options: Partial<FisheyeOptions>) {
     this.unbindEvents();
     super.update(options);
+    this.r = options.r ?? this.r;
+    this.d = options.d ?? this.d;
     this.bindEvents();
   }
 

packages/g6/src/version.ts

@@ -1 +1 @@
-export const version = '5.0.44';
+export const version = '5.0.45';

packages/site/.dumi/global.ts

@@ -25,7 +25,7 @@ if (typeof window !== 'undefined' && window) {
 
   window.react = require('react');
   window.React = window.react;
-  window.client = require('react-dom');
+  window.client = require('react-dom/client');
   window.styledComponents = require('styled-components');
 
   window.addPanel = async (renderPanel: (gui) => void) => {

packages/site/.dumirc.ts

@@ -3,13 +3,7 @@ import { version } from '../g6/package.json';
 import { homepage, repository } from './package.json';
 
 export default defineConfig({
-  ssr:
-    process.env.NODE_ENV === 'production'
-      ? {
-          builder: 'mako',
-        }
-      : false,
-  mako: {},
+  ...(process.env.NODE_ENV === 'production' ? { ssr: { builder: 'webpack', mako: false } } : { ssr: false, mako: {} }),
   locales: [
     { id: 'zh', name: '中文' },
     { id: 'en', name: 'English' },
@@ -133,23 +127,23 @@ export default defineConfig({
       {
         slug: 'manual/graph',
         title: {
-          zh: '图 - Graph',
+          zh: '图 Graph',
           en: 'Graph',
         },
         order: 3,
       },
       {
         slug: 'manual/element',
         title: {
-          zh: '元素 - Element',
+          zh: '元素 Element',
           en: 'Element',
         },
         order: 5,
       },
       {
         slug: 'manual/element/node',
         title: {
-          zh: '节点',
+          zh: '节点 Node',
           en: 'Node',
         },
         order: 3,
@@ -165,7 +159,7 @@ export default defineConfig({
       {
         slug: 'manual/element/edge',
         title: {
-          zh: '边',
+          zh: '边 Edge',
           en: 'Edge',
         },
         order: 4,
@@ -181,7 +175,7 @@ export default defineConfig({
       {
         slug: 'manual/element/combo',
         title: {
-          zh: '组合',
+          zh: '组合 Combo',
           en: 'Combo',
         },
         order: 5,
@@ -205,7 +199,7 @@ export default defineConfig({
       {
         slug: 'manual/layout',
         title: {
-          zh: '布局 - Layout',
+          zh: '布局 Layout',
           en: 'Layout',
         },
         order: 5,
@@ -221,7 +215,7 @@ export default defineConfig({
       {
         slug: 'manual/behavior',
         title: {
-          zh: '交互 - Behavior',
+          zh: '交互 Behavior',
           en: 'Behavior',
         },
         order: 6,
@@ -237,7 +231,7 @@ export default defineConfig({
       {
         slug: 'manual/plugin',
         title: {
-          zh: '插件 - Plugin',
+          zh: '插件 Plugin',
           en: 'Plugin',
         },
         order: 7,
@@ -253,7 +247,7 @@ export default defineConfig({
       {
         slug: 'manual/transform',
         title: {
-          zh: '数据处理 - Transform',
+          zh: '数据处理 Transform',
           en: 'Transform',
         },
         order: 8,
@@ -269,15 +263,15 @@ export default defineConfig({
       {
         slug: 'manual/theme',
         title: {
-          zh: '主题 - Theme',
+          zh: '主题 Theme',
           en: 'Theme',
         },
         order: 9,
       },
       {
         slug: 'manual/animation',
         title: {
-          zh: '动画 - Animation',
+          zh: '动画 Animation',
           en: 'Animation',
         },
         order: 10,

packages/site/.gitignore

@@ -7,3 +7,6 @@
 docs/api/.gitignore
 
 /server
+
+# Dead links report
+dead-links-report.log

packages/site/common/angular-snippet.md

@@ -1,9 +1,5 @@
-<iframe src="https://codesandbox.io/embed/2gv4rt?view=split&module=%2Fsrc%2Fapp%2Fapp.component.ts&hidenavigation=1&theme=light"
-     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
-     title="G6 Angular"
-     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>
+<iframe src="https://stackblitz.com/edit/g6-in-angular?embed=1&file=src%2Fmain.ts&theme=light"
+     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"></iframe>
 
 **app.component.html**