feat: experimental.nativeMagicString

.nvmrc

@@ -1 +1 @@
-v22.7.0
+v22.19.0

apps/1000/rolldown.config.mjs

@@ -1,18 +1,28 @@
 import { defineConfig } from "rolldown";
+import { babelMagicString, oxcMagicString, oxcNative, noopTransform } from '../../plugins/sourcemap.js'
 const sourceMap = !!process.env.SOURCE_MAP;
 const m = !!process.env.MINIFY;
 
+let plugins = [
+  process.env.PLUGIN === "0" ? babelMagicString :
+  process.env.PLUGIN === "1" ? oxcMagicString :
+  process.env.PLUGIN === "2" ? oxcNative :
+  process.env.PLUGIN === "3" ? noopTransform :
+  null
+].filter(Boolean);
+
 export default defineConfig({
   input: {
     main: "./src/index.jsx",
   },
   define: {
     "process.env.NODE_ENV": JSON.stringify("production"),
   },
+  plugins,
   profilerNames: !m,
   output: {
     minify: m,
-    sourcemap: sourceMap,
+    sourcemap: true,
     dir: "rolldown-dist",
   },
 });

apps/10000/rolldown.config.mjs

@@ -1,18 +1,29 @@
 import { defineConfig } from "rolldown";
+import { babelMagicString, oxcMagicString, oxcNative, noopTransform } from '../../plugins/sourcemap.js'
 const sourceMap = !!process.env.SOURCE_MAP;
 const m = !!process.env.MINIFY;
 
+let plugins = [
+  process.env.PLUGIN === "0" ? babelMagicString :
+  process.env.PLUGIN === "1" ? oxcMagicString :
+  process.env.PLUGIN === "2" ? oxcNative :
+  process.env.PLUGIN === "3" ? noopTransform :
+  null
+].filter(Boolean);
+
 export default defineConfig({
   input: {
     main: "./src/index.jsx",
   },
   define: {
     "process.env.NODE_ENV": JSON.stringify("production"),
   },
+  plugins,
   profilerNames: !m,
   output: {
     minify: m,
-    sourcemap: sourceMap,
+    sourcemap: true,
     dir: "rolldown-dist",
   },
 });
+

apps/5000/rolldown.config.mjs

@@ -1,18 +1,29 @@
 import { defineConfig } from "rolldown";
+import { babelMagicString, oxcMagicString, oxcNative, noopTransform } from '../../plugins/sourcemap.js'
 const sourceMap = !!process.env.SOURCE_MAP;
 const m = !!process.env.MINIFY;
 
+let plugins = [
+  process.env.PLUGIN === "0" ? babelMagicString :
+  process.env.PLUGIN === "1" ? oxcMagicString :
+  process.env.PLUGIN === "2" ? oxcNative :
+  process.env.PLUGIN === "3" ? noopTransform :
+  null
+].filter(Boolean);
+
 export default defineConfig({
   input: {
     main: "./src/index.jsx",
   },
   define: {
     "process.env.NODE_ENV": JSON.stringify("production"),
   },
+  plugins,
   profilerNames: !m,
   output: {
     minify: m,
-    sourcemap: sourceMap,
+    sourcemap: true,
     dir: "rolldown-dist",
   },
 });
+

package.json

@@ -9,8 +9,12 @@
 	"keywords": [],
 	"author": "",
 	"license": "ISC",
-	"packageManager": "pnpm@9.15.1",
+	"packageManager": "pnpm@10.18.0",
 	"devDependencies": {
+		"@babel/core": "^7.28.4",
+		"@babel/parser": "^7.28.4",
+		"@babel/traverse": "^7.28.4",
+		"@babel/types": "^7.28.4",
 		"@farmfe/cli": "^1.0.0",
 		"@farmfe/core": "^1.0.3",
 		"@farmfe/plugin-react": "^1.0.0",
@@ -20,25 +24,31 @@
 		"@rollup/plugin-typescript": "^12.1.2",
 		"@rsbuild/core": "1.3.7",
 		"@rsbuild/plugin-react": "1.2.0",
-		"@rspack/core": "1.3.5",
 		"@rspack/cli": "1.3.5",
+		"@rspack/core": "1.3.5",
 		"@swc/core": "^1.10.1",
 		"@types/glob": "^7.1.1",
 		"esbuild": "^0.24.0",
 		"glob": "11.0.0",
 		"lint-staged": "^15.2.10",
+		"magic-string": "^0.30.19",
+		"oxc-parser": "^0.93.0",
+		"oxc-walker": "^0.5.2",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"rolldown": "nightly",
-		"vite": "npm:rolldown-vite@latest",
+		"rolldown": "latest",
 		"rollup-plugin-esbuild": "^6.1.1",
 		"rollup-plugin-swc3": "^0.12.1",
-		"terser-webpack-plugin": "^5.3.11"
+		"terser-webpack-plugin": "^5.3.11",
+		"vite": "npm:rolldown-vite@latest"
 	},
 	"dependencies": {
 		"@rollup/plugin-commonjs": "^28.0.1",
 		"@rollup/plugin-node-resolve": "^15.3.0",
 		"@rollup/plugin-replace": "^6.0.1",
 		"rollup": "^4.28.1"
+	},
+	"resolutions": {
+		"rolldown": "https://pkg.pr.new/rolldown@6293"
 	}
 }

