feat(cli): use SWC to do TS config transformamation (#11411)

* feat: use swc to do ts transform

* chore: fix require.extensions

* Update packages/rspack-cli/src/utils/loadConfig.ts

Co-authored-by: Copilot <[email protected]>

* chore: fix type

* chore: disable noImplicitAnyLet rule

* chore: use pirate instead

* chore: add more tests

* chore: add more error friendly message

* chore: support sourcemap

* chore: remove rechoir link

---------

Co-authored-by: Copilot <[email protected]>

Author: hardfist

biome.jsonc

@@ -9,7 +9,13 @@
 			"allowTrailingCommas": true
 		}
 	},
-	"assist": { "actions": { "source": { "organizeImports": "on" } } },
+	"assist": {
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
+	},
 	"linter": {
 		"enabled": true,
 		"rules": {
@@ -42,7 +48,8 @@
 				"noPrototypeBuiltins": "off",
 				"noAssignInExpressions": "off",
 				"noControlCharactersInRegex": "off",
-				"noExplicitAny": "off"
+				"noExplicitAny": "off",
+				"noImplicitAnyLet": "off"
 			}
 		}
 	},
@@ -71,4 +78,4 @@
 		"clientKind": "git",
 		"useIgnoreFile": true
 	}
-}
+}

crates/rspack_binding_api/src/swc.rs

@@ -57,7 +57,9 @@ fn _transform(source: String, options: String) -> napi::Result<TransformOutput>
   compiler
     .transform(
       source,
-      Some(swc_core::common::FileName::Anon),
+      Some(swc_core::common::FileName::Real(
+        options.filename.clone().into(),
+      )),
       options,
       Some(module_source_map_kind),
       |_| {},

packages/rspack-cli/package.json

@@ -37,16 +37,13 @@
     "@rspack/dev-server": "~1.1.3",
     "colorette": "2.0.20",
     "exit-hook": "^4.0.0",
-    "interpret": "^3.1.1",
-    "rechoir": "^0.8.0",
     "webpack-bundle-analyzer": "4.10.2",
-    "yargs": "17.7.2"
+    "yargs": "17.7.2",
+    "pirates": "^4.0.7"
   },
   "devDependencies": {
     "@rslib/core": "0.12.1",
     "@rspack/core": "workspace:*",
-    "@types/interpret": "^1.1.3",
-    "@types/rechoir": "^0.6.4",
     "@types/webpack-bundle-analyzer": "^4.7.0",
     "@types/yargs": "17.0.33",
     "concat-stream": "^2.0.0",
@@ -62,4 +59,4 @@
     "access": "public",
     "provenance": true
   }
-}
+}

packages/rspack-cli/src/utils/isTsFile.ts

@@ -1,8 +1,8 @@
 import path from "node:path";
-
+export const TS_EXTENSION = [".ts", ".cts", ".mts"];
 const isTsFile = (configPath: string) => {
 	const ext = path.extname(configPath);
-	return /\.(c|m)?ts$/.test(ext);
+	return TS_EXTENSION.includes(ext);
 };
 
 export default isTsFile;

packages/rspack-cli/src/utils/loadConfig.ts

@@ -1,50 +1,77 @@
 import fs from "node:fs";
 import path from "node:path";
 import {
+	experiments,
 	type MultiRspackOptions,
 	type RspackOptions,
 	util
 } from "@rspack/core";
+import { addHook } from "pirates";
 import type { RspackCLIOptions } from "../types";
 import { crossImport } from "./crossImport";
 import findConfig from "./findConfig";
 import isEsmFile from "./isEsmFile";
-import isTsFile from "./isTsFile";
+import isTsFile, { TS_EXTENSION } from "./isTsFile";
 
