feat(pack): add swc plugin example (#2709)

xusd320 · gemini-code-assist[bot] · fireairforce · web-flow · commit 477bf8279c85 · 2026-03-18T19:03:46.000+08:00
Co-authored-by: gemini-code-assist[bot] &lt;176961590+gemini-code-assist[bot]@users.noreply.github.com&gt;
Co-authored-by: zoomdong &lt;1344492820@qq.com&gt;
diff --git a/crates/pack-core/src/config.rs b/crates/pack-core/src/config.rs
@@ -107,6 +107,8 @@ pub struct Config {
     react: Option<ReactConfig>,
     optimization: Option<OptimizationConfig>,
     stats: Option<bool>,
+    #[bincode(with = "turbo_bincode::serde_self_describing")]
+    swc_plugins: Option<Vec<(RcStr, serde_json::Value)>>,
     #[cfg(any(feature = "process_pool", feature = "worker_pool"))]
     plugin_runtime_strategy: Option<PluginRuntimeStrategy>,
     persistent_caching: Option<bool>,
@@ -694,8 +696,6 @@ impl TryFrom<RegexComponents> for EsRegex {
 #[derive(Clone, Debug, Default, Deserialize, OperationValue)]
 #[serde(rename_all = "camelCase")]
 pub struct ExperimentalConfig {
-    #[bincode(with = "turbo_bincode::serde_self_describing")]
-    swc_plugins: Option<Vec<(RcStr, serde_json::Value)>>,
     react_compiler: Option<ReactCompilerOptionsOrBoolean>,
 }
 
@@ -1286,8 +1286,8 @@ impl Config {
     }
 
     #[turbo_tasks::function]
-    pub fn experimental_swc_plugins(&self) -> Vc<SwcPlugins> {
-        Vc::cell(self.experimental.swc_plugins.clone().unwrap_or_default())
+    pub fn swc_plugins(&self) -> Vc<SwcPlugins> {
+        Vc::cell(self.swc_plugins.clone().unwrap_or_default())
     }
 
     #[turbo_tasks::function]
diff --git a/crates/pack-core/src/shared/transforms/swc_ecma_transform_plugins.rs b/crates/pack-core/src/shared/transforms/swc_ecma_transform_plugins.rs
@@ -13,7 +13,7 @@ pub async fn get_swc_ecma_transform_plugin_rule(
     config: Vc<Config>,
     project_path: FileSystemPath,
 ) -> Result<Option<ModuleRule>> {
-    let plugin_configs = config.experimental_swc_plugins().await?;
+    let plugin_configs = config.swc_plugins().await?;
     if !plugin_configs.is_empty() {
         #[cfg(feature = "plugin")]
         {
diff --git a/examples/with-swc-plugin/.gitignore b/examples/with-swc-plugin/.gitignore
@@ -0,0 +1,3 @@
+.turbopack
+node_modules
+dist
diff --git a/examples/with-swc-plugin/README.md b/examples/with-swc-plugin/README.md
@@ -0,0 +1,3 @@
+## with-swc-plugin
+
+An example from utoo, using swc plugin to transform the code.
diff --git a/examples/with-swc-plugin/index.html b/examples/with-swc-plugin/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>with-swc-plugin</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./src/index.jsx"></script>
+  </body>
+</html>
diff --git a/examples/with-swc-plugin/package.json b/examples/with-swc-plugin/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "with-swc-plugin",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "up dev",
+    "build": "up build"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "10.4.10",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "swc-plugin-coverage-instrument": "^0.0.32",
+    "@utoo/pack-cli": "*"
+  }
+}
diff --git a/examples/with-swc-plugin/src/index.jsx b/examples/with-swc-plugin/src/index.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+function App() {
+  return (
+    <div className="text-3xl font-bold underline">
+      Swc Plugin Example by Utoopack.
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);
diff --git a/examples/with-swc-plugin/utoopack.json b/examples/with-swc-plugin/utoopack.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "../../packages/pack/config_schema.json",
+  "entry": [
+    {
+      "name": "index",
+      "import": "./src/index.jsx",
+      "html": {
+        "template": "./index.html"
+      }
+    }
+  ],
+  "output": {
+    "clean": true
+  },
+  "optimization": {
+    "minify": false
+  },
+  "swcPlugins": [
+    [
+      "swc-plugin-coverage-instrument",
+      {}
+    ]
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ pub async fn get_swc_ecma_transform_plugin_rule(`
`13`	`13`	`config: Vc<Config>,`
`14`	`14`	`project_path: FileSystemPath,`
`15`	`15`	`) -> Result<Option<ModuleRule>> {`
`16`		`- let plugin_configs = config.experimental_swc_plugins().await?;`
	`16`	`+ let plugin_configs = config.swc_plugins().await?;`
`17`	`17`	`if !plugin_configs.is_empty() {`
`18`	`18`	`#[cfg(feature = "plugin")]`
`19`	`19`	`{`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.turbopack`
	`2`	`+node_modules`
	`3`	`+dist`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+## with-swc-plugin`
	`2`	`+`
	`3`	`+An example from utoo, using swc plugin to transform the code.`