chore: use yarn@3

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -70,11 +70,12 @@
     "localforage": "^1.10.0",
     "minimist": "^1.2.5",
     "prettier": "^2.1.2",
+    "shelljs": "^0.8.4",
     "signale": "^1.4.0",
     "ts-jest": "^26.4.4",
     "ts-node": "^9.0.0",
     "tslib": "^2.2.0",
-    "typescript": "^4.2.3",
-    "shelljs": "^0.8.4"
-  }
+    "typescript": "^4.2.3"
+  },
+  "packageManager": "[email protected]"
 }

packages/cli/package.json

@@ -13,11 +13,13 @@
     "opensumi": "2.16.1",
     "node": ">=10.0.0"
   },
-  "scripts": {},
   "dependencies": {
     "@codeblitzjs/ide-common": "1.0.4",
     "@opensumi/ide-extension": "2.27.2-next-1702525824.0",
+    "async-retry": "^1.3.1",
+    "await-event": "^2.1.0",
     "commander": "^7.2.0",
+    "content-disposition": "^0.5.3",
     "fs-extra": "^9.0.1",
     "lodash.flatten": "^4.4.0",
     "lodash.pick": "^4.4.0",
@@ -28,11 +30,8 @@
     "signale": "^1.4.0",
     "tslib": "^2.2.0",
     "urllib": "^2.36.1",
-    "yauzl": "^2.10.0",
-    "async-retry": "^1.3.1",
-    "await-event": "^2.1.0",
-    "content-disposition": "^0.5.3",
-    "uuid": "^7.0.2"
+    "uuid": "^7.0.2",
+    "yauzl": "^2.10.0"
   },
   "devDependencies": {
     "@types/commander": "^2.12.2",

packages/code-api/package.json

@@ -10,7 +10,6 @@
   "keywords": [
     "opensumi codeblitzjs"
   ],
-  "scripts": {},
   "dependencies": {
     "@codeblitzjs/ide-common": "1.0.4",
     "@codeblitzjs/ide-sumi-core": "1.0.4",

packages/code-service/package.json

@@ -10,7 +10,6 @@
   "keywords": [
     "opensumi codeblitzjs"
   ],
-  "scripts": {},
   "dependencies": {
     "@codeblitzjs/ide-code-api": "1.0.4",
     "@codeblitzjs/ide-sumi-core": "1.0.4",

packages/common/package.json

@@ -9,6 +9,5 @@
   ],
   "keywords": [
     "opensumi codeblitzjs"
-  ],
-  "scripts": {}
+  ]
 }

packages/core/package.json

@@ -78,11 +78,11 @@
     "tslib": "^2.2.0"
   },
   "devDependencies": {
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.9"
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0"
   },
   "peerDependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

packages/core/src/api/renderApp.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { IReporterService, localize, getDebugLogger } from '@opensumi/ide-core-common';
 import { REPORT_NAME, RuntimeConfig } from '@codeblitzjs/ide-sumi-core';
 import { createApp } from './createApp';
@@ -27,31 +27,26 @@ export const renderApp = (domElement: HTMLElement, props: IAppRendererProps) =>
   const app = createApp(opts);
   const themeType = app.currentThemeType;
   const className = opts.runtimeConfig.hideEditorTab ? styles['hide-editor-tab'] : '';
+  const root = createRoot(domElement);
 
