build: package react to the bundle file (#214)

* build: package react to the bundle file

* chore: codeblitz with react

Author: hacke2

packages/core/package.json

@@ -83,7 +83,7 @@
     "@types/react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.2.0 || ^16.0.0",
+    "react-dom": "^18.2.0 || ^16.0.0"
   }
 }

packages/core/src/api/require.ts

@@ -55,6 +55,8 @@ import * as buffer from 'buffer';
 import * as crypto from 'crypto';
 import * as os from 'os';
 import * as path from 'path';
+import * as React from 'react';
+import ReactDOM, * as ReactDom from 'react-dom/client';
 
 export function requireModule(module: '@opensumi/ide-addons'): typeof Addons;
 export function requireModule(module: '@opensumi/ide-comments'): typeof Comments;
@@ -109,6 +111,8 @@ export function requireModule(module: 'buffer'): typeof buffer;
 export function requireModule(module: 'process'): typeof process;
 export function requireModule(module: 'assert'): typeof assert;
 export function requireModule(module: 'path'): typeof path;
+export function requireModule(module: 'react'): typeof React;
+export function requireModule(module: 'react-dom/client'): typeof ReactDom;
 
 export function requireModule(module: string): any {
   switch (module) {
@@ -215,7 +219,10 @@ export function requireModule(module: string): any {
       return assert;
     case 'path':
       return path;
-
+    case 'react':
+      return React;
+    case 'react-dom/client':
+      return ReactDOM;
     default:
       throw new Error(`not found module ${module}`);
   }

packages/toolkit/webpack/config.build.js

@@ -58,6 +58,53 @@ const libBundle = createWebpackConfig({
       concatenateModules: false,
       splitChunks: false,
     },
+    experiments: {
+      asyncWebAssembly: true, // 启用 WebAssembly 支持
+    },
+  },
+});
+
+const libBundleWithReact = createWebpackConfig({
+  mode: 'production',
+  tsconfigPath: path.join(__dirname, '../../../tsconfig.json'),
+  outputPath: path.join(__dirname, '../../core/bundle'),
+  define: {
+    ...Object.keys(define).reduce((obj, key) => {
+      obj[key] = JSON.stringify(define[key]);
+      return obj;
+    }, {}),
+    __non_webpack_require__: '() => {}',
+  },
+  webpackConfig: {
+    context: path.join(__dirname, '../../..'),
+    entry: {
+      [config.appEntryWithReact]: './packages/core/src',
+    },
+    // 此处 bundle 的包仅作为 commonjs 使用，但因为 external 原因会导致 webpack4 加载 bundle 出错，因此还是使用 umd
+    output: {
+      library: 'AlexLib',
+      libraryTarget: 'umd',
+    },
+    externals: [
+      // 此处没有 external React，将 React 打包进去以应对 React16 的集成方
+      {
+        moment: {
+          root: 'moment',
+          commonjs2: 'moment',
+          commonjs: 'moment',
+          amd: 'moment',
+        },
+      },
+      '@codeblitzjs/ide-registry',
+    ],
+    optimization: {
+      minimize: false,
+      concatenateModules: false,
+      splitChunks: false,
+    },
+    experiments: {
+      asyncWebAssembly: true, // 启用 WebAssembly 支持
+    },
   },
 });
 
@@ -105,4 +152,4 @@ const globalBundle = createWebpackConfig({
   },
 });
 
-module.exports = [libBundle, globalBundle];
+module.exports = [libBundle, libBundleWithReact, globalBundle];

packages/toolkit/webpack/util/index.js

@@ -33,6 +33,7 @@ exports.nodePolyfill = {
 
 exports.config = {
   appEntry: 'codeblitz',
+  appEntryWithReact: 'codeblitz-with-react',
   appGlobalEntry: 'codeblitz.global',
   appGlobalMinEntry: 'codeblitz.global.min',
   editorEntry: 'codeblitz.editor',

yarn.lock

@@ -738,8 +738,8 @@ __metadata:
     "@types/react-dom": "npm:^18.2.0"
     tslib: "npm:^2.2.0"
   peerDependencies:
-    react: ^18.2.0
-    react-dom: ^18.2.0
+    react: ^18.2.0 || ^16.0.0
+    react-dom: ^18.2.0 || ^16.0.0
   bin:
     codeblitz: bin/codeblitz
   languageName: unknown