CodeFuse IDE Support Web IDE #32

.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',
+}))