feat: Suppot react v18 (#214)

Author: SunLxy

package.json

@@ -52,8 +52,8 @@
     "@kkt/raw-modules": "~7.1.1",
     "@kkt/scope-plugin-options": "~7.1.1",
     "@types/babel__standalone": "~7.1.4",
-    "@types/react": "~17.0.39",
-    "@types/react-dom": "~17.0.13",
+    "@types/react": "18.0.5",
+    "@types/react-dom": "18.0.1",
     "@types/react-test-renderer": "~17.0.1",
     "@uiw/react-github-corners": "~1.5.3",
     "@uiw/react-markdown-preview": "~3.5.1",
@@ -63,8 +63,8 @@
     "kkt": "~7.1.5",
     "lint-staged": "~12.3.5",
     "prettier": "~2.5.1",
-    "react": "~17.0.2",
-    "react-dom": "~17.0.2",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
     "react-test-renderer": "~17.0.2",
     "source-map-explorer": "~2.5.2",
     "tsbb": "~3.7.2",
@@ -101,4 +101,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/useCodePreview.ts

@@ -1,4 +1,6 @@
 import React, { useEffect, useRef } from 'react';
+// @ts-ignore
+import ReactDOMClient from 'react-dom/client';
 import ReactDOM from 'react-dom';
 import { useState } from 'react';
 import { babelTransform } from './transform';
@@ -14,13 +16,51 @@ export function useCodePreview(props: CodePreviewProps) {
   const [copied, setCopied] = useState(false);
   const [code, setCode] = useState(props.code || '');
 
+  /** 通过缓存的方式 解决 react v18 中 的报错   ***/
+  // @ts-ignore
+  const cachesRef = React.useRef(new Map<string, ReactDOMClient.Root>([]));
+  const ReactDOMRender = (_ReactDOM: typeof ReactDOMClient) => {
+    return {
+      createRoot: (id: string) => {
+        return {
+          render: (render: React.ReactChild | Iterable<React.ReactNode>) => {
+            const caches = cachesRef.current;
+            let root = caches.get(id);
+            // 存在则不需要重新创建直接进行render操作
+            if (root) {
+              root.render(render);
+            } else {
+              // @ts-ignore
+              root = _ReactDOM.createRoot(document.getElementById(id)!);
+              root.render(render);
+              // 缓存，解决控制台报  ReactDOMClient.createRoot 问题
+              caches.set(id, root);
+            }
+            cachesRef.current = caches;
+          },
+        };
+      },
+    };
+  };
+  /**  ------------------------   ***/
+
   const executeCode = (str: string) => {
-    const { React: _React, ReactDOM: _ReactDOM, ...otherDeps } = props.dependencies || {};
+    const {
+      React: _React,
+      ReactDOM: _ReactDOM,
+      ReactDOMClient: _ReactDOMClient,
+      ...otherDeps
+    } = props.dependencies || {};
+    const V18ReactDOM = _ReactDOMClient || ReactDOMClient || _ReactDOM || ReactDOM;
+    // 判断是否是 react v18版本
+    const isV18 = Reflect.has(V18ReactDOM || {}, 'createRoot');
+    const NewReactDOM = isV18 ? ReactDOMRender(V18ReactDOM) : V18ReactDOM;
+
     try {
       const deps = {
         React: _React || React,
-        ReactDOM: _ReactDOM || ReactDOM,
         ...otherDeps,
+        ReactDOM: NewReactDOM,
       } as any;
       // const args = ['context', 'React', 'ReactDOM', 'Component'];
       const args = [];
@@ -30,7 +70,17 @@ export function useCodePreview(props: CodePreviewProps) {
         args.push(key);
         argv.push(deps[key]);
       }
-      str = str.replace('_mount_', `document.getElementById('${playerId.current}')`);
+
+      if (isV18) {
+        // react < v18 中写法替换
+        str = str.replace('ReactDOM.render', `ReactDOM.createRoot("${playerId.current}").render`);
+        // react v18 中写法替换
+        str = str.replace(`ReactDOMClient.createRoot(_mount_)`, `ReactDOM.createRoot("${playerId.current}")`);
+        str = str.replace('_mount_', ``);
+      } else {
+        str = str.replace('_mount_', `document.getElementById('${playerId.current}')`);
+      }
+
       const input = `${str}`;
       const { code } = babelTransform(input);
       args.push(code || '');

website/Example.tsx

@@ -3,8 +3,9 @@ import CodePreview from '../';
 import { Switch } from 'uiw';
 import * as UIW from 'uiw';
 
-const defaultCode = `import ReactDOM from 'react-dom';
+const defaultCode = `
 import { Button, Divider, Icon } from 'uiw';
+import ReactDOMClient from 'react-dom/client';
 
 ReactDOM.render(
   <div>

website/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+// import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import '@uiw/reset.css/reset.less';
 import App from './App';
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 );