-  ReactDOM.render(
-    <Root status="loading" theme={themeType} Landing={Landing} className={className} />,
-    domElement
-  );
+  root.render(<Root status="loading" theme={themeType} Landing={Landing} className={className} />);
 
   app
     .start((appElement) => {
       return new Promise((resolve) => {
-        ReactDOM.render(
+        root.render(
           <Root status="success" theme={themeType} className={className}>
-            {appElement}
-          </Root>,
-          domElement,
-          resolve
+            {appElement({})}
+          </Root>
         );
       });
     })
     .then(() => {
       onLoad?.(app);
     })
     .catch((err: Error) => {
-      ReactDOM.render(
-        <Root status="error" error={err?.message || localize('error.unknown')} theme={themeType} />,
-        domElement
+      root.render(
+        <Root status="error" error={err?.message || localize('error.unknown')} theme={themeType} />
       );
 
       (app.injector.get(IReporterService) as IReporterService).point(
@@ -88,7 +83,7 @@ export const AppRenderer: React.FC<IAppRendererProps> = ({ onLoad, Landing, ...o
   useEffect(() => {
     app
       .start((appElement) => {
-        appElementRef.current = appElement;
+        appElementRef.current = appElement({});
         setState({ status: 'success' });
         return Promise.resolve();
       })

packages/core/src/api/renderEditor.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { IReporterService, localize, getDebugLogger } from '@opensumi/ide-core-common';
 import { REPORT_NAME } from '@codeblitzjs/ide-sumi-core';
 import { createEditor } from './createEditor';
@@ -23,31 +23,30 @@ export const renderEditor = (domElement: HTMLElement, props: IEditorRendererProp
     opts.runtimeConfig.hideEditorTab ? styles['hide-editor-tab'] : ''
   }`;
 
-  ReactDOM.render(<Root status="loading" Landing={Landing} className={className} />, domElement);
+  const root = createRoot(domElement);
+
+  root.render(<Root status="loading" Landing={Landing} className={className} />);
 
   app
     .start((appElement) => {
       return new Promise((resolve) => {
-        ReactDOM.render(
+        root.render(
           <Root status="success" className={className}>
-            {appElement}
-          </Root>,
-          domElement,
-          resolve
+            {appElement({})}
+          </Root>
         );
       });
     })
     .then(() => {
       onLoad?.(app);
     })
     .catch((err: Error) => {
-      ReactDOM.render(
+      root.render(
         <Root
           status="error"
           error={err?.message || localize('error.unknown')}
           className={className}
-        />,
-        domElement
+        />
       );
 
       (app.injector.get(IReporterService) as IReporterService).point(
@@ -86,7 +85,7 @@ export const EditorRenderer: React.FC<IEditorRendererProps> = ({ onLoad, Landing
 
     app
       .start((appElement) => {
-        appElementRef.current = appElement;
+        appElementRef.current = appElement({});
         setState({ status: 'success' });
         return Promise.resolve();
       })

packages/core/src/core/types.ts

@@ -10,4 +10,5 @@ export interface LandingProps {
 
 export interface RootProps extends LandingProps {
   Landing?: ComponentType<LandingProps>;
+  children?: React.ReactNode;
 }

packages/i18n/package.json

@@ -10,7 +10,6 @@
   "keywords": [
     "opensumi codeblitzjs"
   ],
-  "scripts": {},
   "dependencies": {
     "@codeblitzjs/ide-common": "1.0.4",
     "@codeblitzjs/ide-sumi-core": "1.0.4",

packages/plugin/package.json

@@ -10,7 +10,6 @@
   "keywords": [
     "opensumi codeblitzjs"
   ],
-  "scripts": {},
   "dependencies": {
     "@codeblitzjs/ide-common": "1.0.4",
     "@codeblitzjs/ide-sumi-core": "1.0.4",

packages/startup/package.json

@@ -10,7 +10,6 @@
   "keywords": [
     "opensumi codeblitzjs"
   ],
-  "scripts": {},
   "dependencies": {
     "@ant-design/icons": "^4.0.0",
     "@codeblitzjs/ide-cli": "1.0.4",
@@ -28,14 +27,14 @@
     "umi-request": "^1.4.0"
   },
   "devDependencies": {
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.9",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "js-cookie": "^2.2.1",
     "query-string": "^7.0.0",
     "umi-request": "^1.3.5"
   },
   "peerDependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

packages/startup/src/editor/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { IAppInstance, EditorRenderer } from '@codeblitzjs/ide-core/lib/editor';
 import * as Alex from '@codeblitzjs/ide-core/lib/editor';
 // 引入 extension
@@ -29,11 +29,8 @@ const fileOptions = (function transform(obj) {
   });
 })({
   'opensumi/core': {
-    main: [
-      'README.md',
-      'package.json'
-    ],
-  }
+    main: ['README.md', 'package.json'],
+  },
 });
 
 const App = () => {
@@ -57,10 +54,10 @@ const App = () => {
           Accept: 'application/vnd.github.v3.raw',
         },
         responseType: 'arrayBuffer',
-      },
+      }
     );
     if (res) {
-      return res
+      return res;
     }
     throw new Error(`readFile`);
   };
@@ -205,11 +202,13 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('main'));
+const root = createRoot(document.getElementById('main') as HTMLElement);
+
+root.render(<App />);
 
 // for test
 window.destroy = () => {
-  ReactDOM.render(<div>destroyed</div>, document.getElementById('main'));
+  root.render(<div>destroyed</div>);
 };
 
 declare global {

packages/startup/src/filesystem/index.tsx

@@ -1,6 +1,10 @@
 import React, { useState, useMemo } from 'react';
-import ReactDOM from 'react-dom';
-import { AppRenderer, BrowserFSFileType as FileType, IAppRendererProps } from '@codeblitzjs/ide-core';
+import { createRoot } from 'react-dom/client';
+import {
+  AppRenderer,
+  BrowserFSFileType as FileType,
+  IAppRendererProps,
+} from '@codeblitzjs/ide-core';
 import '@codeblitzjs/ide-core/languages';
 import Select from 'antd/lib/select';
 import 'antd/lib/select/style';
@@ -174,6 +178,8 @@ const App = () => {
   );
 };
 
+const root = createRoot(document.getElementById('main') as HTMLElement);
+
 zipDataPromise.then(() => {
-  ReactDOM.render(<App />, document.getElementById('main'));
+  root.render(<App />);
 });

packages/startup/src/startup/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import {
   IAppInstance,
   AppRenderer,
@@ -147,11 +147,13 @@ const App = () => (
 );
 
 let key = 0;
-const render = () => ReactDOM.render(<App key={key++} />, document.getElementById('main'));
+
+const root = createRoot(document.getElementById('main') as HTMLElement);
+
+const render = () => root.render(<App key={key++} />);
 render();
 // for dispose test
-window.reset = (destroy = false) =>
-  destroy ? ReactDOM.render(<div>destroyed</div>, document.getElementById('main')) : render();
+window.reset = (destroy = false) => (destroy ? root.render(<div>destroyed</div>) : render());
 
 declare global {
   interface Window {

packages/sumi-core/package.json

@@ -10,7 +10,6 @@
   "keywords": [
     "opensumi codeblitzjs"
   ],
-  "scripts": {},
   "dependencies": {
     "@codeblitzjs/ide-browserfs": "1.0.0",
     "@codeblitzjs/ide-common": "1.0.4",

packages/sumi-core/src/server/opensumi-extension/extension.service.client.ts

@@ -6,11 +6,15 @@ import { ServerConfig } from '../core/app';
 import { getExtensionPath } from '../../common/util';
 import { EXT_SCHEME } from '../../common/constant';
 import { AppConfig } from '../../common';
+import { IExtensionLanguagePack } from '@opensumi/ide-extension/lib/common/vscode';
 
 const { posix } = path;
 
 @Injectable()
 export class ExtensionServiceClientImpl implements IExtensionNodeClientService {
+  getLanguagePack(languageId: string): IExtensionLanguagePack | undefined {
+    throw new Error('Method not implemented.');
+  }
 
   setupNLSConfig(languageId: string, storagePath: string): Promise<void> {
     return Promise.resolve();

packages/toolkit/package.json

@@ -24,8 +24,8 @@
     "buffer": "^6.0.3",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@types/copy-webpack-plugin": "^6.3.0",