fix(react): fix react component update not effect (#6656)

* refactor: fix demo types

* fix(react): fix react component update not effect

* chore: config react test env

* test: add test case

* chore: update version

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

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

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

@@ -0,0 +1,31 @@
+import { ReactNode } from '../../src';
+
+it('attribute changed callback', () => {
+  const oldComponent = () => <div>test</div>;
+  const node = new ReactNode({
+    style: {
+      component: oldComponent,
+    },
+  });
+  Object.assign(node, {
+    isConnected: true,
+    ownerDocument: {
+      defaultView: {
+        dispatchEvent: () => {},
+      },
+    },
+  });
+
+  const spy = jest.spyOn(node, 'attributeChangedCallback');
+
+  const component = () => <div>test1</div>;
+
+  try {
+    node.update({ component });
+  } catch (e) {
+    // ignore
+  }
+
+  expect(spy).toHaveBeenCalled();
+  expect(spy).toHaveBeenLastCalledWith('component', oldComponent, component, undefined, undefined);
+});

packages/g6-extension-react/jest.config.js

@@ -1,8 +1,25 @@
+const esm = ['internmap', 'd3-*', 'lodash-es', 'chalk'].map((d) => `_${d}|${d}`).join('|');
+
 module.exports = {
   transform: {
-    '^.+\\.[tj]s$': ['@swc/jest'],
+    '^.+\\.[tj]sx?$': [
+      '@swc/jest',
+      {
+        jsc: {
+          parser: {
+            syntax: 'typescript',
+            decorators: true,
+            jsx: true,
+          },
+        },
+      },
+    ],
   },
   testRegex: '(/__tests__/.*\\.(test|spec))\\.(ts|tsx|js)$',
   collectCoverageFrom: ['src/**/*.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
+  transformIgnorePatterns: [`<rootDir>/node_modules/.pnpm/(?!(${esm}))`],
+  moduleNameMapper: {
+    '@antv/g6': '<rootDir>/../g6/src',
+  },
 };

packages/g6-extension-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-extension-react",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Using React Component to Define Your G6 Graph Node",
   "keywords": [
     "antv",

packages/g6-extension-react/src/elements/react/node.tsx

@@ -1,4 +1,4 @@
-import type { HTMLStyleProps as GHTMLStyleProps } from '@antv/g';
+import type { DisplayObjectConfig, HTMLStyleProps as GHTMLStyleProps } from '@antv/g';
 import type { BaseNodeStyleProps, HTMLStyleProps } from '@antv/g6';
 import { HTML } from '@antv/g6';
 import type { FC, ReactElement } from 'react';
@@ -18,6 +18,14 @@ export class ReactNode extends HTML {
     return { ...super.getKeyStyle(attributes) };
   }
 
+  constructor(options: DisplayObjectConfig<ReactNodeStyleProps>) {
+    super(options as any);
+  }
+
+  public update(attr?: Partial<ReactNodeStyleProps> | undefined): void {
+    super.update(attr);
+  }
+
   public connectedCallback() {
     super.connectedCallback();
     // this.root = createRoot(this.getDomElement());
@@ -28,6 +36,7 @@ export class ReactNode extends HTML {
   }
 
   public attributeChangedCallback(name: any, oldValue: any, newValue: any) {
+    super.attributeChangedCallback(name, oldValue, newValue);
     if (name === 'component' && oldValue !== newValue) {
       render(
         (this.attributes as unknown as ReactNodeStyleProps).component as unknown as ReactElement,

packages/g6-ssr/package.json

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

packages/g6/__tests__/demos/case-language-tree.ts

@@ -43,7 +43,7 @@ export const caseLanguageTree: TestCase = async (context) => {
     layout: {
       type: 'd3-force',
       link: {
-        distance: (edge) => size(edge.source) + size(edge.target),
+        distance: (edge: any) => size(edge.source) + size(edge.target),
       },
       collide: {
         radius: (node: NodeData) => size(node) + 1,

packages/g6/__tests__/demos/case-unicorns-investors.ts

@@ -53,7 +53,11 @@ export const caseUnicornsInvestors: TestCase = async (context) => {
     },
     layout: {
       type: 'd3-force',
-      link: { distance: (edge) => size(edge.source) + size(edge.target) },
+      link: {
+        distance: (edge: any) => {
+          size(edge.source) + size(edge.target);
+        },
+      },
       collide: { radius: (node: NodeData) => size(node) },
       manyBody: { strength: (node: NodeData) => -4 * size(node) },
       animation: false,

packages/g6/package.json

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

packages/g6/src/utils/element.ts

@@ -1,6 +1,7 @@
-import type { AABB, BaseStyleProps, DisplayObject, TextStyleProps } from '@antv/g';
+import type { AABB, DisplayObject, TextStyleProps } from '@antv/g';
 import { get, isNumber, isString, set } from '@antv/util';
 import { BaseCombo, BaseEdge, BaseNode } from '../elements';
+import type { BaseShape } from '../elements/shapes';
 import type { Combo, Edge, Element, Node, NodePortStyleProps, Placement, Point, TriangleDirection } from '../types';
 import type { NodeLabelStyleProps, Port } from '../types/node';
 import { getBBoxHeight, getBBoxWidth } from './bbox';
@@ -474,8 +475,8 @@ export function isVisible(element: DisplayObject) {
  * @param element - <zh/> 元素 | <en/> element
  * @param style - <zh/> 样式 | <en/> style
  */
-export function setAttributes(element: DisplayObject, style: BaseStyleProps) {
-  const { zIndex, transform, transformOrigin, visibility, cursor, clipPath, ...rest } = style;
+export function setAttributes(element: BaseShape<any>, style: Record<string, any>) {
+  const { zIndex, transform, transformOrigin, visibility, cursor, clipPath, component, ...rest } = style;
   Object.assign(element.attributes, rest);
 
   if (transform) element.setAttribute('transform', transform);
@@ -484,6 +485,7 @@ export function setAttributes(element: DisplayObject, style: BaseStyleProps) {
   if (visibility) element.setAttribute('visibility', visibility);
   if (cursor) element.setAttribute('cursor', cursor);
   if (clipPath) element.setAttribute('clipPath', clipPath);
+  if (component) element.setAttribute('component', component);
 }
 
 /**

packages/g6/src/version.ts

@@ -1 +1 @@
-export const version = '5.0.37';
+export const version = '5.0.38';