feat(react): adapt react 16/17

packages/g6-extension-react/src/elements/react/index.ts

@@ -1,3 +1,4 @@
 export { ReactNode } from './node';
+export { render, unmount } from './render';
 
 export type { ReactNodeStyleProps } from './node';

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

@@ -1,9 +1,8 @@
 import type { HTMLStyleProps as GHTMLStyleProps } from '@antv/g';
 import type { BaseNodeStyleProps, HTMLStyleProps } from '@antv/g6';
 import { HTML } from '@antv/g6';
-import type { FC, ReactNode as IReactNode } from 'react';
-import type { Root } from 'react-dom/client';
-import { createRoot } from 'react-dom/client';
+import type { FC, ReactElement } from 'react';
+import { render, unmount } from './render';
 
 export interface ReactNodeStyleProps extends BaseNodeStyleProps {
   /**
@@ -15,29 +14,30 @@ export interface ReactNodeStyleProps extends BaseNodeStyleProps {
 }
 
 export class ReactNode extends HTML {
-  private root!: Root;
-
   protected getKeyStyle(attributes: Required<HTMLStyleProps>): GHTMLStyleProps {
     return { ...super.getKeyStyle(attributes) };
   }
 
   public connectedCallback() {
     super.connectedCallback();
-    this.root = createRoot(this.getDomElement());
+    // this.root = createRoot(this.getDomElement());
     const { component } = this.attributes as unknown as ReactNodeStyleProps;
     // component 已经被回调机制自动创建为 ReactNode
     // component has been automatically created as ReactNode by the callback mechanism
-    this.root.render(component as unknown as IReactNode);
+    render(component as unknown as ReactElement, this.getDomElement());
   }
 
   public attributeChangedCallback(name: any, oldValue: any, newValue: any) {
     if (name === 'component' && oldValue !== newValue) {
-      this.root.render((this.attributes as unknown as ReactNodeStyleProps).component as unknown as IReactNode);
+      render(
+        (this.attributes as unknown as ReactNodeStyleProps).component as unknown as ReactElement,
+        this.getDomElement(),
+      );
     }
   }
 
   public destroy(): void {
-    this.root.unmount();
+    unmount(this.getDomElement());
     super.destroy();
   }
 }

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

@@ -0,0 +1,132 @@
+import type * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import type { Root } from 'react-dom/client';
+
+// Let compiler not to search module usage
+const fullClone = {
+  ...ReactDOM,
+} as typeof ReactDOM & {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: {
+    usingClientEntryPoint?: boolean;
+  };
+  createRoot?: CreateRoot;
+};
+
+type CreateRoot = (container: ContainerType) => Root;
+
+const { version, render: reactRender, unmountComponentAtNode } = fullClone;
+
+let createRoot: CreateRoot | undefined;
+try {
+  const mainVersion = Number((version || '').split('.')[0]);
+  if (mainVersion >= 18 && fullClone.createRoot) {
+    ({ createRoot } = fullClone);
+  }
+} catch (e) {
+  // Do nothing;
+}
+
+/**
+ * <zh/> 切换警告
+ *
+ * <en/> Toggle warning
+ * @param skip <zh/> 是否跳过警告 | <en/> Whether to skip the warning
+ */
+function toggleWarning(skip: boolean) {
+  const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = fullClone;
+
+  if (
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED &&
+    typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === 'object'
+  ) {
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skip;
+  }
+}
+
+const MARK = '__rc_react_root__';
+
+// ========================== Render ==========================
+type ContainerType = (Element | DocumentFragment) & {
+  [MARK]?: Root;
+};
+
+/**
+ * <zh/> 渲染 React 节点(React >= 18)
+ *
+ * <en/> Render React node(React >= 18)
+ * @param node - <zh/> React 节点 | <en/> React node
+ * @param container - <zh/> 容器 | <en/> Container
+ */
+function modernRender(node: React.ReactNode, container: ContainerType) {
+  toggleWarning(true);
+  const root = container[MARK] || createRoot!(container);
+  toggleWarning(false);
+
+  root.render(node);
+
+  container[MARK] = root;
+}
+
+/**
+ * <zh/> 使用旧的 React 渲染
+ *
+ * <en/> Use old React render
+ * @param node - <zh/> React 节点 | <en/> React node
+ * @param container - <zh/> 容器 | <en/> Container
+ */
+function legacyRender(node: React.ReactElement, container: ContainerType) {
+  reactRender(node, container);
+}
+
+/**
+ * <zh/> 渲染 React 节点(兼容 React 16 ~ 18)
+ *
+ * <en/> Render React node(Compatible with React 16 ~ 18)
+ * @param node - <zh/> React 节点 | <en/> React node
+ * @param container - <zh/> 容器 | <en/> Container
+ */
+export function render(node: React.ReactElement, container: ContainerType) {
+  if (createRoot) modernRender(node, container);
+  else legacyRender(node, container);
+}
+
+/**
+ * <zh/> 卸载 React 节点(React >= 18)
+ *
+ * <en/> Unmount React node(React >= 18)
+ * @param container - <zh/> 容器 | <en/> Container
+ * @returns <zh/> Promise | <en/> Promise
+ */
+async function modernUnmount(container: ContainerType) {
+  // Delay to unmount to avoid React 18 sync warning
+  return Promise.resolve().then(() => {
+    container[MARK]?.unmount();
+    delete container[MARK];
+  });
+}
+
+/**
+ * <zh/> 卸载 React 节点(React < 18)
+ *
+ * <en/> Unmount React node(React < 18)
+ * @param container - <zh/> 容器 | <en/> Container
+ */
+function legacyUnmount(container: ContainerType) {
+  unmountComponentAtNode(container);
+}
+
+/**
+ * <zh/> 卸载 React 节点(兼容 React 16 ~ 18)
+ *
+ * <en/> Unmount React node(Compatible with React 16 ~ 18)
+ * @param container - <zh/> 容器 | <en/> Container
+ * @returns <zh/> Promise | <en/> Promise
+ */
+export async function unmount(container: ContainerType) {
+  if (createRoot) {
+    // Delay to unmount to avoid React 18 sync warning
+    return modernUnmount(container);
+  }
+
+  legacyUnmount(container);
+}

packages/g6-extension-react/src/index.ts

@@ -13,6 +13,8 @@ export {
   ReactNode,
   Rect,
   Text,
+  render,
+  unmount,
 } from './elements';
 
 export type { GNodeStyleProps, ReactNodeStyleProps } from './elements';