-interface RechoirError extends Error {
-	failures: RechoirError[];
-	error: Error;
+const injectInlineSourceMap = ({
+	filename,
+	code,
+	map
+}: {
+	filename: string;
+	code: string;
+	map: string | undefined;
+}): string => {
+	if (map) {
+		const base64Map = Buffer.from(map, "utf8").toString("base64");
+		const sourceMapContent = `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${base64Map}`;
+		return `${code}\n${sourceMapContent}`;
+	}
+	return code;
+};
+export function compile(sourcecode: string, filename: string) {
+	const { code, map } = experiments.swc.transformSync(sourcecode, {
+		jsc: {
+			parser: {
+				syntax: "typescript",
+				tsx: false,
+				decorators: true,
+				dynamicImport: true
+			}
+		},
+		filename: filename,
+		module: { type: "commonjs" },
+		sourceMaps: true,
+		isModule: true
+	});
+	return injectInlineSourceMap({ filename, code, map });
 }
-
 const DEFAULT_CONFIG_NAME = "rspack.config" as const;
-
-const registerLoader = async (configPath: string) => {
-	const ext = path.extname(configPath);
-	// TODO implement good `.mts` support after https://github.com/gulpjs/rechoir/issues/43
+// modified based on https://github.com/swc-project/swc-node/blob/master/packages/register/register.ts#L117
+const registerLoader = (configPath: string) => {
 	// For ESM and `.mts` you need to use: 'NODE_OPTIONS="--loader ts-node/esm" rspack build --config ./rspack.config.mts'
 	if (isEsmFile(configPath) && isTsFile(configPath)) {
 		return;
 	}
 
-	const { default: interpret } = await import("interpret");
-	const extensions = Object.fromEntries(
-		Object.entries(interpret.extensions).filter(([key]) => key === ext)
-	);
-	if (Object.keys(extensions).length === 0) {
+	// Only support TypeScript files with a CommonJS loader here
+	if (!isTsFile(configPath)) {
 		throw new Error(`config file "${configPath}" is not supported.`);
 	}
-
-	try {
-		const { default: rechoir } = await import("rechoir");
-		rechoir.prepare(extensions, configPath);
-	} catch (error) {
-		const failures = (error as RechoirError)?.failures;
-		if (failures) {
-			const messages = failures.map(failure => failure.error.message);
-			throw new Error(`${messages.join("\n")}`);
+	addHook(
+		(code, filename) => {
+			try {
+				return compile(code, filename);
+			} catch (err) {
+				throw new Error(
+					`Failed to transform file "${filename}" when loading TypeScript config file:\n ${err instanceof Error ? err.message : String(err)}`
+				);
+			}
+		},
+		{
+			exts: TS_EXTENSION
 		}
-		throw error;
-	}
+	);
 };
 
 export type LoadedRspackConfig =
@@ -186,7 +213,7 @@ export async function loadExtendedConfig(
 
 		// Register loader for TypeScript files
 		if (isTsFile(resolvedPath) && options.configLoader === "register") {
-			await registerLoader(resolvedPath);
+			registerLoader(resolvedPath);
 		}
 
 		// Load the extended configuration
@@ -241,7 +268,7 @@ export async function loadRspackConfig(
 
 	// load config
 	if (isTsFile(configPath) && options.configLoader === "register") {
-		await registerLoader(configPath);
+		registerLoader(configPath);
 	}
 	const loadedConfig = await crossImport(configPath, cwd);
 

packages/rspack-cli/tests/build/config/config.test.ts

@@ -260,6 +260,39 @@ describe("rspack cli", () => {
 			).resolves.toMatch(/Main monorepo file/);
 		});
 	});
+	describe("should support loader ts-node register", () => {
+		const cwd = resolve(__dirname, "./ts-node-register");
+		it("should load ts-node-register to support declare const enum", async () => {
+			const { exitCode, stdout, stderr } = await run(
+				cwd,
+				["-c", "rspack.config.ts"],
+				{
+					nodeOptions: ["--require", "ts-node/register"]
+				}
+			);
+			expect(stdout).toBeTruthy();
+			expect(stderr).toBeFalsy();
+			expect(exitCode).toBe(0);
+			expect(
+				readFile(resolve(cwd, `./dist/node-register.bundle.js`), {
+					encoding: "utf-8"
+				})
+			).resolves.toMatch(/Main ts-node-register file: 42/);
+		});
+		it("builtin swc-register can't handle declare const enum", async () => {
+			const { exitCode, stdout, stderr } = await run(
+				cwd,
+				["-c", "rspack.config.ts"],
+				{
+					nodeOptions: []
+				}
+			);
+			expect(stdout).toBeFalsy();
+			expect(stderr).toBeTruthy();
+			expect(stderr).toMatch(/ReferenceError: JSB is not defined/);
+			expect(exitCode).toBe(1);
+		});
+	});
 
 	// describe("loose-unrecognized-keys (default)", () => {
 	// 	const cwd = resolve(__dirname, "./loose-unrecognized-keys");

packages/rspack-cli/tests/build/config/ts-node-register/main.ts

@@ -0,0 +1 @@
+console.log(`Main ts-node-register file: ${ANSWER}`);

packages/rspack-cli/tests/build/config/ts-node-register/rspack.config.ts

@@ -0,0 +1,19 @@
+import path from "path";
+import rspack from "@rspack/core";
+declare const enum JSB {
+	SECRET = 42
+}
+export default {
+	mode: "production",
+	entry: path.resolve(__dirname, "main.ts"),
+
+	output: {
+		path: path.resolve(__dirname, "dist"),
+		filename: "node-register.bundle.js"
+	},
+	plugins: [
+		new rspack.DefinePlugin({
+			ANSWER: JSB.SECRET
+		})
+	]
+};

packages/rspack-cli/tests/build/config/ts-node-register/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "target": "ESNext",
+    "module": "commonjs",
+    "noEmit": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "types": [
+      "./namespace.d.ts"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.js"
+  ]
+}