feat: big upgrate

This commit is contained in:
ClarkXia 2024-09-09 16:06:50 +08:00
parent 58cbbe2344
commit 629a20617a
23 changed files with 7595 additions and 7174 deletions

View File

@ -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"
}
}

View File

@ -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"
}
}

View File

@ -49,9 +49,9 @@
"mime-types": "2.1.35"
},
"devDependencies": {
"@rspack/plugin-react-refresh": "0.5.7",
"@rspack/dev-server": "0.5.7",
"@rspack/core": "0.5.7",
"@rspack/plugin-react-refresh": "1.0.0",
"@rspack/dev-server": "1.0.3",
"@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",

View File

@ -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({
name: pkgJson.name,
outputAsModuleFolder: true,
out: path.join(targetPath, dtsName),
main: path.join(packageRoot, pkgJson.types),
headerPath: '',
headerText: '',
});
// dts.bundle({
// name: pkgJson.name,
// outputAsModuleFolder: true,
// out: path.join(targetPath, dtsName),
// main: path.join(packageRoot, pkgJson.types),
// headerPath: '',
// headerText: '',
// });
} else {
try {
const typesRoot = path.dirname(require.resolve(`@types/${pkgName}/package.json`, {

View File

@ -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');
fs.writeFileSync(targetPath,
replaceDeps(fileContent, webpackDevServerDeps.concat([
...commonDeps,
'@rspack/core',
])),
);
// const fileContent = fs.readFileSync(sourcePath, 'utf8');
// fs.writeFileSync(targetPath,
// replaceDeps(fileContent, webpackDevServerDeps.concat([
// ...commonDeps,
// // '@rspack/core',
// ])),
// );
fs.copyFileSync(sourcePath, targetPath);
} else {
fs.copyFileSync(sourcePath, targetPath);
}
});
// Overwrite RefreshUtils.js which is customized for ice.js.
fs.copyFileSync(
path.join(__dirname, '../override/RefreshUtils.js'),
path.join(__dirname, '../compiled/@rspack/plugin-react-refresh/client/refreshUtils.js'),
);
// fs.copyFileSync(
// path.join(__dirname, '../override/RefreshUtils.js'),
// path.join(__dirname, '../compiled/@rspack/plugin-react-refresh/client/refreshUtils.js'),
// );
},
},
];

View File

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

View File

@ -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,

View File

@ -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) {

View File

@ -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);

View File

@ -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 => {

View File

@ -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,

View File

@ -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);

View File

@ -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');

View File

@ -38,13 +38,15 @@ export default function createDataLoaderMiddleware(compiler: Compiler): Middlewa
if (method !== 'GET') {
return next();
}
const publicPath = compiler.options.output?.publicPath
? `${compiler.options.output.publicPath.replace(/\/$/, '')}/`
const orginalPublicPath = compiler.options.output?.publicPath;
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) {

View File

@ -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 => {

View File

@ -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);

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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__/,
use: ({ realResource }: { realResource: string }) => {
const names = (
realResource.match(/\?names=([^&]+)!=!/)?.[1] || ''
).split(',');
return [{
loader: 'builtin:barrel-loader',
options: {
names,
cacheDir,
},
}];
},
type: 'javascript/auto',
},
// {
// test: /__barrel_optimize__/,
// use: ({ realResource }: { realResource: string }) => {
// const names = (
// realResource.match(/\?names=([^&]+)!=!/)?.[1] || ''
// ).split(',');
// return [{
// loader: 'builtin:barrel-loader',
// options: {
// names,
// cacheDir,
// },
// }];
// },
// 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: {
css: {
modules: { localIdentName },
},
experiments: {
css: true,
},
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 = {

View File

@ -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",

View File

@ -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

File diff suppressed because it is too large Load Diff