feat: big upgrate

examples/with-i18n/package.json

@@ -21,6 +21,6 @@
     "@types/react-dom": "^18.0.2",
     "express": "^4.19.2",
     "tslib": "^2.5.0",
-    "tsx": "^3.12.1"
+    "tsx": "^4.19.0"
   }
 }

package.json

@@ -61,7 +61,7 @@
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
     "stylelint": "^15.10.1",
-    "tsx": "^3.12.1",
+    "tsx": "^4.19.0",
     "typescript": "^4.7.4",
     "vitest": "^0.15.2"
   },
@@ -71,7 +71,6 @@
   "packageManager": "pnpm@8.9.2",
   "pnpm": {
     "patchedDependencies": {
-      "@rspack/core@0.5.7": "patches/@rspack__core@0.5.7.patch",
       "unplugin@1.6.0": "patches/unplugin@1.6.0.patch"
     }
   }

packages/bundles/package.json

@@ -49,9 +49,9 @@
     "mime-types": "2.1.35"
   },
   "devDependencies": {
-    "@rspack/plugin-react-refresh": "0.5.7",
+    "@rspack/plugin-react-refresh": "1.0.0",
-    "@rspack/dev-server": "0.5.7",
+    "@rspack/dev-server": "1.0.3",
-    "@rspack/core": "0.5.7",
+    "@rspack/core": "1.0.3",
     "@types/less": "^3.0.3",
     "@types/lodash": "^4.14.181",
     "@types/webpack-bundle-analyzer": "^4.4.1",
@@ -82,9 +82,9 @@
     "terser-webpack-plugin": "5.3.5",
     "typescript": "^4.6.4",
     "trusted-cert": "1.1.3",
-    "webpack": "5.88.2",
+    "webpack": "5.94.0",
     "webpack-bundle-analyzer": "4.5.0",
-    "webpack-dev-server": "4.15.0",
+    "webpack-dev-server": "5.1.0",
     "unplugin": "1.6.0",
     "bonjour-service": "^1.0.13",
     "colorette": "^2.0.10",

packages/bundles/scripts/build.ts

@@ -4,7 +4,6 @@ import { fileURLToPath } from 'url';
 import fs from 'fs-extra';
 import ncc from '@vercel/ncc';
 import chalk from 'chalk';
-import * as dts from 'dts-bundle';
 import glob from 'glob';
 import findUp from 'find-up';
 import tasks, { taskExternals } from './tasks';
@@ -121,14 +120,14 @@ export async function packDependency(options: Options): Promise<void> {
       if (pkgJson.types) {
         dtsName = 'index.d.ts';
         console.log(chalk.green(`bundle dts file for ${pkgName || file}`));
-        dts.bundle({
+        // dts.bundle({
-          name: pkgJson.name,
+        //   name: pkgJson.name,
-          outputAsModuleFolder: true,
+        //   outputAsModuleFolder: true,
-          out: path.join(targetPath, dtsName),
+        //   out: path.join(targetPath, dtsName),
-          main: path.join(packageRoot, pkgJson.types),
+        //   main: path.join(packageRoot, pkgJson.types),
-          headerPath: '',
+        //   headerPath: '',
-          headerText: '',
+        //   headerText: '',
-        });
+        // });
       } else {
         try {
           const typesRoot = path.dirname(require.resolve(`@types/${pkgName}/package.json`, {

packages/bundles/scripts/tasks.ts

@@ -147,7 +147,7 @@ const tasks = [
       const targetPath = path.join(__dirname, '../compiled/mini-css-extract-plugin');
       const entryPath = path.join(targetPath, 'dist/index.js');
       fs.copySync(path.join(pkgPath, 'dist'), path.join(targetPath, 'dist'));
-      fs.copyFileSync(path.join(targetPath, 'index.d.ts'), path.join(targetPath, 'dist/index.d.ts'));
+      fs.copySync(path.join(pkgPath, 'types'), path.join(targetPath, 'types'));
       fs.writeFileSync(entryPath, fs.readFileSync(entryPath, 'utf-8').replace('schema-utils', '@ice/bundles/compiled/schema-utils/index.js'));
     },
   },
@@ -295,22 +295,23 @@ const tasks = [
         const sourcePath = path.join(pkgPath, filePath);
         const targetPath = path.join(__dirname, `../compiled/@rspack/plugin-react-refresh/${filePath}`);
         if (path.extname(filePath) === '.js') {
-          const fileContent = fs.readFileSync(sourcePath, 'utf8');
+          // const fileContent = fs.readFileSync(sourcePath, 'utf8');
-          fs.writeFileSync(targetPath,
+          // fs.writeFileSync(targetPath,
-            replaceDeps(fileContent, webpackDevServerDeps.concat([
+          //   replaceDeps(fileContent, webpackDevServerDeps.concat([
-              ...commonDeps,
+          //     ...commonDeps,
-              '@rspack/core',
+          //     // '@rspack/core',
-            ])),
+          //   ])),
-          );
+          // );
+          fs.copyFileSync(sourcePath, targetPath);
         } else {
           fs.copyFileSync(sourcePath, targetPath);
         }
       });
       // Overwrite RefreshUtils.js which is customized for ice.js.
-      fs.copyFileSync(
+      // fs.copyFileSync(
-        path.join(__dirname, '../override/RefreshUtils.js'),
+      //   path.join(__dirname, '../override/RefreshUtils.js'),
-        path.join(__dirname, '../compiled/@rspack/plugin-react-refresh/client/refreshUtils.js'),
+      //   path.join(__dirname, '../compiled/@rspack/plugin-react-refresh/client/refreshUtils.js'),
-      );
+      // );
     },
   },
 ];

packages/ice/package.json

@@ -97,9 +97,9 @@
     "sass": "^1.50.0",
     "unplugin": "^1.6.0",
     "webpack": "^5.88.0",
-    "webpack-dev-server": "4.15.0",
+    "webpack-dev-server": "5.1.0",
-    "@rspack/core": "0.5.7",
+    "@rspack/core": "1.0.3",
-    "@rspack/dev-server": "0.5.7"
+    "@rspack/dev-server": "1.0.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

packages/ice/src/bundler/config/getUrls.ts

@@ -19,7 +19,7 @@ const getUrls = ({
   devServerConfig,
 }: Options) => {
   const urlPathname = getRouterBasename(taskConfig, appConfig) || '/';
-  const protocol = devServerConfig.https ? 'https' : 'http';
+  const protocol = typeof devServerConfig?.server === 'object' && devServerConfig?.server.type === 'https' ? 'https' : 'http';
   const enabledHashRouter = appConfig.router?.type === 'hash';
   const urls = prepareURLs(
     protocol,

packages/ice/src/bundler/rspack/formatStats.ts

@@ -1,13 +1,11 @@
 import chalk from 'chalk';
 import type { Stats, MultiStats } from '@rspack/core';
-import type { StatsCompilation } from 'webpack';
 import formatWebpackMessages from '../../utils/formatWebpackMessages.js';
 
 function formatStats(stats: Stats | MultiStats, showWarnings = true) {
   const statsData = stats.toJson({
     preset: 'errors-warnings',
-  }) as StatsCompilation;
+  });
-
   const { errors, warnings } = formatWebpackMessages(statsData);
 
   if (errors.length) {

packages/ice/src/bundler/rspack/index.ts

@@ -22,7 +22,7 @@ async function bundler(
   let compiler: MultiCompiler;
   let dataLoaderCompiler: Compiler;
   let devServer: RspackDevServer;
-  const { rspack } = await import('@ice/bundles/esm/rspack.js');
+  const { rspack } = await import('@rspack/core');
   // Override the type of rspack, because of rspack is imported from pre-compiled bundle.
   const rspackConfigs = await getConfig(context, options, rspack as unknown as typeof Rspack);
   try {
@@ -65,7 +65,6 @@ async function bundler(
     rspackConfigs,
   };
   if (command === 'start') {
-    // @ts-expect-error dev-server has been pre-packed, so it will have different type.
     devServer = await start(buildOptions, dataLoaderCompiler);
   } else if (command === 'build') {
     await build(buildOptions);

packages/ice/src/bundler/rspack/start.ts

@@ -55,7 +55,7 @@ const start = async ({
     ...hooksAPI,
   });
 
-  const { RspackDevServer } = await import('@ice/bundles/esm/dev-server.js');
+  const { RspackDevServer } = await import('@rspack/dev-server');
   const devServer = new RspackDevServer(devServerConfig, compiler);
 
   compiler.hooks.done.tap('done', async stats => {

packages/ice/src/bundler/webpack/getWebpackConfig.ts

@@ -74,7 +74,6 @@ const getWebpackConfig: GetWebpackConfig = async (context, options) => {
     let webpackConfig = getDefaultWebpackConfig({
       config,
       rootDir,
-      // @ts-expect-error fix type error of compiled webpack
       webpack,
       runtimeTmpDir: RUNTIME_TMP_DIR,
       userConfigHash,

packages/ice/src/bundler/webpack/start.ts

@@ -32,7 +32,6 @@ export async function startDevServer(
     // Sort by length, shortest path first.
     a.split('/').filter(Boolean).length - b.split('/').filter(Boolean).length);
   const webTaskConfig = taskConfigs.find(({ name }) => name === WEB);
-  // @ts-expect-error webpack-dev-server types in Configuration is missing.
   const originalDevServer: DevServerConfiguration = webpackConfigs[0].devServer;
   const customMiddlewares = originalDevServer?.setupMiddlewares;
   const defaultDevServerConfig = await getDefaultServerConfig(originalDevServer, commandArgs);

packages/ice/src/config.ts

@@ -562,7 +562,6 @@ const cliOption = [
         if (host && host !== 'localhost') {
           hosts.push(host);
         }
-        // @ts-expect-error certificateFor types
         const certInfo = await certificateFor(hosts, { silent: true });
         const key = await fse.readFile(certInfo.keyFilePath, 'utf8');
         const cert = await fse.readFile(certInfo.certFilePath, 'utf8');

packages/ice/src/middlewares/dataLoaderMiddleware.ts

@@ -38,13 +38,15 @@ export default function createDataLoaderMiddleware(compiler: Compiler): Middlewa
     if (method !== 'GET') {
       return next();
     }
-    const publicPath = compiler.options.output?.publicPath
+    const orginalPublicPath = compiler.options.output?.publicPath;
-      ? `${compiler.options.output.publicPath.replace(/\/$/, '')}/`
+    const publicPath = orginalPublicPath && typeof orginalPublicPath === 'string'
+      ? `${orginalPublicPath.replace(/\/$/, '')}/`
       : '/';
     const filePath = parse(url || '').pathname;
     const filename = filePath?.startsWith(publicPath) ? filePath.slice(publicPath.length) : filePath.slice(1);
     // Mark sure the compiler is ready.
     await compileTask;
+    // @ts-expect-error
     const buffer = compiler.getAsset(filename);
 
     if (!buffer) {

packages/ice/src/utils/formatWebpackMessages.ts

@@ -1,6 +1,7 @@
 // This file is based on  https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/formatWebpackMessages.js
 // It's been rewrite to ts and ICE specific logic
 import type { StatsCompilation } from 'webpack';
+import type { StatsCompilation as RspackStatsCompilation } from '@rspack/core';
 
 const friendlySyntaxErrorLabel = 'Syntax error:';
 
@@ -8,7 +9,7 @@ type IsLikelyASyntaxError = (message: string) => boolean;
 type Message = string | { message: string } | { message: string }[];
 type FormatMessage = (message: Message) => string;
 type FormatWebpackMessages = (
-  json: StatsCompilation,
+  json: StatsCompilation | RspackStatsCompilation,
 ) => { errors: string[]; warnings: string[] };
 
 const isLikelyASyntaxError: IsLikelyASyntaxError = message => {

packages/ice/src/webpack/ServerCompilerPlugin.ts

@@ -59,7 +59,6 @@ export default class ServerCompilerPlugin {
     compiler.hooks.watchRun.tap(pluginName, () => {
       this.isCompiling = true;
     });
-    // @ts-expect-error webpack hooks type not match.
     compiler.hooks.emit.tapPromise(pluginName, async (compilation: Compilation) => {
       this.isCompiling = false;
       await this.compileTask(compilation);

packages/plugin-i18n/package.json

@@ -53,7 +53,7 @@
     "@types/accept-language-parser": "^1.5.3",
     "@types/react": "^18.0.33",
     "cross-env": "^7.0.3",
-    "webpack-dev-server": "4.15.0"
+    "webpack-dev-server": "5.1.0"
   },
   "peerDependencies": {
     "@ice/app": "^3.4.11",

packages/plugin-pha/package.json

@@ -29,7 +29,7 @@
     "build-scripts": "^2.1.2-0",
     "esbuild": "^0.17.16",
     "webpack": "^5.88.0",
-    "webpack-dev-server": "4.15.0"
+    "webpack-dev-server": "5.1.0"
   },
   "repository": {
     "type": "http",

packages/rspack-config/package.json

@@ -19,7 +19,7 @@
     "@ice/shared-config": "1.2.8"
   },
   "devDependencies": {
-    "@rspack/core": "0.5.7"
+    "@rspack/core": "1.0.3"
   },
   "scripts": {
     "watch": "tsc -w --sourceMap",

packages/rspack-config/src/index.ts

@@ -6,6 +6,7 @@ import type { Configuration, rspack as Rspack } from '@rspack/core';
 import lodash from '@ice/bundles/compiled/lodash/index.js';
 import { coreJsPath } from '@ice/bundles';
 import RefreshPlugin from '@ice/bundles/esm/plugin-refresh.js';
+// import RefreshPlugin from '@ice/bundles/node_modules/@rspack/plugin-react-refresh/dist/index.js';
 import getSplitChunks, { getFrameworkBundles } from './splitChunks.js';
 import getAssetsRule from './assetsRule.js';
 import getCssRules from './cssRules.js';
@@ -204,6 +205,7 @@ const getConfig: GetConfig = async (options) => {
       },
     }];
   }
+  console.log('excludeRule', [...compileExclude, 'bundles/compiled']);
   const config: Configuration = {
     entry: entry || {
       main: [path.join(rootDir, runtimeTmpDir, 'entry.client.tsx')],
@@ -223,9 +225,47 @@ const getConfig: GetConfig = async (options) => {
     context: rootDir,
     module: {
       rules: [
+        // {
+        //   test: /\.ts$/,
+        //   exclude: [/node_modules/],
+        //   loader: 'builtin:swc-loader',
+        //   options: {
+        //     jsc: {
+        //       parser: {
+        //         syntax: 'typescript',
+        //       },
+        //     },
+        //   },
+        //   type: 'javascript/auto',
+        // },
+        // {
+        //   test: /\.(jsx?|tsx?|mjs)$/,
+        //   use: {
+        //     loader: 'builtin:compilation-loader',
+        //     options: {
+        //       jsc: {
+        //         parser: {
+        //           syntax: 'typescript',
+        //           jsx: true,
+        //         },
+        //         transform: {
+        //           react: {
+        //             pragma: 'React.createElement',
+        //             pragmaFrag: 'React.Fragment',
+        //             throwIfNamespace: true,
+        //             development: false,
+        //             useBuiltins: false,
+        //           },
+        //         },
+        //       },
+        //     },
+        //   },
+        //   type: 'javascript/auto',
+        // },
         {
           test: /\.(jsx?|tsx?|mjs)$/,
-          ...(excludeRule ? { exclude: new RegExp(excludeRule) } : {}),
+          ...(excludeRule ? { exclude: new RegExp('node_module') } : {}),
+          // exclude: /compiled/,
           use: {
             loader: 'builtin:compilation-loader',
             options: {
@@ -239,22 +279,22 @@ const getConfig: GetConfig = async (options) => {
           },
           type: 'javascript/auto',
         },
-        {
+        // {
-          test: /__barrel_optimize__/,
+        //   test: /__barrel_optimize__/,
-          use: ({ realResource }: { realResource: string }) => {
+        //   use: ({ realResource }: { realResource: string }) => {
-            const names = (
+        //     const names = (
-              realResource.match(/\?names=([^&]+)!=!/)?.[1] || ''
+        //       realResource.match(/\?names=([^&]+)!=!/)?.[1] || ''
-            ).split(',');
+        //     ).split(',');
-            return [{
+        //     return [{
-              loader: 'builtin:barrel-loader',
+        //       loader: 'builtin:barrel-loader',
-              options: {
+        //       options: {
-                names,
+        //         names,
-                cacheDir,
+        //         cacheDir,
-              },
+        //       },
-            }];
+        //     }];
-          },
+        //   },
-          type: 'javascript/auto',
+        //   type: 'javascript/auto',
-        },
+        // },
         ...getAssetsRule(),
         ...getCssRules({
           rootDir,
@@ -262,6 +302,11 @@ const getConfig: GetConfig = async (options) => {
           postcssOptions: postcss,
         }),
       ],
+      generator: {
+        'css/auto': {
+          localIdentName,
+        },
+      },
     },
     resolve: {
       extensions: ['...', '.ts', '.tsx', '.jsx'],
@@ -279,7 +324,6 @@ const getConfig: GetConfig = async (options) => {
       minimize: !!minify,
       ...(splitChunksStrategy ? { splitChunks: splitChunksStrategy } : {}),
     },
-    // @ts-expect-error plugin instance defined by default in not compatible with rspack.
     plugins: [
       ...plugins,
       // Unplugin should be compatible with rspack.
@@ -308,10 +352,8 @@ const getConfig: GetConfig = async (options) => {
         }],
       }),
     ].filter(Boolean),
-    builtins: {
+    experiments: {
-      css: {
+      css: true,
-        modules: { localIdentName },
-      },
     },
     stats: 'none',
     infrastructureLogging: {
@@ -334,11 +376,14 @@ const getConfig: GetConfig = async (options) => {
       client: {
         logging: 'info',
       },
-      https,
+      server: typeof https === 'object' ? {
+        type: 'https',
+        options: https,
+      } : undefined,
       ...devServer,
       setupMiddlewares: middlewares,
     },
-    features: builtinFeatures,
+    // features: builtinFeatures,
   };
   // Compatible with API configureWebpack.
   const ctx = {

packages/shared-config/package.json

@@ -28,7 +28,7 @@
     "esbuild": "^0.17.16",
     "postcss": "^8.4.31",
     "webpack": "^5.86.0",
-    "webpack-dev-server": "4.15.0"
+    "webpack-dev-server": "5.1.0"
   },
   "scripts": {
     "watch": "tsc -w --sourceMap",

packages/webpack-config/src/index.ts

@@ -348,7 +348,10 @@ export function getWebpackConfig(options: GetWebpackConfigOptions): Configuratio
         logging: 'info',
       },
       setupMiddlewares: middlewares,
-      https,
+      server: typeof https === 'object' ? {
+        type: 'https',
+        options: https,
+      } : undefined,
     }, devServer || {}) as Config['devServer'],
   } as Configuration;
   // tnpm / cnpm 安装时，webpack 5 的持久缓存无法生成，长时间将导致 OOM