Skip to content

Commit a2aa773

Browse files
hacke2hacke2
authored
feat: 升级至 CodeBlitz 2.0 (#10)
1 parent e64d41c commit a2aa773

File tree

14 files changed

+3183
-3447
lines changed

14 files changed

+3183
-3447
lines changed

‎code/index.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import { IAppInstance, AppRenderer, getDefaultLayoutConfig, SlotLocation, AppRenderer2 } from '@codeblitzjs/ide-core';
2+
import ReactDOM from 'react-dom/client';
3+
import { IAppInstance, AppRenderer, getDefaultLayoutConfig, SlotLocation } from '@codeblitzjs/ide-core';
44
import '@codeblitzjs/ide-core/languages';
55
import { CodeServiceModule } from '@codeblitzjs/ide-code-service';
66
import { CodeAPIModule, CodePlatform } from '@codeblitzjs/ide-code-api';
@@ -128,7 +128,7 @@ const App = () => (
128128
workspaceDir: `${platform}/${config.owner}/${config.name}`,
129129
layoutConfig,
130130
defaultPreferences: {
131-
'general.theme': 'opensumi-dark',
131+
'general.theme': 'opensumi-design-dark-theme',
132132
},
133133
}}
134134
runtimeConfig={{
@@ -139,11 +139,11 @@ const App = () => (
139139
);
140140

141141
let key = 0;
142-
const render = () => ReactDOM.render(<App key={key++} />, document.getElementById('main'));
142+
const render = () => ReactDOM.createRoot(document.getElementById('main')!).render(<App key={key++} />);
143143
render();
144144
// for dispose test
145145
window.reset = (destroy = false) =>
146-
destroy ? ReactDOM.render(<div>destroyed</div>, document.getElementById('main')) : render();
146+
destroy ? ReactDOM.createRoot(document.getElementById('main')!).render(<div>destroyed</div>) : render();
147147

148148
declare global {
149149
interface Window {

‎collaboration/index.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect, useRef } from 'react';
2-
import ReactDOM from 'react-dom';
2+
import ReactDOM from 'react-dom/client';
33

44
import { AppRenderer, SlotLocation, BoxPanel, SlotRenderer } from '@codeblitzjs/ide-core';
55
import '@codeblitzjs/ide-core/languages/cpp';
@@ -16,7 +16,7 @@ import '@codeblitzjs/ide-core/languages/python';
1616
import css from '@codeblitzjs/ide-core/extensions/codeblitz.css-language-features-worker';
1717
import html from '@codeblitzjs/ide-core/extensions/codeblitz.html-language-features-worker';
1818
import typescript from '@codeblitzjs/ide-core/extensions/codeblitz.typescript-language-features-worker';
19-
import collaboration from '@codeblitzjs/ide-core/extensions/codeblitz.collaboration';
19+
// import collaboration from '@codeblitzjs/ide-core/extensions/codeblitz.collaboration';
2020
import * as plugin from './plugin';
2121

2222
import Modal from 'antd/lib/modal'
@@ -83,7 +83,7 @@ const App = () => {
8383
layoutConfig,
8484
layoutComponent: LayoutComponent,
8585
defaultPreferences: {
86-
'general.theme': 'opensumi-dark',
86+
'general.theme': 'opensumi-design-dark-theme',
8787
'general.language': 'zh-CN',
8888
'editor.fontSize': 14,
8989
'editor.tabSize': 2,
@@ -94,7 +94,7 @@ const App = () => {
9494
'alitcode.locale': 'zh-CN',
9595
'alitcode.debug': true,
9696
},
97-
extensionMetadata: [html, css, typescript, collaboration],
97+
extensionMetadata: [html, css, typescript],
9898
}}
9999
runtimeConfig={{
100100
scenario: null,
@@ -118,4 +118,4 @@ const App = () => {
118118
);
119119
};
120120

121-
ReactDOM.render(<App />, document.getElementById('main'));
121+
ReactDOM.createRoot(document.getElementById('main')!).render(<App />);

‎common/shims/react-dom-client.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// src/shims/react-dom-client.js
2+
import ReactDOM from 'react-dom';
3+
4+
export function createRoot(container) {
5+
return {
6+
render: (element) => ReactDOM.render(element, container),
7+
};
8+
}

‎editor.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useMemo } from "react";
2-
import ReactDOM from "react-dom";
2+
import ReactDOM from "react-dom/client";
33
// 如不需要扩展，从 codeblitz.editor 引入
44
import { IAppInstance, EditorRenderer } from "@codeblitzjs/ide-core/lib/editor.all";
55
import { request } from '@codeblitzjs/ide-common';
@@ -200,8 +200,8 @@ const App = () => {
200200
workspaceDir: project,
201201
// 默认配置
202202
defaultPreferences: {
203-
// 白色主题 opensumi-light opensumi-dark
204-
"general.theme": "opensumi-light",
203+
// 白色主题 opensumi-design-light-theme opensumi-design-dark-theme
204+
'general.theme': 'opensumi-design-light-theme',
205205
// 最后一行禁止继续滚动
206206
"editor.scrollBeyondLastLine": false,
207207
// 只读模式，目前只读和读写无法切换，设置了后不可更改
@@ -270,11 +270,11 @@ const App = () => {
270270
);
271271
};
272272

273-
ReactDOM.render(<App />, document.getElementById("main"));
273+
ReactDOM.createRoot(document.getElementById("main")!).render(<App />);
274274

275275
// for test
276276
window.destroy = () => {
277-
ReactDOM.render(<div>destroyed</div>, document.getElementById("main"));
277+
ReactDOM.createRoot(document.getElementById("main")!).render(<div>destroyed</div>);
278278
};
279279

280280
declare global {

‎extensions/collaboration/src/preference.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const initializePreferenceCommands = (context: ExtensionContext) => {
1010
} else if (type === 'tabSize') {
1111
workspace.getConfiguration().update('editor.tabSize', value, true);
1212
} else if (type === 'theme') {
13-
const themeType = value === 'dark' ? 'opensumi-dark' : 'opensumi-light';
13+
const themeType = value === 'dark' ? 'opensumi-design-dark-theme' : 'opensumi-design-light-theme';
1414
workspace.getConfiguration().update('general.theme', themeType, true);
1515
}
1616
});

‎filesystem.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useMemo } from 'react';
2-
import ReactDOM from 'react-dom';
2+
import ReactDOM from 'react-dom/client';
33

44
import { AppRenderer, BrowserFSFileType as FileType, IAppRendererProps, Uri , requireModule} from '@codeblitzjs/ide-core';
55
import '@codeblitzjs/ide-core/bundle/codeblitz.css';
@@ -188,7 +188,7 @@ const App = () => {
188188
appConfig={{
189189
workspaceDir,
190190
defaultPreferences: {
191-
'general.theme': 'opensumi-light',
191+
'general.theme': 'opensumi-design-light-theme',
192192
},
193193
}}
194194
runtimeConfig={{
@@ -201,5 +201,5 @@ const App = () => {
201201
};
202202

203203
zipDataPromise.then(() => {
204-
ReactDOM.render(<App />, document.getElementById('main'));
204+
ReactDOM.createRoot(document.getElementById('main')!).render(<App />);
205205
});

‎main.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import ReactDOM from 'react-dom/client';
33
import Button from 'antd/lib/button';
44
import 'antd/lib/button/style/index.css';
55

@@ -122,8 +122,8 @@ const App: React.FC = () => {
122122
layoutComponent: LayoutComponent,
123123
// 默认偏好设置
124124
defaultPreferences: {
125-
// 主题色 opensumi-light | opensumi-dark
126-
'general.theme': 'opensumi-light',
125+
// 主题色 opensumi-design-light-theme | opensumi-design-dark-theme
126+
'general.theme': 'opensumi-design-light-theme',
127127
'editor.previewMode': false,
128128
// 'editor.forceReadOnly': true,
129129

@@ -176,4 +176,4 @@ const App: React.FC = () => {
176176
);
177177
};
178178

179-
ReactDOM.render(<App />, document.getElementById('main'));
179+
ReactDOM.createRoot(document.getElementById('main')!).render(<App />);

‎merge-editor/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import ReactDOM from 'react-dom/client';
33

44
import { AppRenderer, BrowserFSFileType as FileType } from '@codeblitzjs/ide-core'
55
import '@codeblitzjs/ide-core/bundle/codeblitz.css';
@@ -122,4 +122,4 @@ const App = () => {
122122
)
123123
}
124124

125-
ReactDOM.render(<App />, document.getElementById('main'))
125+
ReactDOM.createRoot(document.getElementById('main')!).render(<App />);

‎package.json

+16-14
Original file line numberDiff line numberDiff line change
@@ -17,34 +17,36 @@
1717
"author": "",
1818
"license": "ISC",
1919
"devDependencies": {
20-
"@types/react": "^16.14.2",
21-
"@types/react-dom": "^16.9.10",
22-
"css-loader": "^5.0.1",
20+
"@types/react": "^18.2.0",
21+
"@types/react-dom": "^18.2.0",
22+
"css-loader": "^6.7.3",
2323
"dotenv": "^8.2.0",
2424
"file-loader": "^6.2.0",
2525
"html-webpack-plugin": "^4.5.1",
2626
"less": "^3.13.1",
27-
"less-loader": "^7.1.0",
27+
"less-loader": "^12.1.0",
28+
"node-polyfill-webpack-plugin": "^3.0.0",
29+
"path-browserify": "^1.0.1",
2830
"raw-loader": "^4.0.2",
29-
"style-loader": "^2.0.0",
30-
"ts-loader": "^8.0.14",
31-
"typescript": "^4.1.3",
31+
"style-loader": "^3.3.1",
32+
"ts-loader": "^9.5.1",
33+
"typescript": "^5.5.4",
3234
"url-loader": "^4.1.1",
33-
"webpack": "^4",
34-
"webpack-cli": "^4.4.0",
35-
"webpack-dev-server": "^3.11.2"
35+
"webpack": "^5.89.0",
36+
"webpack-cli": "^5.1.4",
37+
"webpack-dev-server": "^4.15.1"
3638
},
3739
"dependencies": {
38-
"@codeblitzjs/ide-core": "1.0.5-rc-1699354290.0",
40+
"@codeblitzjs/ide-core": "^2.2.1",
3941
"ahooks": "2",
4042
"antd": "^3.20.3",
4143
"file-saver": "^2.0.5",
4244
"jszip": "^3.10.1",
4345
"localforage": "^1.10.0",
4446
"lodash": "^4.17.21",
4547
"ot": "^0.0.15",
46-
"react": "^16.14.0",
47-
"react-dom": "^16.14.0",
48+
"react": "^18.2.0",
49+
"react-dom": "^18.2.0",
4850
"sha1": "^1.1.1",
4951
"socket.io": "^4.7.2",
5052
"socket.io-client": "^4.7.2"
@@ -53,4 +55,4 @@
5355
"@rjsf/core": "5.5.2"
5456
},
5557
"repository": "[email protected]:opensumi/codeblitz-sample.git"
56-
}
58+
}

‎search.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import ReactDOM from 'react-dom/client';
33

44
import { AppRenderer, requireModule, WORKSPACE_ROOT } from '@codeblitzjs/ide-core';
55
import '@codeblitzjs/ide-core/bundle/codeblitz.css';
@@ -124,5 +124,5 @@ const App = () => {
124124
};
125125

126126
zipDataPromise.then(() => {
127-
ReactDOM.render(<App />, document.getElementById('main'));
127+
ReactDOM.createRoot(document.getElementById('main')!).render(<App />);
128128
});

‎startup.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import ReactDOM from 'react-dom/client';
33

44
import { AppRenderer, BrowserFSFileType as FileType, IAppInstance } from '@codeblitzjs/ide-core'
55
import { IEventBus, BrowserModule, Domain, ClientAppContribution, Disposable } from '@opensumi/ide-core-browser';
@@ -117,7 +117,10 @@ const App = () => {
117117
workspaceDir: 'codeblitz-startup',
118118
// modules:[unregisterKeybindingModule],
119119
extensionMetadata: [WorkerExample],
120-
modules: [CustomModule]
120+
modules: [CustomModule],
121+
defaultPreferences:{
122+
'general.theme': 'opensumi-design-dark-theme',
123+
},
121124
}}
122125
runtimeConfig={{
123126
workspace: {
@@ -159,4 +162,4 @@ const App = () => {
159162
)
160163
}
161164

162-
ReactDOM.render(<App />, document.getElementById('main'))
165+
ReactDOM.createRoot(document.getElementById('main')!).render(<App />);

‎webpack.config.js

+32-26
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
const path = require("path");
22
const HtmlWebpackPlugin = require("html-webpack-plugin");
33
require("dotenv").config({ path: path.join(__dirname, "./.env") });
4-
const styleLoader = require.resolve("style-loader");
4+
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
5+
56
const webpack = require('webpack');
67

78
module.exports = (env) => ({
@@ -12,22 +13,21 @@ module.exports = (env) => ({
1213
publicPath: "/",
1314
},
1415
devtool: "inline-source-map",
15-
mode: "development",
16-
// webpack v4
17-
node: {
18-
net: "empty",
19-
fs: "empty",
20-
},
16+
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
2117
resolve: {
2218
extensions: [".ts", ".tsx", ".js", ".json", ".less"],
23-
// webpack v5
24-
// fallback: {
25-
// net: false,
26-
// child_process: false,
27-
// http: false,
28-
// https: false,
29-
// fs: false,
30-
// }
19+
fallback: {
20+
"path": require.resolve("path-browserify"),
21+
"fs": false,
22+
"crypto": false,
23+
"stream": false,
24+
"buffer": false,
25+
"os": false,
26+
"process": false,
27+
}
28+
},
29+
experiments: {
30+
asyncWebAssembly: true,
3131
},
3232
module: {
3333
rules: [
@@ -63,7 +63,7 @@ module.exports = (env) => ({
6363
test: /\.module.less$/,
6464
use: [
6565
{
66-
loader: styleLoader,
66+
loader: "style-loader",
6767
options: {
6868
esModule: false,
6969
},
@@ -76,7 +76,7 @@ module.exports = (env) => ({
7676
esModule: false,
7777
modules: {
7878
mode: "local",
79-
localIdentName: "[local]___[hash:base32:5]",
79+
localIdentName: "[local]___[hash:base64:5]",
8080
},
8181
},
8282
},
@@ -94,7 +94,7 @@ module.exports = (env) => ({
9494
test: /^((?!\.module).)*less$/,
9595
use: [
9696
{
97-
loader: styleLoader,
97+
loader: "style-loader",
9898
options: {
9999
esModule: false,
100100
},
@@ -158,21 +158,27 @@ module.exports = (env) => ({
158158
HOST: JSON.stringify(process.env.HOST || ''),
159159
},
160160
}),
161+
new NodePolyfillPlugin({
162+
includeAliases: ['process', 'Buffer'],
163+
}),
161164
],
162165
devServer: {
163-
disableHostCheck: true,
164-
staticOptions: {
165-
setHeaders: (res) => {
166-
res.setHeader("Access-Control-Allow-Origin", "*");
167-
},
166+
static: {
167+
directory: path.join(__dirname, 'assets'),
168168
},
169-
contentBasePublicPath: "/assets/~",
170-
contentBase: "/",
171-
proxy: { },
169+
allowedHosts: "all",
172170
host: "0.0.0.0",
173171
port: 8001,
174172
historyApiFallback: {
175173
disableDotRule: true,
176174
},
175+
hot: true,
176+
client: {
177+
overlay: {
178+
errors: true,
179+
warnings: false,
180+
runtimeErrors: false,
181+
},
182+
},
177183
},
178184
});

0 commit comments

Comments
 (0)