@omnific/react-scripts 0.1.0

package/README.md

@@ -0,0 +1,22 @@
+# @omnific/react-scripts
+
+Usage:
+
+```sh
+npm i -D  @omnific/react-scripts @swc/helpers tailwindcss
+```
+
+In `package.json`:
+
+```json
+{
+  "scripts": {
+    "dev": "react-scripts dev",
+    "build": "react-scripts build"
+  }
+}
+```
+
+Create `react-scripts.config.ts`, `react-scripts.config.mts`, `react-scripts.config.mjs`, or `react-scripts.config.cjs` if you need to customize Rspack.
+
+Use `.mjs` or `.cjs` if your runtime Node.js version does not support native TypeScript imports.

package/dist/env-DxzdvROc.js

@@ -0,0 +1,22 @@
+//#region utils/env.ts
+const DEVELOPMENT = "development";
+const PRODUCTION = "production";
+const envKeys = ["NODE_ENV", "SCRIPT"];
+/**
+* 设置环境变量
+* @param env
+*/
+function setEnv(data) {
+	for (const key of envKeys) if (data[key]) process.env[key] = data[key];
+}
+function getEnv() {
+	return process.env.NODE_ENV || "development";
+}
+function isDevelopment() {
+	return getEnv() === DEVELOPMENT;
+}
+function isProduction() {
+	return getEnv() === PRODUCTION;
+}
+//#endregion
+export { isProduction as a, isDevelopment as i, PRODUCTION as n, setEnv as o, getEnv as r, DEVELOPMENT as t };

package/dist/index.js

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+import { n as PRODUCTION, o as setEnv, t as DEVELOPMENT } from "./env-DxzdvROc.js";
+import { styleText } from "node:util";
+//#region index.ts
+process.on("unhandledRejection", (error) => {
+	if (error instanceof Error) {
+		console.log(styleText("red", error.message));
+		process.exit(1);
+	} else throw error;
+});
+const args = process.argv.slice(2);
+const scriptLoaders = {
+	build: () => import("./scripts/build.js"),
+	dev: () => import("./scripts/dev.js")
+};
+const scriptIndex = args.findIndex((script) => script === "build" || script === "dev");
+if (scriptIndex === -1) {
+	console.log("Unknown script \"" + args[0] + "\".");
+	process.exit(1);
+} else {
+	const script = args[scriptIndex];
+	setEnv({
+		NODE_ENV: script === "dev" ? DEVELOPMENT : PRODUCTION,
+		SCRIPT: script
+	});
+	await scriptLoaders[script]();
+}
+//#endregion
+export {};

package/dist/main.cjs

@@ -0,0 +1,73 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let node_fs = require("node:fs");
+node_fs = __toESM(node_fs, 1);
+let node_path = require("node:path");
+node_path = __toESM(node_path, 1);
+//#region utils/env.ts
+const DEVELOPMENT = "development";
+const PRODUCTION = "production";
+function getEnv() {
+	return process.env.NODE_ENV || "development";
+}
+function isDevelopment() {
+	return getEnv() === DEVELOPMENT;
+}
+function isProduction() {
+	return getEnv() === PRODUCTION;
+}
+function isBuild() {
+	return process.env.SCRIPT === "build";
+}
+//#endregion
+//#region paths.ts
+const appDirectory = node_fs.default.realpathSync(process.cwd());
+function resolveApp(relativePath) {
+	return node_path.default.resolve(appDirectory, relativePath);
+}
+var paths_default = {
+	appSrc: resolveApp("src"),
+	appPath: resolveApp("."),
+	appBuild: resolveApp("build"),
+	appIndexJs: resolveApp("src/index.tsx"),
+	publicUrlOrPath: isDevelopment() ? "/" : "./",
+	appHtml: resolveApp("public/index.html"),
+	appTsConfig: resolveApp("./tsconfig.json"),
+	appNodeModules: resolveApp("node_modules"),
+	appPackageJson: resolveApp("package.json"),
+	appPublic: resolveApp("public"),
+	config: resolveApp("react-scripts.config")
+};
+//#endregion
+//#region main.ts
+function defineConfig(config) {
+	return config;
+}
+//#endregion
+exports.defineConfig = defineConfig;
+exports.getEnv = getEnv;
+exports.isBuild = isBuild;
+exports.isDevelopment = isDevelopment;
+exports.isProduction = isProduction;
+exports.paths = paths_default;

package/dist/main.d.cts

@@ -0,0 +1,30 @@
+import { Configuration } from "@rspack/core";
+
+//#region paths.d.ts
+declare const _default: {
+  appSrc: string;
+  appPath: string;
+  appBuild: string;
+  appIndexJs: string;
+  publicUrlOrPath: string;
+  appHtml: string;
+  appTsConfig: string;
+  appNodeModules: string;
+  appPackageJson: string;
+  appPublic: string;
+  config: string;
+};
+//#endregion
+//#region utils/env.d.ts
+declare function getEnv(): string;
+declare function isDevelopment(): boolean;
+declare function isProduction(): boolean;
+declare function isBuild(): boolean;
+//#endregion
+//#region main.d.ts
+type ReactScriptsConfig = {
+  configureRspack?: (config: Configuration) => Configuration;
+};
+declare function defineConfig(config: ReactScriptsConfig): ReactScriptsConfig;
+//#endregion
+export { ReactScriptsConfig, defineConfig, getEnv, isBuild, isDevelopment, isProduction, _default as paths };

