@omnific/react-scripts 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,29 +1,337 @@
 #!/usr/bin/env node
-import { n as PRODUCTION, o as setEnv, t as DEVELOPMENT } from "./env-DxzdvROc.js";
-import { styleText } from "node:util";
+import { t as startBuild } from "./build-CoW3Nti_.js";
+import { a as isDevelopment, i as getEnv, n as DEVELOPMENT, o as isProduction, r as PRODUCTION, t as paths_default } from "./paths-DdPGCuT5.js";
+import { t as startDev } from "./dev-D0bbZds7.js";
+import { createRequire } from "node:module";
+import { parseArgs, styleText } from "node:util";
+import { merge } from "webpack-merge";
+import { rspack } from "@rspack/core";
+import pth from "node:path";
+import { existsSync } from "node:fs";
+import { TsCheckerRspackPlugin } from "ts-checker-rspack-plugin";
+import { ReactRefreshRspackPlugin } from "@rspack/plugin-react-refresh";
+//#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 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);
+}
+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;
+	}
+	return {
+		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) => pth.relative(paths_default.appSrc, info.absoluteResourcePath).replaceAll("\\", "/") : (info) => pth.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,
+								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(),
+			isEnvironmentDevelopment && new TsCheckerRspackPlugin({
+				async: true,
+				formatter: "basic",
+				devServer: false,
+				typescript: {
+					mode: "write-tsbuildinfo",
+					diagnosticOptions: {
+						semantic: true,
+						syntactic: false,
+						declaration: false,
+						global: false
+					},
+					configOverwrite: { compilerOptions: {
+						incremental: true,
+						skipLibCheck: true,
+						noEmit: true
+					} }
+				}
+			})
+		],
+		performance: false
+	};
+}
+//#endregion
+//#region Service.ts
+var Service = class {
+	initialized = false;
+	mode = DEVELOPMENT;
+	commands = {
+		dev: startDev,
+		build: startBuild
+	};
+	projectOptions;
+	webpackRawConfigFns = [];
+	async init(mode) {
+		if (this.initialized) return;
+		this.initialized = true;
+		this.mode = mode;
+		this.loadEnv(mode);
+		await this.loaderUserConfig();
+	}
+	async run(name) {
+		let command = this.commands[name];
+		if (!command && name) throw new Error(`command "${name}" does not exist.`);
+		let mode = name === "dev" ? DEVELOPMENT : PRODUCTION;
+		await this.init(mode);
+		await command({
+			mode,
+			service: this,
+			rspackConfig: this.resolveRspackConfig()
+		});
+	}
+	async loaderUserConfig() {
+		const configPath = findEntryFile(paths_default.config);
+		if (configPath) {
+			const res = await import(configPath);
+			this.handleLoadedUserConfig(res.default);
+		}
+	}
+	resolveRspackConfig() {
+		if (!this.initialized) throw new Error("Service must call init() before calling resolveRspackConfig().");
+		let baseConfig = createRspackConfig();
+		for (const fn of this.webpackRawConfigFns) if (typeof fn === "function") {
+			const res = fn(baseConfig);
+			if (res) baseConfig = merge(baseConfig, res);
+		}
+		return baseConfig;
+	}
+	loadEnv(mode) {
+		process.env.NODE_ENV = mode;
+	}
+	handleLoadedUserConfig(data) {
+		this.projectOptions = data;
+		if (data.configureRspack) this.webpackRawConfigFns.push(data.configureRspack);
+	}
+};
+//#endregion
 //#region index.ts
-process.on("unhandledRejection", (error) => {
-	if (error instanceof Error) {
-		console.log(styleText("red", error.message));
-		process.exit(1);
-	} else throw error;
+process.on("unhandledRejection", consoleError);
+const args = parseArgs({
+	args: process.argv.slice(2),
+	strict: false,
+	allowPositionals: true
 });
-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] + "\".");
+const service = new Service();
+const command = args.positionals[0];
+try {
+	await service.run(command);
+} catch (error) {
+	consoleError(error);
+}
+function consoleError(value) {
+	if (value instanceof Error) console.log(styleText("red", value.message));
+	else console.log(styleText("red", String(value)));
 	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.d.ts

@@ -19,12 +19,12 @@ declare const _default: {
 declare function getEnv(): string;
 declare function isDevelopment(): boolean;
 declare function isProduction(): boolean;
-declare function isBuild(): boolean;
 //#endregion
 //#region main.d.ts
+type ConfigureRspack = (config: Configuration) => Configuration;
 type ReactScriptsConfig = {
-  configureRspack?: (config: Configuration) => Configuration;
+  configureRspack?: ConfigureRspack;
 };
 declare function defineConfig(config: ReactScriptsConfig): ReactScriptsConfig;
 //#endregion
-export { ReactScriptsConfig, defineConfig, getEnv, isBuild, isDevelopment, isProduction, _default as paths };
+export { ConfigureRspack, ReactScriptsConfig, defineConfig, getEnv, isDevelopment, isProduction, _default as paths };

package/dist/main.js

@@ -12,9 +12,6 @@ function isDevelopment() {
 function isProduction() {
 	return getEnv() === PRODUCTION;
 }
-function isBuild() {
-	return process.env.SCRIPT === "build";
-}
 //#endregion
 //#region paths.ts
 const appDirectory = fs.realpathSync(process.cwd());
@@ -40,4 +37,4 @@ function defineConfig(config) {
 	return config;
 }
 //#endregion
-export { defineConfig, getEnv, isBuild, isDevelopment, isProduction, paths_default as paths };
+export { defineConfig, getEnv, isDevelopment, isProduction, paths_default as paths };

package/dist/paths-DdPGCuT5.js

@@ -0,0 +1,35 @@
+import pth from "node:path";
+import fs from "node:fs";
+//#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;
+}
+//#endregion
+//#region paths.ts
+const appDirectory = fs.realpathSync(process.cwd());
+function resolveApp(relativePath) {
+	return pth.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
+export { isDevelopment as a, getEnv as i, DEVELOPMENT as n, isProduction as o, PRODUCTION as r, paths_default as t };

package/dist/scripts/build.js

@@ -1,195 +1,2 @@
-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 {};
+import { t as startBuild } from "../build-CoW3Nti_.js";
+export { startBuild };