deps: 更新 echarts 到 5.3.1，monaco-editor 到 0.33.0，qrcode.react 到 3.0.0，官网 React 升级到 18 (#3897)

__tests__/renderers/Form/__snapshots__/initData.test.tsx.snap

@@ -112,7 +112,6 @@ exports[`Form:initData:remote 1`] = `
           <div
             class="cxd-Spinner-icon cxd-Spinner-icon--default"
           />
-          
         </div>
         <div
           class="cxd-Form-item cxd-Form-item--normal"

__tests__/renderers/__snapshots__/JSON.test.tsx.snap

@@ -265,7 +265,6 @@ exports[`Renderer:json 1`] = `
                               >
                                 1
                                  item
-                                
                               </span>
                             </div>
                           </span>

__tests__/renderers/__snapshots__/Markdown.test.tsx.snap

@@ -12,7 +12,6 @@ exports[`Renderer:markdown 1`] = `
         <div
           class="cxd-Spinner-icon cxd-Spinner-icon--default"
         />
-        
       </div>
     </div>
   </div>

__tests__/renderers/__snapshots__/Page.test.tsx.snap

@@ -821,7 +821,6 @@ exports[`Renderer:Page handleAction actionType=drawer 1`] = `
           <div
             class="cxd-Spinner-icon cxd-Spinner-icon--lg cxd-Spinner-icon--default"
           />
-          
         </div>
       </div>
       <div
@@ -1976,7 +1975,6 @@ exports[`Renderer:Page initApi show loading 1`] = `
           <div
             className="cxd-Spinner-icon cxd-Spinner-icon--lg cxd-Spinner-icon--default"
           />
-          
         </div>
         <span
           className="cxd-TplField"
@@ -2041,7 +2039,6 @@ exports[`Renderer:Page initApi silentPolling 1`] = `
           <div
             className="cxd-Spinner-icon cxd-Spinner-icon--lg cxd-Spinner-icon--default"
           />
-          
         </div>
         <span
           className="cxd-TplField"

__tests__/renderers/__snapshots__/QRCode.test.tsx.snap

@@ -29,7 +29,7 @@ exports[`Renderer:qr-code 1`] = `
                 fill="#fff"
               />
               <path
-                d="M0 0h7v1H0zM9 0h1v1H9zM12 0h1v1H12zM14,0 h7v1H14zM0 1h1v1H0zM6 1h1v1H6zM8 1h1v1H8zM11 1h1v1H11zM14 1h1v1H14zM20,1 h1v1H20zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM9 2h1v1H9zM14 2h1v1H14zM16 2h3v1H16zM20,2 h1v1H20zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM8 3h1v1H8zM11 3h1v1H11zM14 3h1v1H14zM16 3h3v1H16zM20,3 h1v1H20zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM10 4h3v1H10zM14 4h1v1H14zM16 4h3v1H16zM20,4 h1v1H20zM0 5h1v1H0zM6 5h1v1H6zM8 5h3v1H8zM12 5h1v1H12zM14 5h1v1H14zM20,5 h1v1H20zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14,6 h7v1H14zM10 7h3v1H10zM0 8h5v1H0zM6 8h4v1H6zM12 8h2v1H12zM15 8h1v1H15zM17 8h1v1H17zM19 8h1v1H19zM2 9h4v1H2zM7 9h4v1H7zM12 9h1v1H12zM15 9h1v1H15zM17 9h1v1H17zM20,9 h1v1H20zM3 10h1v1H3zM6 10h3v1H6zM11 10h1v1H11zM13 10h1v1H13zM16 10h4v1H16zM0 11h1v1H0zM5 11h1v1H5zM7 11h1v1H7zM10 11h1v1H10zM15 11h5v1H15zM1 12h1v1H1zM3 12h1v1H3zM5 12h3v1H5zM11 12h1v1H11zM13 12h1v1H13zM16 12h1v1H16zM8 13h2v1H8zM11 13h4v1H11zM20,13 h1v1H20zM0 14h7v1H0zM8 14h3v1H8zM12 14h1v1H12zM14 14h2v1H14zM17 14h3v1H17zM0 15h1v1H0zM6 15h1v1H6zM9 15h1v1H9zM11 15h4v1H11zM17 15h2v1H17zM0 16h1v1H0zM2 16h3v1H2zM6 16h1v1H6zM8 16h1v1H8zM12 16h1v1H12zM15 16h1v1H15zM17 16h1v1H17zM19 16h1v1H19zM0 17h1v1H0zM2 17h3v1H2zM6 17h1v1H6zM8 17h1v1H8zM10 17h1v1H10zM12 17h1v1H12zM15 17h1v1H15zM18 17h1v1H18zM0 18h1v1H0zM2 18h3v1H2zM6 18h1v1H6zM8 18h1v1H8zM11 18h1v1H11zM13 18h1v1H13zM16 18h2v1H16zM0 19h1v1H0zM6 19h1v1H6zM8 19h1v1H8zM15 19h2v1H15zM18 19h1v1H18zM0 20h7v1H0zM8 20h4v1H8zM13 20h1v1H13zM16 20h1v1H16zM18 20h2v1H18z"
+                d="M0 0h7v1H0zM8 0h5v1H8zM14,0 h7v1H14zM0 1h1v1H0zM6 1h1v1H6zM8 1h2v1H8zM11 1h2v1H11zM14 1h1v1H14zM20,1 h1v1H20zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM8 2h1v1H8zM11 2h2v1H11zM14 2h1v1H14zM16 2h3v1H16zM20,2 h1v1H20zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM9 3h2v1H9zM14 3h1v1H14zM16 3h3v1H16zM20,3 h1v1H20zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM10 4h2v1H10zM14 4h1v1H14zM16 4h3v1H16zM20,4 h1v1H20zM0 5h1v1H0zM6 5h1v1H6zM8 5h4v1H8zM14 5h1v1H14zM20,5 h1v1H20zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14,6 h7v1H14zM8 7h1v1H8zM2 8h3v1H2zM6 8h1v1H6zM8 8h1v1H8zM12 8h4v1H12zM18,8 h3v1H18zM2 9h2v1H2zM7 9h1v1H7zM9 9h2v1H9zM12 9h1v1H12zM15 9h1v1H15zM17 9h1v1H17zM20,9 h1v1H20zM1 10h1v1H1zM3 10h2v1H3zM6 10h2v1H6zM9 10h2v1H9zM13 10h2v1H13zM16 10h4v1H16zM1 11h1v1H1zM3 11h1v1H3zM5 11h1v1H5zM8 11h2v1H8zM13 11h1v1H13zM15 11h5v1H15zM1 12h2v1H1zM5 12h3v1H5zM10 12h1v1H10zM12 12h1v1H12zM16 12h1v1H16zM8 13h4v1H8zM13 13h2v1H13zM20,13 h1v1H20zM0 14h7v1H0zM9 14h1v1H9zM11 14h5v1H11zM17 14h3v1H17zM0 15h1v1H0zM6 15h1v1H6zM10 15h2v1H10zM14 15h1v1H14zM17 15h2v1H17zM0 16h1v1H0zM2 16h3v1H2zM6 16h1v1H6zM8 16h2v1H8zM11 16h1v1H11zM14 16h2v1H14zM17 16h1v1H17zM19 16h1v1H19zM0 17h1v1H0zM2 17h3v1H2zM6 17h1v1H6zM8 17h2v1H8zM12 17h1v1H12zM14 17h2v1H14zM18 17h1v1H18zM0 18h1v1H0zM2 18h3v1H2zM6 18h1v1H6zM8 18h1v1H8zM10 18h1v1H10zM12 18h2v1H12zM16 18h2v1H16zM0 19h1v1H0zM6 19h1v1H6zM10 19h2v1H10zM14 19h3v1H14zM18 19h1v1H18zM0 20h7v1H0zM10 20h2v1H10zM13 20h1v1H13zM16 20h1v1H16zM18 20h2v1H18z"
                 fill="#000"
               />
             </svg>

__tests__/renderers/__snapshots__/Wizard.test.tsx.snap

@@ -1755,7 +1755,6 @@ exports[`Renderer:Wizard initApi show loading 1`] = `
     <div
       className="cxd-Spinner-icon cxd-Spinner-icon--lg cxd-Spinner-icon--default"
     />
-    
   </div>
 </div>
 `;

examples/components/MdRenderer.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {findDOMNode} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import {getTheme, render} from '../../src/index';
 import axios from 'axios';
 import TitleBar from '../../src/components/TitleBar';
@@ -12,7 +13,7 @@ import classnames from 'classnames';
 import {Link} from 'react-router-dom';
 import Play from './Play';
 
-class CodePreview extends React.Component<any> {
+class CodePreview extends React.Component {
   state = {
     PlayGround: null
   };
@@ -24,7 +25,7 @@ class CodePreview extends React.Component<any> {
   }
 }
 
-function eachDom(dom: HTMLElement, iterator: (dom: HTMLElement) => void) {
+function eachDom(dom, iterator) {
   if (!dom) {
     return;
   }
@@ -39,7 +40,7 @@ function eachDom(dom: HTMLElement, iterator: (dom: HTMLElement) => void) {
 class Preview extends React.Component {
   static displayName = 'MarkdownRenderer';
   ref = null;
-  doms = [];
+  roots = [];
   constructor(props) {
     super(props);
     this.divRef = this.divRef.bind(this);
@@ -64,12 +65,12 @@ class Preview extends React.Component {
 
   componentDidUpdate() {
     this.renderSchema();
-
     this.fixHtmlPreview();
   }
 
   componentWillUnmount() {
-    this.doms.forEach(dom => ReactDOM.unmountComponentAtNode(dom));
+    // TODO: 会报错，可能得后续 amis 内部的 render 也改才行
+    // this.roots.forEach(root => root.unmount());
   }
 
   divRef(ref) {
@@ -108,20 +109,19 @@ class Preview extends React.Component {
       const origin = script.parentNode;
       origin.parentNode.replaceChild(dom, origin);
 
-      this.doms.push(dom);
+      const root = createRoot(dom);
-      ReactDOM.unstable_renderSubtreeIntoContainer(
+      this.roots.push(root);
-        this,
+      root.render(
         <LazyComponent
           {...this.props}
-          container={() => ReactDOM.findDOMNode(this)}
+          container={() => findDOMNode(this)}
           component={CodePreview}
           code={script.innerText}
           scope={props.scope}
           // unMountOnHidden
           height={height}
           placeholder="加载中，请稍后。。。"
-        />,
+        />
-        dom
       );
     }
   }
@@ -131,9 +131,9 @@ class Preview extends React.Component {
     if (!htmlPreviews && !htmlPreviews.length) {
       return;
     }
-    const ns = getTheme((this.props as any).theme)?.classPrefix;
+    const ns = getTheme(this.props.theme)?.classPrefix;
     [].slice.call(htmlPreviews).forEach(dom => {
-      eachDom(dom as HTMLElement, dom => {
+      eachDom(dom, dom => {
         if (typeof dom.className !== 'string') {
           return;
         }
@@ -157,7 +157,7 @@ class Preview extends React.Component {
   }
 }
 
-export default function (doc: any) {
+export default function (doc) {
   return class extends React.Component {
     popoverDom = null;
 
@@ -167,7 +167,7 @@ export default function (doc: any) {
       headingPopover: false
     };
 
-    popoverRef = (ref: HTMLDivElement) => {
+    popoverRef = ref => {
       this.popoverDom = ref;
     };
 
@@ -188,7 +188,7 @@ export default function (doc: any) {
       ));
     }
 
-    handlePopOverClick = (e: React.MouseEvent<any>) => {
+    handlePopOverClick = e => {
       this.setState({headingPopover: false});
       e.stopPropagation();
       // e.preventDefault();

examples/embed.tsx

@@ -1,6 +1,6 @@
 import './polyfills/index';
 import React from 'react';
-import {render as renderReact, unmountComponentAtNode} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import axios from 'axios';
 import {match} from 'path-to-regexp';
 import copy from 'copy-to-clipboard';
@@ -272,15 +272,16 @@ export function embed(
     );
   }
 
-  renderReact(createElements(props), container);
+  const root = createRoot(container);
+  root.render(createElements(props));
 
   return {
     ...scoped,
     updateProps: (props: any, callback?: () => void) => {
-      renderReact(createElements(props), container as HTMLElement, callback);
+      root.render(createElements(props));
     },
     unmount: () => {
-      unmountComponentAtNode(container as HTMLElement);
+      root.unmount();
     }
   };
 }

examples/index.jsx

@@ -3,12 +3,13 @@
  * @author liaoxuezhi@cloud.com
  */
 import './polyfills/index';
-import React from 'react';
+import React, {useEffect} from 'react';
-import {render} from 'react-dom';
+
+import {createRoot} from 'react-dom/client';
 import App from './components/App';
 
-export function bootstrap(mountTo, initalState) {
+function AppWithCallbackAfterRender() {
-  render(<App />, mountTo, () => {
+  useEffect(() => {
     // 由于延迟加载导致初始锚点经常不正确
     // 延迟再设置一下锚点，这个问题暂时没想到其它方法
     setTimeout(() => {
@@ -21,4 +22,11 @@ export function bootstrap(mountTo, initalState) {
       }
     }, 2000);
   });
+
+  return <App />;
+}
+
+export function bootstrap(mountTo, initalState) {
+  const root = createRoot(mountTo);
+  root.render(<AppWithCallbackAfterRender />);
 }

examples/mobile.jsx

@@ -5,7 +5,7 @@
 import './polyfills/index';
 
 import React from 'react';
-import {render} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import axios from 'axios';
 import copy from 'copy-to-clipboard';
 import {toast} from '../src/components/Toast';
@@ -95,5 +95,6 @@ class AMISComponent extends React.Component {
 }
 
 export function bootstrap(mountTo) {
-  render(<AMISComponent />, mountTo);
+  const root = createRoot(mountTo);
+  root.render(<AMISComponent />);
 }

package.json

@@ -43,7 +43,7 @@
     ]
   },
   "dependencies": {
-    "amis-formula": "^1.3.11",
+    "amis-formula": "^1.3.12",
     "ansi-to-react": "^6.1.6",
     "async": "2.6.0",
     "attr-accept": "2.2.2",
@@ -51,7 +51,7 @@
     "classnames": "2.3.1",
     "codemirror": "^5.63.0",
     "downshift": "6.1.7",
-    "echarts": "5.3.0",
+    "echarts": "5.3.1",
     "echarts-stat": "^1.2.0",
     "exceljs": "^4.3.0",
     "file-saver": "^2.0.2",
@@ -70,12 +70,12 @@
     "mobx-react": "^6.3.1",
     "mobx-state-tree": "^3.17.3",
     "moment": "^2.19.3",
-    "monaco-editor": "0.31.1",
+    "monaco-editor": "0.33.0",
     "mpegts.js": "^1.6.10",
     "papaparse": "^5.3.0",
     "prop-types": "^15.6.1",
     "punycode": "^2.1.1",
-    "qrcode.react": "^1.0.1",
+    "qrcode.react": "^3.0.0",
     "qs": "6.9.7",
     "rc-input-number": "^7.3.4",
     "rc-overflow": "^1.2.4",
@@ -96,8 +96,8 @@
     "video-react": "0.15.0"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^6.0.0",
+    "@fortawesome/fontawesome-free": "^6.1.1",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^12.1.4",
     "@types/async": "^2.0.45",
     "@types/codemirror": "^5.60.3",
     "@types/echarts": "^4.9.2",
@@ -105,7 +105,6 @@
     "@types/history": "^4.6.0",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^27.0.2",
-    "@types/jquery": "^3.3.1",
     "@types/lodash": "^4.14.175",
     "@types/markdown-it": "^12.2.1",
     "@types/mkdirp": "^1.0.1",
@@ -149,7 +148,7 @@
     "jest": "^27.5.1",
     "jest-canvas-mock": "^2.3.0",
     "js-yaml": "^4.1.0",
-    "json5": "^2.2.0",
+    "json5": "^2.2.1",
     "lint-staged": "^12.3.3",
     "marked": ">=4.0.12",
     "mkdirp": "^1.0.4",
@@ -157,16 +156,16 @@
     "path-to-regexp": "^6.2.0",
     "postcss": "^8.4.6",
     "postcss-cli": "^9.1.0",
-    "postcss-custom-properties": "^12.1.4",
+    "postcss-custom-properties": "^12.1.5",
-    "prettier": "^2.4.1",
+    "prettier": "^2.6.1",
     "pretty-quick": "^3.1.1",
     "prismjs": "^1.25.0",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
     "react-router": "^5.2.1",
     "react-router-dom": "5.3.0",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.0.0",
-    "ts-jest": "^27.0.5",
+    "ts-jest": "^27.1.4",
     "ts-json-schema-generator": "0.96.0",
     "ts-node": "^10.5.0",
     "typescript": "~4.5.5"

src/renderers/QRCode.tsx

@@ -3,8 +3,7 @@ import cx from 'classnames';
 import {Renderer, RendererProps} from '../factory';
 import {FormItem, FormControlProps} from './Form/Item';
 import {filter} from '../utils/tpl';
-// @ts-ignore
+import {QRCodeSVG} from 'qrcode.react';
-import QrCode from 'qrcode.react';
 import {BaseSchema, SchemaClassName} from '../Schema';
 import {getPropValue} from '../utils/helper';
 
@@ -95,10 +94,10 @@ export default class QRCode extends React.Component<QRCodeProps, any> {
             二维码值过长，请设置2953个字符以下的文本
           </span>
         ) : (
-          <QrCode
+          <QRCodeSVG
+            // @ts-ignore 其实是支持的
             className={qrcodeClassName}
             value={finalValue}
-            renderAs={'svg'}
             size={codeSize}
             bgColor={backgroundColor}
             fgColor={foregroundColor}