package/dist/main.d.ts

@@ -0,0 +1,30 @@
+import { Configuration } from "@rspack/core";
+
+//#region paths.d.ts
+declare const _default: {
+  appSrc: string;
+  appPath: string;
+  appBuild: string;
+  appIndexJs: string;
+  publicUrlOrPath: string;
+  appHtml: string;
+  appTsConfig: string;
+  appNodeModules: string;
+  appPackageJson: string;
+  appPublic: string;
+  config: string;
+};
+//#endregion
+//#region utils/env.d.ts
+declare function getEnv(): string;
+declare function isDevelopment(): boolean;
+declare function isProduction(): boolean;
+declare function isBuild(): boolean;
+//#endregion
+//#region main.d.ts
+type ReactScriptsConfig = {
+  configureRspack?: (config: Configuration) => Configuration;
+};
+declare function defineConfig(config: ReactScriptsConfig): ReactScriptsConfig;
+//#endregion
+export { ReactScriptsConfig, defineConfig, getEnv, isBuild, isDevelopment, isProduction, _default as paths };

package/dist/main.js

@@ -0,0 +1,43 @@
+import fs from "node:fs";
+import path from "node:path";
+//#region utils/env.ts
+const DEVELOPMENT = "development";
+const PRODUCTION = "production";
+function getEnv() {
+	return process.env.NODE_ENV || "development";
+}
+function isDevelopment() {
+	return getEnv() === DEVELOPMENT;
+}
+function isProduction() {
+	return getEnv() === PRODUCTION;
+}
+function isBuild() {
+	return process.env.SCRIPT === "build";
+}
+//#endregion
+//#region paths.ts
+const appDirectory = fs.realpathSync(process.cwd());
+function resolveApp(relativePath) {
+	return path.resolve(appDirectory, relativePath);
+}
+var paths_default = {
+	appSrc: resolveApp("src"),
+	appPath: resolveApp("."),
+	appBuild: resolveApp("build"),
+	appIndexJs: resolveApp("src/index.tsx"),
+	publicUrlOrPath: isDevelopment() ? "/" : "./",
+	appHtml: resolveApp("public/index.html"),
+	appTsConfig: resolveApp("./tsconfig.json"),
+	appNodeModules: resolveApp("node_modules"),
+	appPackageJson: resolveApp("package.json"),
+	appPublic: resolveApp("public"),
+	config: resolveApp("react-scripts.config")
+};
+//#endregion
+//#region main.ts
+function defineConfig(config) {
+	return config;
+}
+//#endregion
+export { defineConfig, getEnv, isBuild, isDevelopment, isProduction, paths_default as paths };

package/dist/rspack.config-8gFQGJU3.js