plugins/sourcemap.js

@@ -0,0 +1,144 @@
+import { parse } from "@babel/parser";
+import traverse from "@babel/traverse";
+import { parseSync } from "oxc-parser";
+import { ScopeTracker, walk } from "oxc-walker";
+import MagicString from "magic-string";
+
+/**@type {import("rolldown").Plugin}*/
+export const babelMagicString = {
+	name: "babel+magicString",
+	transform(code, id) {
+		if (!id.endsWith(".jsx")) return null;
+
+		// Parse JSX code into AST
+		const ast = parse(code, {
+			sourceType: "module",
+			plugins: ["jsx"],
+		});
+
+		let ms = new MagicString(code);
+		// Traverse the AST
+		traverse.default(ast, {
+			JSXAttribute(path) {
+				const node = path.node;
+				if (
+					node.value?.type === "JSXExpressionContainer" &&
+					node.value.expression?.type === "Identifier" &&
+					node.value.expression.name === "I"
+				) {
+					// Get the binding for "I"
+					const binding = path.scope.getBinding("I");
+					if (binding) {
+						// extract icon type from `@iconify-icons/material-symbols/mark-email-read-outline-rounded.js`
+						let reg = /import I from '(@iconify-icons\/([^']+)\.js)'/;
+						let match = code.match(reg)?.[2];
+
+						ms.appendRight(
+							node.start,
+							`  
+onClick={() => {
+  console.log('icon: ${match}')
+}}
+`,
+						);
+					}
+				}
+			},
+		});
+
+		return {
+			code: ms.toString(),
+			map: ms.generateMap({ hires: true }),
+		};
+	},
+};
+
+export const oxcMagicString = {
+	name: "oxc+magicString",
+	transform(code, id) {
+		if (!id.endsWith(".jsx")) return null;
+
+		const res = parseSync(id, code, {
+			experimentalRawTransfer: true,
+			experimentalLazy: false,
+		});
+
+		const scopeTracker = new ScopeTracker({
+			preserveExitedScopes: true,
+		});
+		let ms = new MagicString(code);
+		// main pass to analyze references
+		walk(res.program, {
+			scopeTracker,
+			enter(node, parent, ctx) {
+				if (
+					node.type === "JSXAttribute" &&
+					node.value.type === "JSXExpressionContainer" &&
+					node.value.expression.type === "Identifier" &&
+					node.value.expression.name === "I"
+				) {
+					let decl = scopeTracker.getDeclaration("I");
+					// extract icon type from `@iconify-icons/material-symbols/mark-email-read-outline-rounded.js`
+					ms.appendRight(
+						node.start,
+						`  
+onClick={() => {
+  console.log('icon: ${decl.importNode.source.value}')
+}}
+`,
+					);
+				}
+			},
+		});
+
+		return {
+			code: ms.toString(),
+			map: ms.generateMap({ hires: true }),
+		};
+	},
+};
+
+export const oxcNative = {
+	name: "oxc+nativeMagicString",
+	transform(code, id, meta) {
+		if (id.endsWith(".jsx")) return null;
+
+		let { magicString: ms, ast } = meta;
+
+		const scopeTracker = new ScopeTracker({
+			preserveExitedScopes: true,
+		});
+		// main pass to analyze references
+		walk(ast, {
+			scopeTracker,
+			enter(node, parent, ctx) {
+				if (
+					node.type === "JSXAttribute" &&
+					node.value.type === "JSXExpressionContainer" &&
+					node.value.expression.type === "Identifier" &&
+					node.value.expression.name === "I"
+				) {
+					let decl = scopeTracker.getDeclaration("I");
+					// extract icon type from `@iconify-icons/material-symbols/mark-email-read-outline-rounded.js`
+					ms.appendRight(
+						node.start,
+						`  
+onClick={() => {
+  console.log('icon: ${decl.importNode.source.value}')
+}}
+`,
+					);
+				}
+			},
+		});
+
+		return {
+			code: ms,
+		};
+	},
+};
+
+export const noopTransform = {
+	name: "noop",
+	transform(code, id, meta) {},
+};