chore: use rspack as the client-side build tool for the plugin (#5575)

* fix: change plugin build tool to rspack

* fix: bug

* fix: bug

* fix: bug

* feat: upgrade rspack

* feat: upgrade  rspack

* fix: rspack config

* fix: some plugins can't be loaded

* chore: update rspack

* chore: revert rspack version due to tests failing

* chore: update rspack to 1.0.14

* fix: missing tsconfig in rspack config

* fix: pro plugins build error

* fix: incorrect dependecies docs link

---------

Co-authored-by: dream2023 <1098626505@qq.com>
Co-authored-by: gchust <gchust@qq.com>

packages/core/build/package.json

@@ -9,6 +9,15 @@
   },
   "typings": "./index.d.ts",
   "dependencies": {
+    "@svgr/webpack": "^8.1.0",
+    "@rspack/core": "1.0.14",
+    "css-loader": "^6.8.1",
+    "less": "^4.1.3",
+    "postcss": "^8.4.29",
+    "less-loader": "11.1.0",
+    "style-loader": "^3.3.3",
+    "postcss-loader": "^7.3.3",
+    "postcss-preset-env": "^9.1.2",
     "@babel/core": "7.25.2",
     "@babel/plugin-transform-modules-amd": "7.24.7",
     "@babel/preset-env": "7.25.4",

packages/core/build/src/buildPlugin.ts

@@ -16,9 +16,10 @@ import path from 'path';
 import { build as tsupBuild } from 'tsup';
 import { build as viteBuild } from 'vite';
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+import { rspack } from '@rspack/core';
 
 import { EsbuildSupportExts, globExcludeFiles } from './constant';
-import { PkgLog, UserConfig, getEnvDefine, getPackageJson } from './utils';
+import { PkgLog, UserConfig, getPackageJson } from './utils';
 import {
   buildCheck,
   checkFileSize,
@@ -130,6 +131,7 @@ const external = [
   'ahooks',
   'lodash',
   'china-division',
+  'file-saver',
 ];
 const pluginPrefix = (
   process.env.PLUGIN_PACKAGE_PREFIX || '@nocobase/plugin-,@nocobase/preset-,@nocobase/plugin-pro-'
@@ -158,7 +160,9 @@ export function deleteServerFiles(cwd: string, log: PkgLog) {
 
 export function writeExternalPackageVersion(cwd: string, log: PkgLog) {
   log('write external version');
-  const sourceFiles = fg.globSync(sourceGlobalFiles, { cwd, absolute: true }).map((item) => fs.readFileSync(item, 'utf-8'));
+  const sourceFiles = fg
+    .globSync(sourceGlobalFiles, { cwd, absolute: true })
+    .map((item) => fs.readFileSync(item, 'utf-8'));
   const sourcePackages = getSourcePackages(sourceFiles);
   const excludePackages = getExcludePackages(sourcePackages, external, pluginPrefix);
   const data = excludePackages.reduce<Record<string, string>>((prev, packageName) => {
@@ -174,7 +178,9 @@ export function writeExternalPackageVersion(cwd: string, log: PkgLog) {
 export async function buildServerDeps(cwd: string, serverFiles: string[], log: PkgLog) {
   log('build plugin server dependencies');
   const outDir = path.join(cwd, target_dir, 'node_modules');
-  const serverFileSource = serverFiles.filter(item => validExts.includes(path.extname(item))).map((item) => fs.readFileSync(item, 'utf-8'));
+  const serverFileSource = serverFiles
+    .filter((item) => validExts.includes(path.extname(item)))
+    .map((item) => fs.readFileSync(item, 'utf-8'));
   const sourcePackages = getSourcePackages(serverFileSource);
   const includePackages = getIncludePackages(sourcePackages, external, pluginPrefix);
   const excludePackages = getExcludePackages(sourcePackages, external, pluginPrefix);
@@ -190,7 +196,9 @@ export async function buildServerDeps(cwd: string, serverFiles: string[], log: P
   if (excludePackages.length) {
     tips.push(`These packages ${chalk.yellow(excludePackages.join(', '))} will be ${chalk.italic('exclude')}.`);
   }
-  tips.push(`For more information, please refer to: ${chalk.blue('https://docs.nocobase.com/development/deps')}.`);
+  tips.push(
+    `For more information, please refer to: ${chalk.blue('https://docs.nocobase.com/development/others/deps')}.`,
+  );
   log(tips.join(' '));
 
   if (!includePackages.length) return;
@@ -268,30 +276,34 @@ export async function buildPluginServer(cwd: string, userConfig: UserConfig, sou
   const packageJson = getPackageJson(cwd);
   const serverFiles = fg.globSync(serverGlobalFiles, { cwd, absolute: true });
   buildCheck({ cwd, packageJson, entry: 'server', files: serverFiles, log });
-  const otherExts = Array.from(new Set(serverFiles.map((item) => path.extname(item)).filter((item) => !EsbuildSupportExts.includes(item))));
+  const otherExts = Array.from(
+    new Set(serverFiles.map((item) => path.extname(item)).filter((item) => !EsbuildSupportExts.includes(item))),
+  );
   if (otherExts.length) {
     log('%s will not be processed, only be copied to the dist directory.', chalk.yellow(otherExts.join(',')));
   }
 
   deleteServerFiles(cwd, log);
 
-  await tsupBuild(userConfig.modifyTsupConfig({
+  await tsupBuild(
-    entry: serverFiles,
+    userConfig.modifyTsupConfig({
-    splitting: false,
+      entry: serverFiles,
-    clean: false,
+      splitting: false,
-    bundle: false,
+      clean: false,
-    silent: true,
+      bundle: false,
-    treeshake: false,
+      silent: true,
-    target: 'node16',
+      treeshake: false,
-    sourcemap,
+      target: 'node16',
-    outDir: path.join(cwd, target_dir),
+      sourcemap,
-    format: 'cjs',
+      outDir: path.join(cwd, target_dir),
-    skipNodeModulesBundle: true,
+      format: 'cjs',
-    loader: {
+      skipNodeModulesBundle: true,
-      ...otherExts.reduce((prev, cur) => ({ ...prev, [cur]: 'copy' }), {}),
+      loader: {
-      '.json': 'copy',
+        ...otherExts.reduce((prev, cur) => ({ ...prev, [cur]: 'copy' }), {}),
-    },
+        '.json': 'copy',
-  }));
+      },
+    }),
+  );
 
   await buildServerDeps(cwd, serverFiles, log);
 }
@@ -316,46 +328,198 @@ export async function buildPluginClient(cwd: string, userConfig: UserConfig, sou
     return prev;
   }, {});
 
-  const entry = fg.globSync('src/client/index.{ts,tsx,js,jsx}', { absolute: true, cwd });
+  const entry = fg.globSync('index.{ts,tsx,js,jsx}', { absolute: false, cwd: path.join(cwd, 'src/client') });
   const outputFileName = 'index.js';
-
+  const compiler = rspack({
-  await viteBuild(userConfig.modifyViteConfig({
+    mode: 'production',
-    mode: process.env.NODE_ENV || 'production',
+    // mode: "development",
-    define: getEnvDefine(),
+    context: cwd,
-    logLevel: 'warn',
+    entry: './src/client/' + entry[0],
-    build: {
+    target: ['web', 'es5'],
-      minify: process.env.NODE_ENV === 'production',
+    output: {
-      outDir,
+      path: outDir,
-      cssCodeSplit: false,
+      filename: outputFileName,
-      emptyOutDir: true,
+      publicPath: `/static/plugins/${packageJson.name}/dist/client/`,
-      sourcemap,
+      clean: true,
-      lib: {
+      library: {
-        entry,
-        formats: ['umd'],
         name: packageJson.name,
-        fileName: () => outputFileName,
+        type: 'umd',
-      },
+        umdNamedDefine: true,
-      target: ['es2015', 'edge88', 'firefox78', 'chrome87', 'safari14'],
-      rollupOptions: {
-        cache: true,
-        external: [...Object.keys(globals), 'react', 'react/jsx-runtime'],
-        output: {
-          exports: 'named',
-          globals: {
-            react: 'React',
-            'react/jsx-runtime': 'jsxRuntime',
-            ...globals,
-          },
-        },
       },
     },
+    resolve: {
+      tsConfig: path.join(process.cwd(), 'tsconfig.json'),
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.less', '.css'],
+    },
+    module: {
+      rules: [
+        {
+          test: /.less$/,
+          use: [
+            { loader: 'style-loader' },
+            { loader: 'css-loader' },
+            { loader: 'less-loader' },
+            {
+              loader: 'postcss-loader',
+              options: {
+                postcssOptions: {
+                  plugins: {
+                    'postcss-preset-env': {
+                      browsers: ['last 2 versions', '> 1%', 'cover 99.5%', 'not dead'],
+                    },
+                    autoprefixer: {},
+                  },
+                },
+              },
+            },
+          ],
+          type: 'javascript/auto',
+        },
+        {
+          test: /\.css$/,
+          use: [
+            'style-loader',
+            'css-loader',
+            {
+              loader: 'postcss-loader',
+              options: {
+                postcssOptions: {
+                  plugins: {
+                    'postcss-preset-env': {
+                      browsers: ['last 2 versions', '> 1%', 'cover 99.5%', 'not dead'],
+                    },
+                    autoprefixer: {},
+                  },
+                },
+              },
+            },
+          ],
+          type: 'javascript/auto',
+        },
+        {
+          test: /\.(png|jpe?g|gif)$/i,
+          type: 'asset',
+        },
+        {
+          test: /\.svg$/i,
+          issuer: /\.[jt]sx?$/,
+          use: ['@svgr/webpack'],
+        },
+        {
+          test: /\.jsx$/,
+          exclude: /[\\/]node_modules[\\/]/,
+          loader: 'builtin:swc-loader',
+          options: {
+            sourceMap: true,
+            jsc: {
+              parser: {
+                syntax: 'ecmascript',
+                jsx: true,
+              },
+              target: 'es5',
+            },
+          },
+        },
+        {
+          test: /\.tsx$/,
+          exclude: /[\\/]node_modules[\\/]/,
+          loader: 'builtin:swc-loader',
+          options: {
+            sourceMap: true,
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                tsx: true,
+              },
+              target: 'es5',
+            },
+          },
+        },
+        {
+          test: /\.ts$/,
+          exclude: /[\\/]node_modules[\\/]/,
+          loader: 'builtin:swc-loader',
+          options: {
+            sourceMap: true,
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+              },
+              target: 'es5',
+            },
+          },
+        },
+      ],
+    },
     plugins: [
-      react(),
+      new rspack.DefinePlugin({
-      cssInjectedByJsPlugin({ styleId: packageJson.name }),
+        'process.env.NODE_ENV': JSON.stringify('production'),
+      }),
     ],
-  }));
+    node: {
+      global: true,
+    },
+    externals: {
+      react: 'React',
+      // 'react/jsx-runtime': 'jsxRuntime',
+      ...globals,
+    },
+    stats: 'errors-warnings',
+  });
 
-  checkFileSize(outDir, log);
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      console.log(
+        stats.toString({
+          colors: true,
+        }),
+      );
+      resolve(null);
+    });
+  });
+  // await viteBuild(userConfig.modifyViteConfig({
+  //   mode: 'production',
+  //   define: {
+  //     'process.env.NODE_ENV': JSON.stringify('production'),
+  //   },
+  //   logLevel: 'warn',
+  //   build: {
+  //     minify: true,
+  //     outDir,
+  //     cssCodeSplit: false,
+  //     emptyOutDir: true,
+  //     sourcemap,
+  //     lib: {
+  //       entry,
+  //       formats: ['umd'],
+  //       name: packageJson.name,
+  //       fileName: () => outputFileName,
+  //     },
+  //     target: ['es2015', 'edge88', 'firefox78', 'chrome87', 'safari14'],
+  //     rollupOptions: {
+  //       cache: true,
+  //       external: [...Object.keys(globals), 'react', 'react/jsx-runtime'],
+  //       output: {
+  //         exports: 'named',
+  //         globals: {
+  //           react: 'React',
+  //           'react/jsx-runtime': 'jsxRuntime',
+  //           ...globals,
+  //         },
+  //       },
+  //     },
+  //   },
+  //   plugins: [
+  //     react(),
+  //     cssInjectedByJsPlugin({ styleId: packageJson.name }),
+  //   ],
+  // }));
+
+  // checkFileSize(outDir, log);
 }
 
 export async function buildPlugin(cwd: string, userConfig: UserConfig, sourcemap: boolean, log: PkgLog) {

packages/core/build/src/utils/buildPluginUtils.ts

@@ -112,7 +112,7 @@ export function checkDependencies(packageJson: Record<string, any>, log: Log) {
     chalk.yellow(packages.join(', ')),
     chalk.yellow('dependencies'),
     chalk.yellow('devDependencies'),
-    chalk.blue(chalk.blue('https://docs.nocobase.com/development/deps')),
+    chalk.blue(chalk.blue('https://docs.nocobase.com/development/others/deps')),
   );
 }
 

packages/core/client/src/application/utils/globalDeps.ts

@@ -41,6 +41,7 @@ import * as ReactRouter from 'react-router';
 import * as ReactRouterDom from 'react-router-dom';
 import jsxRuntime from 'react/jsx-runtime';
 import * as nocobaseClient from '../../index';
+import * as FileSaver from 'file-saver';
 
 import type { RequireJS } from './requirejs';
 
@@ -101,4 +102,5 @@ export function defineGlobalDeps(requirejs: RequireJS) {
   requirejs.define('ahooks', () => ahooks);
   requirejs.define('@emotion/css', () => emotionCss);
   requirejs.define('dayjs', () => dayjs);
+  requirejs.define('file-saver', () => FileSaver);
 }