@@ -0,0 +1,285 @@
+import { a as isProduction, i as isDevelopment, r as getEnv } from "./env-DxzdvROc.js";
+import { createRequire } from "node:module";
+import { rspack } from "@rspack/core";
+import path from "node:path";
+import fs, { existsSync } from "node:fs";
+import { ReactRefreshRspackPlugin } from "@rspack/plugin-react-refresh";
+//#region paths.ts
+const appDirectory = fs.realpathSync(process.cwd());
+function resolveApp(relativePath) {
+	return path.resolve(appDirectory, relativePath);
+}
+var paths_default = {
+	appSrc: resolveApp("src"),
+	appPath: resolveApp("."),
+	appBuild: resolveApp("build"),
+	appIndexJs: resolveApp("src/index.tsx"),
+	publicUrlOrPath: isDevelopment() ? "/" : "./",
+	appHtml: resolveApp("public/index.html"),
+	appTsConfig: resolveApp("./tsconfig.json"),
+	appNodeModules: resolveApp("node_modules"),
+	appPackageJson: resolveApp("package.json"),
+	appPublic: resolveApp("public"),
+	config: resolveApp("react-scripts.config")
+};
+//#endregion
+//#region utils/find-entry-file.ts
+const fileExtensions = [
+	"ts",
+	"mts",
+	"mjs",
+	"cjs",
+	"js"
+];
+/**
+* Find a file with any of the supported JavaScript extensions
+* @param basePath - The base path without extension
+* @returns The file path with extension if found, or a default path
+*/
+function findEntryFile(basePath) {
+	for (const ext of fileExtensions) {
+		const filePath = `${basePath}.${ext}`;
+		if (existsSync(filePath)) return filePath;
+	}
+}
+//#endregion
+//#region config.ts
+function isPlainObject(value) {
+	return typeof value === "object" && value !== null;
+}
+function createConfigImportError(configPath, error) {
+	const isTypeScriptConfig = /\.(cts|mts|ts)$/.test(configPath);
+	const fileName = path.basename(configPath);
+	return new Error(`Failed to load ${fileName} with native import().${isTypeScriptConfig ? ` Native TypeScript import requires Node.js >= 22.18.0. On older Node.js versions, rename the config file to .mjs or .cjs.` : ""}`, { cause: error });
+}
+async function loadReactScriptsConfig() {
+	const configPath = findEntryFile(paths_default.config);
+	if (!configPath) return {};
+	let moduleNamespace;
+	try {
+		moduleNamespace = await import(configPath);
+	} catch (error) {
+		throw createConfigImportError(configPath, error);
+	}
+	const config = moduleNamespace.default ?? moduleNamespace;
+	if (!isPlainObject(config)) throw new TypeError(`${path.basename(configPath)} must export a configuration object.`);
+	return config;
+}
+//#endregion
+//#region utils/detect-package.ts
+const require$1 = createRequire(import.meta.url);
+function detectPackage(packageName) {
+	try {
+		require$1.resolve(packageName);
+		return true;
+	} catch {
+		return false;
+	}
+}
+//#endregion
+//#region alias.ts
+const moduleFileExtensions = [
+	"ts",
+	"tsx",
+	"js",
+	"json",
+	"mjs",
+	"jsx"
+].map((ext) => `.${ext}`);
+const aliasSymbol = {
+	src: "@",
+	root: "@app"
+};
+const alias = {
+	[aliasSymbol.src]: paths_default.appSrc,
+	[aliasSymbol.root]: paths_default.appPath
+};
+//#endregion
+//#region rspack.config.ts
+const hasJsxRuntime = detectPackage("react/jsx-runtime");
+const hasTailwind = detectPackage("tailwindcss");
+const hasSwcHelper = detectPackage("@swc/helpers");
+const lessRegex = /\.less$/;
+const sassRegex = /\.(scss|sass)$/;
+const cssRegex = /\.css$/;
+const imageInlineSizeLimit = 1e4;
+const require = createRequire(import.meta.url);
+function resolvePackage(packageName) {
+	return require.resolve(packageName);
+}
+async function createRspackConfig() {
+	const isEnvironmentDevelopment = isDevelopment();
+	const isEnvironmentProduction = isProduction();
+	function getStyleLoaders(preProcessor) {
+		const loaders = [
+			isEnvironmentProduction && {
+				loader: rspack.CssExtractRspackPlugin.loader,
+				options: paths_default.publicUrlOrPath.startsWith(".") ? { publicPath: "../../" } : {}
+			},
+			{
+				loader: "builtin:lightningcss-loader",
+				/** @type {import('@rspack/core').LightningcssLoaderOptions} */
+				options: { minify: isEnvironmentProduction }
+			},
+			{
+				loader: resolvePackage("postcss-loader"),
+				options: hasTailwind ? { postcssOptions: {
+					ident: "postcss",
+					config: false,
+					plugins: [require("@tailwindcss/postcss")]
+				} } : void 0
+			}
+		].filter(Boolean);
+		if (preProcessor) loaders.push(preProcessor);
+		return loaders;
+	}
+	const config = {
+		target: ["browserslist"],
+		stats: "errors-warnings",
+		mode: getEnv(),
+		bail: isEnvironmentProduction,
+		devtool: isEnvironmentDevelopment && "cheap-module-source-map",
+		entry: paths_default.appIndexJs,
+		output: {
+			path: paths_default.appBuild,
+			pathinfo: isEnvironmentDevelopment,
+			filename: isEnvironmentProduction ? "static/js/[name].[contenthash:8].js" : "static/js/[name].js",
+			chunkFilename: isEnvironmentProduction ? "static/js/[name].[contenthash:8].chunk.js" : "static/js/[name].chunk.js",
+			assetModuleFilename: "static/media/[name].[hash][ext]",
+			publicPath: paths_default.publicUrlOrPath,
+			devtoolModuleFilenameTemplate: isEnvironmentProduction ? (info) => path.relative(paths_default.appSrc, info.absoluteResourcePath).replaceAll("\\", "/") : (info) => path.resolve(info.absoluteResourcePath).replaceAll("\\", "/")
+		},
+		infrastructureLogging: { level: "none" },
+		optimization: {
+			runtimeChunk: "single",
+			splitChunks: {
+				chunks: "async",
+				minChunks: 1,
+				minSize: 2e4,
+				maxAsyncRequests: 30,
+				maxInitialRequests: 30,
+				cacheGroups: {
+					vendors: {
+						test: /[/\\]node_modules[/\\]/,
+						name: "chunk-vendors",
+						priority: -10,
+						reuseExistingChunk: true
+					},
+					default: {
+						minChunks: 2,
+						priority: -20,
+						reuseExistingChunk: true
+					}
+				}
+			},
+			minimizer: [new rspack.LightningCssMinimizerRspackPlugin(), new rspack.SwcJsMinimizerRspackPlugin({
+				extractComments: false,
+				minimizerOptions: {
+					minify: true,
+					mangle: true,
+					ecma: 5,
+					compress: { passes: 2 },
+					format: { comments: false }
+				}
+			})]
+		},
+		resolve: {
+			extensions: moduleFileExtensions,
+			alias
+		},
+		module: {
+			rules: [{ oneOf: [
+				{
+					test: [/\.avif$/],
+					type: "asset",
+					mimetype: "image/avif",
+					parser: { dataUrlCondition: { maxSize: imageInlineSizeLimit } }
+				},
+				{
+					test: [
+						/\.bmp$/,
+						/\.gif$/,
+						/\.jpe?g$/,
+						/\.png$/
+					],
+					type: "asset",
+					parser: { dataUrlCondition: { maxSize: imageInlineSizeLimit } }
+				},
+				{
+					test: /\.[jt]sx?$/,
+					exclude: [/node_modules/],
+					use: {
+						loader: "builtin:swc-loader",
+						options: {
+							jsc: {
+								externalHelpers: hasSwcHelper,
+								loose: true,
+								parser: {
+									syntax: "typescript",
+									tsx: true
+								},
+								transform: { react: {
+									throwIfNamespace: true,
+									development: isEnvironmentDevelopment,
+									useBuiltins: true,
+									runtime: hasJsxRuntime ? "automatic" : "classic",
+									refresh: isEnvironmentDevelopment
+								} }
+							},
+							module: { type: "es6" }
+						}
+					}
+				},
+				{
+					test: lessRegex,
+					use: getStyleLoaders({ loader: resolvePackage("less-loader") }),
+					sideEffects: true,
+					type: "css/auto"
+				},
+				{
+					test: sassRegex,
+					use: getStyleLoaders({
+						loader: resolvePackage("sass-loader"),
+						options: {
+							api: "modern-compiler",
+							implementation: resolvePackage("sass-embedded")
+						}
+					}),
+					sideEffects: true,
+					type: "css/auto"
+				},
+				{
+					test: cssRegex,
+					use: getStyleLoaders(),
+					sideEffects: true,
+					type: "css/auto"
+				},
+				{
+					exclude: [
+						/^$/,
+						/\.(js|mjs|jsx|ts|tsx)$/,
+						/\.html$/,
+						/\.json$/
+					],
+					type: "asset/resource"
+				}
+			] }],
+			parser: { "css/auto": { namedExports: false } }
+		},
+		plugins: [
+			new rspack.HtmlRspackPlugin({
+				inject: true,
+				template: paths_default.appHtml,
+				minify: isEnvironmentProduction
+			}),
+			isEnvironmentDevelopment && new rspack.CaseSensitivePlugin(),
+			isEnvironmentDevelopment && new ReactRefreshRspackPlugin()
+		],
+		performance: false
+	};
+	const reactScriptsConfig = await loadReactScriptsConfig();
+	if (reactScriptsConfig.configureRspack) reactScriptsConfig.configureRspack(config);
+	return config;
+}
+//#endregion
+export { paths_default as n, createRspackConfig as t };

