opensumi · erha19 · Dec 7, 2023 · Apr 18, 2022 · Jun 29, 2022 · Jul 4, 2022
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -59,7 +59,7 @@ jobs:
 
       - if: ${{ matrix.node-version == '16.x' && matrix.os == 'ubuntu-latest' }}
         name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v2
+        uses: codecov/codecov-action@v3
         with:
           token: ${{ secrets.CORE_CODECOV_TOKEN }}
           flags: ${{ matrix.ci-project }}

diff --git a/jest.config.js b/jest.config.js
@@ -85,7 +85,9 @@ module.exports = {
       testEnvironment: 'jsdom',
       testEnvironmentOptions: {
         html: `<html>
-        <div id="main"></div>
+        <body>
+          <div id="main"></div>
+        </body>
         </html>`,
         runScripts: 'dangerously',
         url: 'http://localhost/?id=1',

diff --git a/jest.setup.jsdom.js b/jest.setup.jsdom.js
@@ -12,6 +12,8 @@ global.clearImmediate = timer.clearImmediate;
 // packages/extension/__tests__/browser/main.thread.env.test.ts
 // MainThreadEnvAPI Test Suites  › can read/write text via clipboard
 let text = '';
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
 window.navigator = Object.assign(window.navigator, {
   clipboard: {
     writeText(value) {

diff --git a/package.json b/package.json
@@ -90,8 +90,8 @@
     "@types/lodash": "^4.14.182",
     "@types/node": "^10.14.6",
     "@types/node-fetch": "^2.6.1",
-    "@types/react": "^16.9.33",
-    "@types/react-dom": "^16.9.5",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/react-is": "^16.7.1",
     "@types/socket.io-client": "^1.4.32",
     "@types/temp": "^0.9.1",
@@ -116,7 +116,7 @@
     "is-git-clean": "^1.1.0",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^28.0.2",
+    "jest-environment-jsdom": "29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-jasmine2": "^28.0.3",
     "jsdom": "^20.0.0",

diff --git a/packages/comments/__test__/browser/comment-thread.test.ts b/packages/comments/__test__/browser/comment-thread.test.ts
@@ -49,7 +49,7 @@ describe('comment service test', () => {
           author: {
             name: 'User',
           },
-          body: '评论内容1',
+          body: 'Comment Text',
         },
       ],
     });
@@ -66,7 +66,7 @@ describe('comment service test', () => {
           author: {
             name: 'User',
           },
-          body: '评论内容1',
+          body: 'Comment Text',
           data: {
             b: 1,
           },
@@ -89,14 +89,14 @@ describe('comment service test', () => {
         author: {
           name: 'User',
         },
-        body: '评论内容1',
+        body: 'Comment Text',
       },
       {
         mode: CommentMode.Editor,
         author: {
           name: 'User',
         },
-        body: '评论内容2',
+        body: 'Comment Text 2',
       },
     );
     expect(thread.comments.length).toBe(2);
@@ -112,14 +112,14 @@ describe('comment service test', () => {
         author: {
           name: 'User',
         },
-        body: '评论内容1',
+        body: 'Comment Text',
       },
       {
         mode: CommentMode.Editor,
         author: {
           name: 'User',
         },
-        body: '评论内容2',
+        body: 'Comment Text 2',
       },
     );
     thread.dispose();
@@ -129,10 +129,11 @@ describe('comment service test', () => {
   it('thread context service', () => {
     const uri = URI.file('/test');
     expect(commentsService.commentsThreads.length).toBe(0);
+    const contextValue = 'isDraft';
     const thread = commentsService.createThread(uri, positionToRange(1), {
-      contextValue: 'aaa',
+      contextValue,
     });
-    expect(thread.contextKeyService.getContextValue('thread')).toBe('aaa');
+    expect(thread.contextKeyService.getContextValue('thread')).toBe(contextValue);
     expect(thread.contextKeyService.getContextValue('threadsLength')).toBe(1);
     commentsService.createThread(uri, positionToRange(2));
     // 同一个 uri 的 threadsLength 会变为 2

diff --git a/packages/comments/__test__/browser/comment.service.test.ts b/packages/comments/__test__/browser/comment.service.test.ts
@@ -1,3 +1,5 @@
+import { act } from 'react-dom/test-utils';
+
 import { Injector } from '@opensumi/di';
 import {
   CommentContentNode,
@@ -14,7 +16,6 @@ import { IconService } from '@opensumi/ide-theme/lib/browser';
 
 import { createBrowserInjector } from '../../../../tools/dev-tool/src/injector-helper';
 import { MockInjector, mockService } from '../../../../tools/dev-tool/src/mock-injector';
-import { createMockedMonaco } from '../../../monaco/__mocks__/monaco';
 import { MockContextKeyService } from '../../../monaco/__mocks__/monaco.context-key.service';
 import { CommentsModule } from '../../src/browser';
 import { ICommentsService, CommentMode } from '../../src/common';
@@ -24,7 +25,6 @@ describe('comment service test', () => {
   let commentsService: ICommentsService;
   let currentEditor: IEditor;
   beforeAll(() => {
-    (global as any).monaco = createMockedMonaco() as any;
     const monacoEditor = mockService({
       getConfiguration: () => ({
         lineHeight: 20,
@@ -77,27 +77,22 @@ describe('comment service test', () => {
         },
       ]),
     );
-  });
-
-  beforeEach(() => {
     commentsService = injector.get<ICommentsService>(ICommentsService);
     commentsService.init();
   });
 
   afterEach(() => {
-    commentsService.dispose();
-  });
-
-  afterAll(() => {
-    (global as any).monaco = undefined;
+    commentsService['threads'].clear();
   });
 
   it('create thread', () => {
     const uri = URI.file('/test');
-    const [thread] = createTestThreads(uri);
-    expect(thread.uri.isEqual(uri));
-    expect(thread.range.startLineNumber).toBe(1);
-    expect(thread.comments[0].body).toBe('评论内容');
+    act(() => {
+      const [thread] = createTestThreads(uri);
+      expect(thread.uri.isEqual(uri));
+      expect(thread.range.startLineNumber).toBe(1);
+      expect(thread.comments[0].body).toBe('Comment Text');
+    });
   });
 
   it('get commentsThreads', () => {
@@ -163,7 +158,7 @@ describe('comment service test', () => {
           author: {
             name: 'User',
           },
-          body: '评论内容',
+          body: 'Comment Text',
         },
       ],
     });
@@ -182,7 +177,7 @@ describe('comment service test', () => {
           author: {
             name: 'User',
           },
-          body: '评论内容',
+          body: 'Comment Text',
         },
       ],
     });
@@ -192,11 +187,13 @@ describe('comment service test', () => {
   it('unvisible widget not to be called with showWidgetsIfShowed method', async () => {
     const uri = URI.file('/test');
     const [thread] = createTestThreads(uri);
-    currentEditor.currentUri = uri;
-    // 生成一个 widget
-    thread.show(currentEditor);
-    // 调用隐藏方法，此时 isShow 为 false
-    thread.hide();
+    act(() => {
+      currentEditor.currentUri = uri;
+      // 生成一个 widget
+      thread.show(currentEditor);
+      // 调用隐藏方法，此时 isShow 为 false
+      thread.hide();
+    });
     const widget = thread.getWidgetByEditor(currentEditor);
     expect(widget?.isShow).toBeFalsy();
     const onShow = jest.fn();
@@ -211,10 +208,12 @@ describe('comment service test', () => {
     const uri = URI.file('/test');
     const [thread] = createTestThreads(uri);
     currentEditor.currentUri = uri;
-    // 生成一个 widget
-    thread.show(currentEditor);
-    // 先通过 dispose 方式隐藏，此时 isShow 仍为 true
-    thread.hideWidgetsByDispose();
+    act(() => {
+      // 生成一个 widget
+      thread.show(currentEditor);
+      // 先通过 dispose 方式隐藏，此时 isShow 仍为 true
+      thread.hideWidgetsByDispose();
+    });
     const widget = thread.getWidgetByEditor(currentEditor);
     expect(widget?.isShow).toBeTruthy();
     const onShow = jest.fn();
@@ -227,8 +226,10 @@ describe('comment service test', () => {
     const uri = URI.file('/test');
     const [thread] = createTestThreads(uri);
     currentEditor.currentUri = uri;
-    // 生成一个 widget
-    thread.show(currentEditor);
+    act(() => {
+      // 生成一个 widget
+      thread.show(currentEditor);
+    });
     const widget = thread.getWidgetByEditor(currentEditor);
     expect(widget?.isShow).toBeTruthy();
     thread.hideWidgetsByDispose();
@@ -256,7 +257,7 @@ describe('comment service test', () => {
             author: {
               name: 'User',
             },
-            body: '评论内容',
+            body: 'Comment Text',
           },
         ],
       }),
@@ -267,7 +268,7 @@ describe('comment service test', () => {
             author: {
               name: 'User',
             },
-            body: '评论内容2',
+            body: 'Comment Text 2',
           },
         ],
       }),

diff --git a/packages/comments/src/browser/comments-item.view.tsx b/packages/comments/src/browser/comments-item.view.tsx
@@ -136,7 +136,7 @@ const ReplyItem: React.FC<{
               {timestamp && <Timestamp timestamp={timestamp} />}
               {typeof label === 'string' ? <span className={styles.comment_item_label}>{label}</span> : label}
               {' : '}
-              <span className={styles.comment_item_body}>{body}</span>
+              <span className={styles.comment_item_body}>{typeof body === 'string' ? body : body.value}</span>
               {reply.reactions && reply.reactions.length > 0 && (
                 <CommentReactionSwitcher className={styles.reply_item_title} thread={thread} comment={reply} />
               )}

diff --git a/packages/comments/src/browser/comments-zone.view.tsx b/packages/comments/src/browser/comments-zone.view.tsx
@@ -1,7 +1,7 @@
 import clx from 'classnames';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 import { INJECTOR_TOKEN, Injectable, Autowired } from '@opensumi/di';
 import { ConfigProvider, localize, AppConfig, useInjectable, Event, Emitter } from '@opensumi/ide-core-browser';
@@ -160,11 +160,10 @@ export class CommentsZoneWidget extends ResizeZoneWidget implements ICommentsZon
     this._container.appendChild(this._wrapper);
     this.observeContainer(this._wrapper);
     const customRender = this.commentsFeatureRegistry.getZoneWidgetRender();
-    ReactDOM.render(
+    ReactDOM.createRoot(this._wrapper).render(
       <ConfigProvider value={this.appConfig}>
         {customRender ? customRender(thread, this) : <CommentsZone thread={thread} widget={this} />}
       </ConfigProvider>,
-      this._wrapper,
     );
   }
 

diff --git a/packages/components/src/dropdown/dropdown.tsx b/packages/components/src/dropdown/dropdown.tsx
@@ -1,7 +1,7 @@
 import RightOutlined from '@ant-design/icons/RightOutlined';
 import classNames from 'classnames';
 import RCDropdown from 'rc-dropdown';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import { tuple } from '../utils/type';
 import { warning } from '../utils/warning';
@@ -44,7 +44,7 @@ export interface DropDownProps {
   openClassName?: string;
 }
 
-export default class Dropdown extends React.Component<DropDownProps, any> {
+export default class Dropdown extends React.Component<PropsWithChildren<DropDownProps>, any> {
   static defaultProps = {
     mouseEnterDelay: 0.15,
     mouseLeaveDelay: 0.1,

diff --git a/packages/components/src/icon/iconfont-cn.tsx b/packages/components/src/icon/iconfont-cn.tsx
@@ -47,7 +47,7 @@ const svgBaseProps = {
   fill: 'currentColor',
 };
 
-export function createFromIconfontCN<T>(options: CustomIconOptions = {}): React.SFC<IconFontProps<T>> {
+export function createFromIconfontCN<T>(options: CustomIconOptions = {}) {
   const { scriptUrl, extraCommonProps = {} } = options;
 
   /**

diff --git a/packages/components/src/menu/index.tsx b/packages/components/src/menu/index.tsx
@@ -57,6 +57,7 @@ export interface MenuProps {
   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
   overflowedIndicator?: React.ReactNode;
   forceSubMenuRender?: boolean;
+  children?: React.ReactNode;
 }
 
 type InternalMenuProps = MenuProps;

diff --git a/packages/components/src/modal/Modal.tsx b/packages/components/src/modal/Modal.tsx
@@ -3,14 +3,13 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Dialog from 'rc-dialog';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import { Button } from '../button';
 import type { ButtonType, ButtonProps } from '../button';
 
 import { getConfirmLocale, ModalLocale } from './locale';
 
-
 let mousePosition: { x: number; y: number } | null;
 export const destroyFns: Array<() => void> = [];
 
@@ -119,7 +118,7 @@ export type ModalFunc = (props: ModalFuncProps) => {
   update: (newConfig: ModalFuncProps) => void;
 };
 
-export default class Modal extends React.Component<ModalProps, {}> {
+export default class Modal extends React.Component<PropsWithChildren<ModalProps>, {}> {
   static info: ModalFunc;
 
   static success: ModalFunc;

diff --git a/packages/components/src/overlay/index.tsx b/packages/components/src/overlay/index.tsx
@@ -1,5 +1,5 @@
 import clsx from 'classnames';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import { Modal, ModalProps } from '../modal';
 
@@ -22,7 +22,7 @@ export interface IOverlayProps {
   keyboard?: boolean;
 }
 
-export const Overlay: React.FC<IOverlayProps> = ({
+export const Overlay: React.FC<PropsWithChildren<IOverlayProps>> = ({
   maskClosable = false,
   closable = true,
   className,

diff --git a/packages/components/src/recycle-tree/RecycleTree.tsx b/packages/components/src/recycle-tree/RecycleTree.tsx
@@ -36,6 +36,7 @@ export interface IRecycleTreeSize {
 }
 
 export interface IRecycleTreeProps<T = TreeModel> {
+  children(props: any): React.ReactNode;
   model: T;
   /**
    * 容器高度