Now it's ready for the web

.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
 

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/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-web'))
+
+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,202 @@
+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, codeWindowName } 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, 'renderer');
+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: {
+      [codeWindowName]: 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'),
+        filename: `${codeWindowName}/index.html`,
+        chunks: [codeWindowName]
+      }),
+      ...(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, codeWindowName, '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,49 @@
+import path from 'node:path';
+import { ProvidePlugin } from 'webpack';
+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');
+
+export const extHostConfig = 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',
+}))
+
+export const workerHostConfig = createConfig({
+  entry: require.resolve('@opensumi/ide-extension/lib/hosted/worker.host-preload'),
+  output: {
+    filename: 'worker-host.js',
+    path: outDir,
+  },
+  target: 'webworker',
+  node: {
+    global: true,
+  },
+  resolve: {
+    fallback: {
+      os: false,
+      util: false,
+      buffer: require.resolve('buffer/'),
+    },
+  },
+  plugins: [
+    new ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+      process: 'process/browser',
+    }),
+  ],
+})

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

@@ -0,0 +1,41 @@
+import path from 'node:path';
+import { createConfig, webpackDir } from './webpack.base.config';
+import { asarDeps } from '../deps'
+import CopyPlugin from "copy-webpack-plugin";
+
+const srcDir = path.resolve('src/bootstrap-web/node');
+const outDir = path.resolve(webpackDir, 'node');
+
+const projectRoot = path.resolve(__dirname, '../../')
+
+export default createConfig((_, argv) => ({
+  entry: srcDir,
+  output: {
+    filename: 'index.js',
+    path: outDir,
+  },
+  plugins:[
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.resolve(projectRoot, 'product.json'),
+          to: path.join(outDir, 'product.json'),
+        }
+      ],
+    }),
+  ],
+  target: 'node',
+  // ws 弱依赖
+  externals: [
+    {
+      bufferutil: 'commonjs bufferutil',
+      'utf-8-validate': 'commonjs utf-8-validate',
+    },
+    ({ request }, callback) => {
+      if (asarDeps.includes(request!)) {
+        return callback(null, 'commonjs ' + request);
+      }
+      callback();
+    },
+  ],
+}));