package/dist/scripts/build.js

@@ -0,0 +1,195 @@
+import { n as paths_default, t as createRspackConfig } from "../rspack.config-8gFQGJU3.js";
+import { styleText } from "node:util";
+import fs from "node:fs/promises";
+import { exit } from "node:process";
+import { rspack } from "@rspack/core";
+import path from "node:path";
+import fs$1 from "node:fs";
+import prettyBytes from "pretty-bytes";
+import zlib from "node:zlib";
+//#region utils/fs-extra.ts
+async function emptyDirectory(directory) {
+	await fs.rm(directory, {
+		recursive: true,
+		force: true
+	});
+	await fs.mkdir(directory, { recursive: true });
+}
+/**
+* 读取文件夹下的所有文件
+* @param path
+* @returns
+*/
+async function readdir(path$1) {
+	let fileList = [];
+	const files = await fs.readdir(path$1);
+	if (files.length === 0) return [];
+	for (const file of files) {
+		const filePath = path.join(path$1, file);
+		if ((await fs.stat(filePath)).isDirectory()) fileList = [...fileList, ...await readdir(filePath)];
+		else fileList.push(filePath);
+	}
+	return fileList;
+}
+//#endregion
+//#region utils/gzip-size.ts
+function getOptions(options) {
+	return {
+		level: 9,
+		...options
+	};
+}
+function gzipSync(input, options) {
+	return zlib.gzipSync(input, getOptions(options)).length;
+}
+//#endregion
+//#region utils/strip-ansi.ts
+function ansiRegex(options = {}) {
+	const { onlyFirst } = options;
+	const pattern = [String.raw`[\u001B\u009B][[\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\d\/#&.:=?%@~_]+)*|[a-zA-Z\d]+(?:;[-a-zA-Z\d\/#&.:=?%@~_]*)*)?\u0007)`, String.raw`(?:(?:\d{1,4}(?:;\d{0,4})*)?[\dA-PR-TZcf-nq-uy=><~]))`].join("|");
+	return new RegExp(pattern, onlyFirst ? void 0 : "g");
+}
+function stripAnsi(string) {
+	const regex = ansiRegex();
+	return string.replace(regex, "");
+}
+//#endregion
+//#region utils/file-size-reporter.ts
+const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
+const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+/**
+* 是不是可以读取的资源
+* @param asset
+* @returns
+*/
+function canReadAsset(asset) {
+	return /\.(js|css)$/.test(asset) && !/service-worker\.js/.test(asset) && !/precache-manifest\.[\da-f]+\.js/.test(asset);
+}
+function removeFileNameHash(buildFolder, fileName) {
+	return fileName.replace(buildFolder, "").replaceAll("\\", "/").replace(/\/?(.*)(\.[\da-f]+)(\.chunk)?(\.js|\.css)/, (match, p1, p2, p3, p4) => p1 + p4);
+}
+async function measureFileSizesBeforeBuild(buildFolder) {
+	const result = {
+		root: buildFolder,
+		sizes: {}
+	};
+	try {
+		const files = await readdir(buildFolder);
+		if (Array.isArray(files) && files.length > 0) {
+			const canReadAssetFiles = files.filter((item) => canReadAsset(item));
+			for (const fileName of canReadAssetFiles) {
+				const stats = fs$1.statSync(fileName);
+				const fileKey = removeFileNameHash(buildFolder, fileName);
+				result.sizes[fileKey] = stats.size;
+			}
+		}
+	} catch {
+		return result;
+	}
+	return result;
+}
+function getDifferenceLabel(currentSize, previousSize) {
+	const FIFTY_KILOBYTES = 1024 * 50;
+	const difference = currentSize - previousSize;
+	const fileSize = Number.isNaN(difference) ? "0" : prettyBytes(difference);
+	if (difference >= FIFTY_KILOBYTES) return styleText("red", "+" + fileSize);
+	else if (difference < FIFTY_KILOBYTES && difference > 0) return styleText("yellow", "+" + fileSize);
+	else if (difference < 0) return styleText("green", fileSize);
+	else return "";
+}
+function printFileSizesAfterBuild(stats, previousSizeMap) {
+	let suggestBundleSplitting = false;
+	const root = previousSizeMap.root;
+	const sizes = previousSizeMap.sizes;
+	const statCompilation = stats.toJson({
+		all: false,
+		assets: true
+	});
+	if (statCompilation.assets) {
+		const assets = [];
+		const gzipLabelLengthList = [];
+		const sizeLabelLengthList = [];
+		for (const asset of statCompilation.assets) {
+			if (!canReadAsset(asset.name)) continue;
+			const fileContents = fs$1.readFileSync(path.join(root, asset.name));
+			const previousSize = sizes[removeFileNameHash(root, asset.name)];
+			const difference = getDifferenceLabel(asset.size, previousSize);
+			const sizeLabel = prettyBytes(asset.size) + (difference ? " (" + difference + ")" : "");
+			const gzipLabel = "gzip : " + prettyBytes(gzipSync(fileContents));
+			const sizeLabelLength = stripAnsi(sizeLabel).length;
+			const gzipLabelLength = stripAnsi(gzipLabel).length;
+			assets.push({
+				folder: path.join(path.basename(paths_default.appBuild), path.dirname(asset.name)),
+				name: path.basename(asset.name),
+				size: asset.size,
+				sizeLabel,
+				gzipLabel,
+				sizeLabelLength,
+				gzipLabelLength
+			});
+			gzipLabelLengthList.push(gzipLabelLength);
+			sizeLabelLengthList.push(sizeLabelLength);
+		}
+		assets.sort((a, b) => b.size - a.size);
+		const longestSizeLabelLength = Math.max.apply(void 0, sizeLabelLengthList);
+		const longestGzipSizeLabelLength = Math.max.apply(void 0, gzipLabelLengthList);
+		for (const asset of assets) {
+			let sizeLabel = asset.sizeLabel;
+			let gzipLabel = asset.gzipLabel;
+			const sizeLabelLength = asset.sizeLabelLength;
+			const gzipLabelLength = asset.gzipLabelLength;
+			if (sizeLabelLength < longestSizeLabelLength) sizeLabel += " ".repeat(longestSizeLabelLength - sizeLabelLength);
+			if (gzipLabelLength < longestGzipSizeLabelLength) gzipLabel += " ".repeat(longestGzipSizeLabelLength - gzipLabelLength);
+			const maxRecommendedSize = asset.name.indexOf("main.") === 0 ? WARN_AFTER_BUNDLE_GZIP_SIZE : WARN_AFTER_CHUNK_GZIP_SIZE;
+			const isLarge = maxRecommendedSize && asset.size > maxRecommendedSize;
+			if (isLarge && path.extname(asset.name) === ".js") suggestBundleSplitting = true;
+			console.log("  " + (isLarge ? styleText("yellow", sizeLabel) : sizeLabel) + "   " + gzipLabel, "  " + styleText("dim", asset.folder + path.sep) + styleText("cyan", asset.name));
+		}
+	}
+	if (suggestBundleSplitting) {
+		console.log();
+		console.log(styleText("yellow", "The bundle size is significantly larger than recommended."));
+		console.log(styleText("yellow", "You can also analyze the project dependencies: https://goo.gl/LeUzfb"));
+	}
+}
+//#endregion
+//#region scripts/build.ts
+async function startBuild() {
+	try {
+		const previousFileSizes = await measureFileSizesBeforeBuild(paths_default.appBuild);
+		await emptyDirectory(paths_default.appBuild);
+		await copyPublicFolder();
+		const stats = await build();
+		console.log(styleText("green", "Compiled successfully.\n"));
+		console.log("File sizes after gzip:\n");
+		if (stats) printFileSizesAfterBuild(stats, previousFileSizes);
+		console.log();
+	} catch (error) {
+		console.log(styleText("red", "Failed to compile.\n"));
+		if (error && error.message) console.log(error.message);
+		exit(1);
+	}
+}
+function copyPublicFolder() {
+	return fs.cp(paths_default.appPublic, paths_default.appBuild, {
+		recursive: true,
+		filter: (source) => source !== paths_default.appHtml
+	});
+}
+/**
+* Create the production build and print the deployment instructions.
+* @returns
+*/
+async function build() {
+	console.log("Creating an optimized production build...");
+	const compiler = rspack(await createRspackConfig());
+	return new Promise((resolve, reject) => {
+		compiler.run((error, stats) => {
+			if (error) return reject(error);
+			return resolve(stats);
+		});
+	});
+}
+await startBuild();
+//#endregion
+export {};

