CodeFuse IDE Support Web IDE #32 (#54)

* WIP: CodeFuse IDE Support Web IDE #32

* Delete patches/@opensumi+ide-core-browser+3.4.4.patch

* chore(deps): bump cross-spawn from 6.0.5 to 6.0.6 (#60)

Bumps [cross-spawn](https://github.com/moxystudio/node-cross-spawn) from 6.0.5 to 6.0.6.
- [Changelog](https://github.com/moxystudio/node-cross-spawn/blob/v6.0.6/CHANGELOG.md)
- [Commits](moxystudio/node-cross-spawn@v6.0.5...v6.0.6)

---
updated-dependencies:
- dependency-name: cross-spawn
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
(cherry picked from commit e1e7ae7)

* chore(deps-dev): bump @electron-forge/cli from 7.4.0 to 7.5.0 (#58)

Bumps [@electron-forge/cli](https://github.com/electron/forge) from 7.4.0 to 7.5.0.
- [Release notes](https://github.com/electron/forge/releases)
- [Changelog](https://github.com/electron/forge/blob/main/CHANGELOG.md)
- [Commits](electron/forge@v7.4.0...v7.5.0)

---
updated-dependencies:
- dependency-name: "@electron-forge/cli"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
(cherry picked from commit b1e2b05)

* chore(deps-dev): bump app-builder-lib from 24.13.3 to 25.1.8 (#59)

Bumps [app-builder-lib](https://github.com/electron-userland/electron-builder/tree/HEAD/packages/app-builder-lib) from 24.13.3 to 25.1.8.
- [Release notes](https://github.com/electron-userland/electron-builder/releases)
- [Changelog](https://github.com/electron-userland/electron-builder/blob/master/packages/app-builder-lib/CHANGELOG.md)
- [Commits](https://github.com/electron-userland/electron-builder/commits/electron-builder@25.1.8/packages/app-builder-lib)

---
updated-dependencies:
- dependency-name: app-builder-lib
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
(cherry picked from commit 191729d)

* fix(deps): update opensumi packages to v3.6.0 (#65)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
(cherry picked from commit 771e23b)

* chore(deps-dev): bump webpack-dev-server from 5.0.4 to 5.1.0 (#64)

Bumps [webpack-dev-server](https://github.com/webpack/webpack-dev-server) from 5.0.4 to 5.1.0.
- [Release notes](https://github.com/webpack/webpack-dev-server/releases)
- [Changelog](https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md)
- [Commits](webpack/webpack-dev-server@v5.0.4...v5.1.0)

---
updated-dependencies:
- dependency-name: webpack-dev-server
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
(cherry picked from commit c6707aa)

* WIP: CodeFuse IDE Support Web IDE #32

* CodeFuse IDE Support Web IDE #32

* CodeFuse IDE Support Web IDE #32

---------

Co-authored-by: weimin2.zhou <weimin2.zhou@tcl.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Author: 4 people

.env.sample

@@ -0,0 +1,4 @@
+CODE_WINDOW_CLIENT_ID=CODE_WINDOW_CLIENT_ID
+IDE_LOG_HOME=""
+IDE_SERVER_PORT=8000
+WS_PATH=ws://localhost:8080

.gitignore

@@ -81,6 +81,7 @@ jspm_packages/
 dist
 lib
 out
+out-web
 .vscode/*
 !.vscode/launch.json
 

README.md

@@ -43,6 +43,18 @@ yarn run electron-rebuild
 yarn run start
 ```
 
+### Start the project (web)
+```bash
+# install dependencies
+yarn
+# rebuild native dependencies for electron
+yarn run electron-rebuild
+# build web
+yarn run build-web
+# start project
+yarn run start-web
+```
+
 ## Links
 
 - **CodeFuse**: https://codefuse.ai

build/rebuild.ts

@@ -42,5 +42,7 @@ export const rebuild = async (config?: { arch?: string, cwd?: string, silent?: b
 }
 
 if (require.main === module) {
-  rebuild()
+  rebuild({
+    silent: false
+  })
 }

build/webpack-web/web-start.ts

@@ -0,0 +1,43 @@
+import { exec } from 'child_process';
+import path from 'path';
+
+// 定义每个命令的启动函数
+const commands = {
+    client: 'cross-env NODE_ENV=development WEBPACK_LOG_LEVEL=info webpack-dev-server --client-logging info --config ./build/webpack-web/webpack.browser.config.ts --progress --color',
+    webview: 'cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack-web/webpack.webview.config.ts --progress --color',
+    server: 'cross-env NODE_ENV=development node -r ts-node/register -r tsconfig-paths/register src/bootstrap-web/node/index.ts'
+};
+
+// 启动子进程并打印输出
+function startProcess(command: string, name: string) {
+    const child = exec(command, {cwd: path.resolve(__dirname, '../../')}, (error, stdout, stderr) => {
+        if (error) {
+            console.error(`[${name}] Error: ${error.message}`);
+            return;
+        }
+
+        if (stderr) {
+            console.error(`[${name}] stderr: ${stderr}`);
+            return;
+        }
+
+        console.log(`[${name}] stdout: ${stdout}`);
+    });
+
+    child.stdout?.on('data', (data) => {
+        console.log(`[${name}] ${data.toString()}`);
+    });
+
+    child.stderr?.on('data', (data) => {
+        console.error(`[${name}] ${data.toString()}`);
+    });
+}
+
+// 启动所有进程
+function startAll() {
+    Object.entries(commands).forEach(([name, command]) => {
+        startProcess(command, name);
+    });
+}
+
+startAll();

build/webpack-web/webpack.base.config.ts

@@ -0,0 +1,59 @@
+import { Configuration, DefinePlugin } from 'webpack'
+import path from 'node:path'
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
+import { merge } from 'webpack-merge'
+
+export const webpackDir = path.resolve(path.join(__dirname,'..','..', 'out'))
+
+export const devServerPort = 8080
+
+export const codeWindowName = 'code'
+
+export const updateWindowName = 'update'
+
+export const createConfig = (config: Configuration | ((_env: unknown, argv: Record<string, any>) => Configuration)) => (_env: unknown, argv: Record<string, any>) => {
+  return merge({
+    mode: argv.mode,
+    devtool: argv.mode === 'development' ? 'source-map': false,
+    node: {
+      __dirname: false,
+      __filename: false,
+    },
+    output: {
+      asyncChunks: false,
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.mjs', '.js', '.json', '.less'],
+      plugins: [
+        new TsconfigPathsPlugin({
+          configFile: path.join(__dirname, '../../tsconfig.json'),
+        }),
+      ],
+    },
+    module: {
+      // https://github.com/webpack/webpack/issues/196#issuecomment-397606728
+      exprContextCritical: false,
+      rules: [
+        {
+          test: /\.tsx?$/,
+          loader: 'ts-loader',
+          exclude: /(node_modules|\.webpack)/,
+          options: {
+            configFile: path.join(__dirname, '../../tsconfig.json'),
+            transpileOnly: true,
+          },
+        },
+        {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: 'javascript/auto',
+        },
+      ],
+    },
+    plugins: [
+      new DefinePlugin({
+        'process.env.KTLOG_SHOW_DEBUG': argv.mode === 'development',
+      }),
+    ],
+  }, typeof config === 'function' ? config(_env, argv) : config);
+};

build/webpack-web/webpack.browser.config.ts

@@ -0,0 +1,198 @@
+import path from 'node:path';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CopyPlugin from 'copy-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import NodePolyfillPlugin from "node-polyfill-webpack-plugin"
+import {DefinePlugin} from 'webpack'
+import fs from 'fs'
+import { createConfig, webpackDir, devServerPort } from './webpack.base.config';
+import {config} from 'dotenv'
+config({
+  path: path.join(__dirname, '../../.env')
+})
+
+const srcDir = path.resolve('src/bootstrap-web/browser');
+const outDir = path.resolve(webpackDir);
+const publicDir = path.join(__dirname, '../../public');
+
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+const idePkg = JSON.parse(fs.readFileSync(path.resolve(path.join(__dirname,'../../package.json'))).toString())
+
+export default createConfig((_env, argv) => {
+  const styleLoader = argv.mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader'
+
+  return {
+    entry: path.resolve(srcDir, 'index.ts'),
+    output: {
+      filename: '[name]/index.js',
+      path: outDir,
+      assetModuleFilename: 'assets/[name].[hash][ext]',
+    },
+    devtool: argv.mode === 'production' ? false as const : 'eval-source-map',
+    target: 'web',
+    externalsPresets: {
+      node: false,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: [styleLoader, 'css-loader'],
+        },
+        {
+          test: /\.module.less$/,
+          use: [
+            {
+              loader: styleLoader,
+              options: {
+                esModule: false,
+              }
+            },
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 0,
+                sourceMap: true,
+                esModule: false,
+                modules: {
+                  localIdentName: '[local]___[hash:base64:5]',
+                },
+              },
+            },
+            {
+              loader: 'less-loader',
+              options: {
+                lessOptions: {
+                  javascriptEnabled: true,
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /^((?!\.module).)*less$/,
+          use: [
+            {
+              loader: styleLoader,
+              options: {
+                esModule: false,
+              }
+            },
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 0,
+                esModule: false,
+              },
+            },
+            {
+              loader: 'less-loader',
+              options: {
+                lessOptions: {
+                  javascriptEnabled: true,
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(woff(2)?|ttf|eot|svg|png)(\?v=\d+\.\d+\.\d+)?$/,
+          type: 'asset',
+          parser: {
+            dataUrlCondition: {
+              maxSize: 8 * 1024,
+            }
+          }
+        },
+      ],
+    },
+    experiments: {
+      syncWebAssembly: true,
+      asyncWebAssembly: true
+    },
+    plugins: [
+      new DefinePlugin({
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+        'process.platform': JSON.stringify('browser'),
+        'process.env.WORKSPACE_DIR': JSON.stringify(
+          isDevelopment ? path.join(__dirname, '../..', 'workspace') : process.env['WORKSPACE_DIR'],
+        ),
+        'process.env.EXTENSION_DIR': JSON.stringify(
+          isDevelopment ? path.join(__dirname, '../..', 'extensions') : process.env['EXTENSION_DIR'],
+        ),
+        'process.env.REVERSION': JSON.stringify(idePkg.version || 'alpha'),
+        'process.env.DEVELOPMENT': JSON.stringify(!!isDevelopment),
+        'process.env.TEMPLATE_TYPE': JSON.stringify(
+          isDevelopment ? process.env.TEMPLATE_TYPE : 'standard',
+        ),
+        'process.env.IDE_SERVER_PORT': JSON.stringify(process.env.IDE_SERVER_PORT),
+        'process.env.WS_PATH': JSON.stringify(process.env.WS_PATH),
+        'process.env.STATIC_SERVER_PATH': JSON.stringify(process.env.STATIC_SERVER_PATH),
+        'process.env.EXTENSION_WORKER_HOST': JSON.stringify(process.env.EXTENSION_WORKER_HOST),
+        'process.env.WEBVIEW_HOST': JSON.stringify(process.env.WEBVIEW_HOST),
+      }),
+      new HtmlWebpackPlugin({
+        template: path.join(publicDir, 'index.html'),
+      }),
+      ...(argv.mode === 'production' ? [
+        new MiniCssExtractPlugin({
+          filename: '[name]/index.css',
+          chunkFilename: '[id].css',
+        })
+      ] : []),
+      new CopyPlugin({
+        patterns: [
+          {
+            from: require.resolve('@opensumi/ide-monaco/worker/editor.worker.bundle.js'),
+            to: path.join(outDir, 'editor.worker.bundle.js'),
+          },
+        ],
+      }),
+      new NodePolyfillPlugin({
+        // excludeAliases: ['path', 'Buffer', 'process'],
+      }),
+    ],
+    optimization: {
+      splitChunks: {
+        cacheGroups: {
+          vendor: {
+            name: 'vendor',
+            chunks: 'all',
+            minChunks: 2,
+          },
+        },
+      }
+    },
+    infrastructureLogging: {
+      level: 'none'
+    },
+    stats: 'none',
+    devServer: {
+      hot: true,
+      devMiddleware: {
+        writeToDisk: true,
+      },
+      client: {
+        overlay: {
+          runtimeErrors: false,
+          warnings: false,
+        }
+      },
+      historyApiFallback: true,
+      port: devServerPort,
+      proxy: [
+        {
+          context: ['/service'],
+          target: 'ws://localhost:8000',
+          ws: true
+        },
+      ],
+      setupExitSignals: true,
+      static: outDir,
+      headers: {
+        'Content-Security-Policy': "default-src 'self' 'unsafe-inline' data: file:; script-src 'self' 'unsafe-eval' 'unsafe-inline' data: file:; connect-src 'self' file:; worker-src 'self' data: blob:; img-src 'self' data: file:",
+      },
+    }
+  }
+});

build/webpack-web/webpack.ext-host.config.ts

@@ -0,0 +1,23 @@
+import path from 'node:path';
+import { createConfig, webpackDir } from './webpack.base.config';
+import { asarDeps } from '../deps'
+
+const srcDir = path.resolve('src/bootstrap-web/ext-host');
+const outDir = path.join(webpackDir, 'ext-host');
+
+module.exports = createConfig((_, argv) => ({
+  entry: srcDir,
+  output: {
+    filename: 'index.js',
+    path: outDir,
+  },
+  externals: [
+    ({ request }, callback) => {
+      if (asarDeps.includes(request!)) {
+        return callback(null, 'commonjs ' + request);
+      }
+      callback();
+    },
+  ],
+  target: 'node',
+}))