package/dist/scripts/dev.js

@@ -0,0 +1,299 @@
+import { n as paths_default, t as createRspackConfig } from "../rspack.config-8gFQGJU3.js";
+import { createRequire } from "node:module";
+import { styleText } from "node:util";
+import { exit } from "node:process";
+import { rspack } from "@rspack/core";
+import path from "node:path";
+import { RspackDevServer } from "@rspack/dev-server";
+import url from "node:url";
+import prompts from "prompts";
+import getPort from "get-port";
+import os from "node:os";
+//#region utils/address.ts
+function getDefaultInterfaceName() {
+	let value = "eth";
+	const platform = os.platform();
+	if (platform === "darwin") value = "en";
+	else if (platform === "win32") value = void 0;
+	return value;
+}
+function matchName(actualFamily, expectedFamily) {
+	if (expectedFamily === "IPv4") return actualFamily === "IPv4" || actualFamily === 4;
+	if (expectedFamily === "IPv6") return actualFamily === "IPv6" || actualFamily === 6;
+	return actualFamily === expectedFamily;
+}
+function findAddressFromInterface(items, expectedFamily, ignoreLoAddress = false) {
+	let firstMatchItem;
+	for (const item of items) if (matchName(item.family, expectedFamily)) {
+		if (ignoreLoAddress && item.address.startsWith("127.")) continue;
+		if (expectedFamily === "IPv6") {
+			if (item.scopeid === 0) return item;
+			if (!firstMatchItem) firstMatchItem = item;
+		} else return item;
+	}
+	return firstMatchItem;
+}
+function getInterfaceAddress(family, name) {
+	const interfaces = os.networkInterfaces();
+	const noName = !name;
+	name = name || getDefaultInterfaceName();
+	family = family || "IPv4";
+	if (name) for (let index = -1; index < 8; index++) {
+		const items = interfaces[name + (index >= 0 ? index : "")];
+		if (items) {
+			const item = findAddressFromInterface(items, family);
+			if (item) return item;
+		}
+	}
+	if (noName) for (const k in interfaces) {
+		const items = interfaces[k];
+		if (items) {
+			const item = findAddressFromInterface(items, family, true);
+			if (item) return item;
+		}
+	}
+}
+/**
+* Get current machine IPv4
+*
+* interfaceName: interface name, default is 'eth' on linux, 'en' on mac os.
+*/
+function ip(interfaceName) {
+	return getInterfaceAddress("IPv4", interfaceName)?.address;
+}
+//#endregion
+//#region utils/is-root.ts
+/**
+* 检查进程是否以 root 用户身份运行
+*/
+function isRoot() {
+	return process.getuid && process.getuid() === 0;
+}
+//#endregion
+//#region utils/clear-console.ts
+/**
+* 清除控制台的信息
+*/
+function clearConsole() {
+	process.stdout.write(process.platform === "win32" ? "\x1B[2J\x1B[0f" : "\x1B[2J\x1B[3J\x1B[H");
+}
+//#endregion
+//#region utils/dev-server-utils.ts
+const isInteractive$1 = process.stdout.isTTY;
+function printInstructions(appName, urls) {
+	console.log();
+	console.log(`You can now view ${styleText("bold", appName)} in the browser.`);
+	console.log();
+	if (urls.lanUrlForTerminal) {
+		console.log(`  ${styleText("bold", "Local:")}            ${urls.localUrlForTerminal}`);
+		console.log(`  ${styleText("bold", "On Your Network:")}  ${urls.lanUrlForTerminal}`);
+	} else console.log(`  ${urls.localUrlForTerminal}`);
+	console.log();
+	console.log("Note that the development build is not optimized.");
+}
+/**
+* 准备Url 数据
+*/
+function prepareUrls(options) {
+	const { protocol, host, port, pathname = "/" } = options;
+	function formatUrl(hostname) {
+		return url.format({
+			protocol,
+			hostname,
+			port,
+			pathname
+		});
+	}
+	function prettyPrintUrl(hostname) {
+		return url.format({
+			protocol,
+			hostname,
+			port: styleText("bold", String(port)),
+			pathname
+		});
+	}
+	const isUnspecifiedHost = host === "0.0.0.0" || host === "::";
+	let prettyHost;
+	let lanUrlForConfig;
+	let lanUrlForTerminal;
+	if (isUnspecifiedHost) {
+		prettyHost = "localhost";
+		try {
+			lanUrlForConfig = ip();
+			if (lanUrlForConfig) if (/^10\.|^172\.(1[6-9]|2\d|3[01])\.|^192\.168\./.test(lanUrlForConfig)) lanUrlForTerminal = prettyPrintUrl(lanUrlForConfig);
+			else lanUrlForConfig = void 0;
+		} catch {}
+	} else prettyHost = host;
+	const localUrlForTerminal = prettyPrintUrl(prettyHost);
+	const localUrlForBrowser = formatUrl(prettyHost);
+	return {
+		lanUrlForConfig,
+		lanUrlForTerminal,
+		localUrlForTerminal,
+		localUrlForBrowser
+	};
+}
+/**
+* 选择端口
+* @param defaultPort 默认端口
+* @param host 域名
+*/
+async function choosePort(options) {
+	try {
+		const port = await getPort(options);
+		if (port === options.port) return port;
+		const message = process.platform !== "win32" && port < 1024 && !isRoot() ? `Admin permissions are required to run a server on a port below 1024.` : `Something is already running on port ${port}.`;
+		if (isInteractive$1) {
+			clearConsole();
+			return (await prompts({
+				type: "confirm",
+				name: "shouldChangePort",
+				message: styleText("yellow", message) + "\n\nWould you like to run the app on another port instead",
+				initial: true
+			})).shouldChangePort ? port : void 0;
+		} else {
+			console.log(styleText("red", message));
+			return;
+		}
+	} catch (error) {
+		throw new Error(styleText("red", `Could not find an open port at ${styleText("bold", options.host)}.`) + "\n" + ("Network error message: " + error.message || error) + "\n");
+	}
+}
+/**
+* 编辑webpack配置
+*/
+function createCompiler(options) {
+	const { appName, config, urls } = options;
+	let compiler;
+	try {
+		compiler = rspack(config);
+	} catch (error) {
+		console.log(styleText("red", "Failed to compile."));
+		console.log();
+		console.log(error.message || error);
+		console.log();
+		exit(1);
+	}
+	compiler.hooks.invalid.tap("invalid", () => {
+		if (isInteractive$1) clearConsole();
+		console.log("Compiling...");
+	});
+	let isFirstCompile = true;
+	compiler.hooks.done.tap("done", async (stats) => {
+		if (isInteractive$1) clearConsole();
+		const statsData = stats.toJson({
+			all: false,
+			warnings: true,
+			errors: true
+		});
+		const errors = statsData.errors ?? [];
+		const warnings = statsData.warnings ?? [];
+		const isSuccessful = errors.length === 0 && warnings.length === 0;
+		if (isSuccessful) console.log(styleText("green", "Compiled successfully!"));
+		if (isSuccessful && (isInteractive$1 || isFirstCompile)) printInstructions(appName, urls);
+		isFirstCompile = false;
+		if (errors.length > 0) {
+			if (errors.length > 1) errors.length = 1;
+			console.log(styleText("red", "Failed to compile.\n"));
+			console.log(errors.join("\n\n"));
+			return;
+		}
+		if (warnings.length > 0) {
+			console.log(styleText("yellow", "Compiled with warnings.\n"));
+			console.log(warnings.join("\n\n"));
+			console.log("\nSearch for the " + styleText("underline", styleText("yellow", "keywords")) + " to learn more about each warning.");
+			console.log("To ignore, add " + styleText("cyan", "// eslint-disable-next-line") + " to the line before.\n");
+		}
+	});
+	return compiler;
+}
+//#endregion
+//#region utils/escape-string-regexp.ts
+function escapeStringRegexp(string) {
+	return string.replaceAll(/[$()*+.?[\\\]^{|}]/g, String.raw`\$&`).replaceAll("-", String.raw`\x2d`);
+}
+//#endregion
+//#region utils/ignored-files.ts
+function ignoredFiles(appSource) {
+	return new RegExp(`^(?!${escapeStringRegexp(path.normalize(appSource + "/").replaceAll(/\\+/g, "/"))}).+/node_modules/`, "g");
+}
+//#endregion
+//#region rspack-dev-server.ts
+function createDevelopmentServerConfig() {
+	return {
+		allowedHosts: "all",
+		client: { overlay: true },
+		headers: {
+			"Access-Control-Allow-Origin": "*",
+			"Access-Control-Allow-Methods": "*",
+			"Access-Control-Allow-Headers": "*"
+		},
+		compress: true,
+		static: {
+			directory: paths_default.appPublic,
+			publicPath: [paths_default.publicUrlOrPath],
+			watch: { ignored: ignoredFiles(paths_default.appSrc) }
+		},
+		devMiddleware: { publicPath: paths_default.publicUrlOrPath.slice(0, -1) },
+		historyApiFallback: {
+			disableDotRule: true,
+			index: paths_default.publicUrlOrPath
+		}
+	};
+}
+//#endregion
+//#region scripts/dev.ts
+const require = createRequire(import.meta.url);
+const isInteractive = process.stdout.isTTY;
+const developmentServerConfig = {
+	PORT: 3e3,
+	HOST: "0.0.0.0",
+	PROTOCOL: "http"
+};
+async function startDevelopment() {
+	try {
+		const port = await choosePort({ port: developmentServerConfig.PORT });
+		if (port === void 0) return;
+		const config = await createRspackConfig();
+		const appName = require(paths_default.appPackageJson).name;
+		const urls = prepareUrls({
+			protocol: developmentServerConfig.PROTOCOL,
+			host: developmentServerConfig.HOST,
+			port,
+			pathname: paths_default.publicUrlOrPath.slice(0, -1)
+		});
+		const localUrlForBrowser = new URL(urls.localUrlForBrowser);
+		const compiler = createCompiler({
+			appName,
+			config,
+			urls
+		});
+		const developmentServer = new RspackDevServer({
+			...createDevelopmentServerConfig(),
+			host: localUrlForBrowser.hostname,
+			port: localUrlForBrowser.port,
+			open: true
+		}, compiler);
+		developmentServer.startCallback((error) => {
+			if (isInteractive) clearConsole();
+			console.log(styleText("cyan", "Starting the development server...\n"));
+		});
+		developmentServer.stopCallback((error) => {
+			if (error) console.log("Server stopped.", error);
+		});
+		for (const signal of ["SIGINT", "SIGTERM"]) process.on(signal, () => {
+			developmentServer.stop();
+			process.exit();
+		});
+		if (process.env.CI !== "true") process.stdin.on("end", function() {
+			developmentServer.stop();
+			exit();
+		});
+	} catch (error) {
+		if (error?.message) console.log(error.message);
+		exit(1);
+	}
+}
+await startDevelopment();
+//#endregion
+export {};

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@omnific/react-scripts",
+  "version": "0.1.0",
+  "description": "React app scripts based on Rspack",
+  "license": "MIT",
+  "type": "module",
+  "keywords": [
+    "react",
+    "rspack",
+    "scripts"
+  ],
+  "author": "monhan-97",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/monhan-97/omnific.git",
+    "directory": "packages/react-scripts"
+  },
+  "bugs": {
+    "url": "https://github.com/monhan-97/omnific.git/issues"
+  },
+  "bin": {
+    "react-scripts": "./dist/index.js"
+  },
+  "main": "./dist/main.cjs",
+  "module": "./dist/main.js",
+  "types": "./dist/main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.js",
+      "require": "./dist/main.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "dependencies": {
+    "@rspack/cli": "^2.0.1",
+    "@rspack/core": "^2.0.1",
+    "@rspack/dev-server": "^2.0.1",
+    "@rspack/plugin-react-refresh": "^2.0.0",
+    "@tailwindcss/postcss": "^4.2.4",
+    "get-port": "^7.2.0",
+    "less": "^4.6.4",
+    "less-loader": "^12.3.2",
+    "postcss": "^8.5.13",
+    "postcss-loader": "^8.2.0",
+    "pretty-bytes": "^7.1.0",
+    "prompts": "^2.4.2",
+    "react-refresh": "^0.18.0",
+    "sass-embedded": "^1.93.2",
+    "sass-loader": "^16.0.6",
+    "@omnific/types": "0.0.5"
+  },
+  "devDependencies": {
+    "@types/prompts": "^2.4.9",
+    "tsdown": "^0.21.10"
+  },
+  "scripts": {
+    "build": "tsdown -c tsdown.config.mjs",
+    "release": "pnpm pack && pnpm publish --access public",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}