feat(ecma-plugins): extract custom emotion transform (vercel/turborepo#4662)

kwonoj · web-flow · commit 2dc9e7c2e3f6 · 2023-04-26T06:42:27.000Z
### Description First step for WEB-940. Context: https://vercel.slack.com/archives/C03EWR7LGEN/p1681789689115509 Currently all of the ecma transforms are explicitly listed under EcmaInputTransform in turbopack-ecmascript. This makes enum verbose, we have to manually expand it each time adding new transform, as well as turbopack-ecmascript gets larger to contain all of the 3rd party transforms by default. PR extracts non-core transforms into a new crate, named as ecmascript-plugins then utilize EcmaInputTransform::Custom to invoke transforms instead. `EcmaInputTransform::Custom` is renamed to `EcmaInputTransform::Plugin` as well. Goal is extracting all of 3rd party / non-core transforms. This also reduces multiple steps to construct option value between caller (next-*) to actual transform (swcOptions). #48671 have corresponding next.js changes.
diff --git a/crates/turbo-binding/Cargo.toml b/crates/turbo-binding/Cargo.toml
@@ -108,6 +108,12 @@ __turbopack_dev_dynamic_embed_contents = [
 ]
 __turbopack_dev_server = ["__turbopack", "turbopack-dev-server"]
 __turbopack_ecmascript = ["__turbopack", "turbopack-ecmascript"]
+# [Note]: currently all of the transform features are enabled by default
+__turbopack_ecmascript_plugin = [
+  "__turbopack",
+  "turbopack-ecmascript-plugins",
+  "turbopack-ecmascript-plugins/transform_emotion",
+]
 __turbopack_env = ["__turbopack", "turbopack-env"]
 __turbopack_image = ["__turbopack", "turbopack-image"]
 __turbopack_image_avif = ["turbopack-image/avif"]
@@ -185,6 +191,7 @@ turbopack-css = { optional = true, workspace = true }
 turbopack-dev = { optional = true, workspace = true }
 turbopack-dev-server = { optional = true, workspace = true }
 turbopack-ecmascript = { optional = true, workspace = true }
+turbopack-ecmascript-plugins = { optional = true, workspace = true }
 turbopack-env = { optional = true, workspace = true }
 turbopack-image = { optional = true, workspace = true }
 turbopack-json = { optional = true, workspace = true }
diff --git a/crates/turbo-binding/src/lib.rs b/crates/turbo-binding/src/lib.rs
@@ -70,6 +70,8 @@ pub mod turbopack {
     pub use turbopack_dev_server as dev_server;
     #[cfg(feature = "__turbopack_ecmascript")]
     pub use turbopack_ecmascript as ecmascript;
+    #[cfg(feature = "__turbopack_ecmascript_plugin")]
+    pub use turbopack_ecmascript_plugins as ecmascript_plugin;
     #[cfg(feature = "__turbopack_env")]
     pub use turbopack_env as env;
     #[cfg(feature = "__turbopack_image")]
diff --git a/crates/turbopack-cli/Cargo.toml b/crates/turbopack-cli/Cargo.toml
@@ -57,6 +57,9 @@ turbopack-cli-utils = { workspace = true }
 turbopack-core = { workspace = true }
 turbopack-dev = { workspace = true }
 turbopack-dev-server = { workspace = true }
+turbopack-ecmascript-plugins = { workspace = true, features = [
+  "transform_emotion",
+] }
 turbopack-env = { workspace = true }
 turbopack-node = { workspace = true }
 webbrowser = { workspace = true }
diff --git a/crates/turbopack-cli/src/dev/web_entry_source.rs b/crates/turbopack-cli/src/dev/web_entry_source.rs
@@ -8,8 +8,8 @@ use turbopack::{
     condition::ContextCondition,
     ecmascript::EcmascriptModuleAssetVc,
     module_options::{
-        EmotionTransformConfigVc, JsxTransformOptions, ModuleOptionsContext,
-        ModuleOptionsContextVc, StyledComponentsTransformConfigVc,
+        JsxTransformOptions, ModuleOptionsContext, ModuleOptionsContextVc,
+        StyledComponentsTransformConfigVc,
     },
     resolve_options_context::{ResolveOptionsContext, ResolveOptionsContextVc},
     transition::TransitionsByNameVc,
@@ -35,6 +35,7 @@ use turbopack_dev_server::{
     html::DevHtmlAssetVc,
     source::{asset_graph::AssetGraphContentSourceVc, ContentSourceVc},
 };
+use turbopack_ecmascript_plugins::transform::emotion::EmotionTransformConfigVc;
 use turbopack_node::execution_context::ExecutionContextVc;
 
 use crate::embed_js::embed_file_path;
diff --git a/crates/turbopack-cli/src/lib.rs b/crates/turbopack-cli/src/lib.rs
@@ -8,5 +8,6 @@ pub(crate) mod embed_js;
 pub fn register() {
     turbopack::register();
     turbopack_dev::register();
+    turbopack_ecmascript_plugins::register();
     include!(concat!(env!("OUT_DIR"), "/register.rs"));
 }
diff --git a/crates/turbopack-ecmascript-plugins/Cargo.toml b/crates/turbopack-ecmascript-plugins/Cargo.toml
@@ -0,0 +1,26 @@
+[package]
+name = "turbopack-ecmascript-plugins"
+version = "0.1.0"
+description = "TBD"
+license = "MPL-2.0"
+edition = "2021"
+autobenches = false
+
+[lib]
+bench = false
+
+[features]
+transform_emotion = []
+
+[dependencies]
+anyhow = { workspace = true }
+serde = { workspace = true }
+
+turbo-tasks = { workspace = true }
+turbopack-ecmascript = { workspace = true }
+
+swc_core = { workspace = true, features = ["ecma_ast", "ecma_visit", "common"] }
+swc_emotion = { workspace = true }
+
+[build-dependencies]
+turbo-tasks-build = { workspace = true }
diff --git a/crates/turbopack-ecmascript-plugins/build.rs b/crates/turbopack-ecmascript-plugins/build.rs
@@ -0,0 +1,5 @@
+use turbo_tasks_build::generate_register;
+
+fn main() {
+    generate_register();
+}
diff --git a/crates/turbopack-ecmascript-plugins/src/lib.rs b/crates/turbopack-ecmascript-plugins/src/lib.rs
@@ -0,0 +1,7 @@
+pub mod transform;
+
+pub fn register() {
+    turbo_tasks::register();
+    turbopack_ecmascript::register();
+    include!(concat!(env!("OUT_DIR"), "/register.rs"));
+}
diff --git a/crates/turbopack-ecmascript-plugins/src/transform/emotion.rs b/crates/turbopack-ecmascript-plugins/src/transform/emotion.rs
@@ -0,0 +1,126 @@
+#![allow(unused)]
+use std::{
+    hash::{Hash, Hasher},
+    path::Path,
+};
+
+use anyhow::Result;
+use serde::{Deserialize, Serialize};
+use swc_core::{
+    common::util::take::Take,
+    ecma::{
+        ast::{Module, Program},
+        visit::FoldWith,
+    },
+};
+use turbo_tasks::trace::TraceRawVcs;
+use turbopack_ecmascript::{CustomTransformer, TransformContext};
+
+#[derive(Clone, PartialEq, Eq, Debug, TraceRawVcs, Serialize, Deserialize)]
+#[serde(rename_all = "kebab-case")]
+pub enum EmotionLabelKind {
+    DevOnly,
+    Always,
+    Never,
+}
+
+#[turbo_tasks::value(transparent)]
+pub struct OptionEmotionTransformConfig(Option<EmotionTransformConfigVc>);
+
+//[TODO]: need to support importmap, there are type mismatch between
+//next.config.js to swc's emotion options
+#[turbo_tasks::value(shared)]
+#[derive(Default, Clone, Debug)]
+#[serde(rename_all = "camelCase")]
+pub struct EmotionTransformConfig {
+    pub sourcemap: Option<bool>,
+    pub label_format: Option<String>,
+    pub auto_label: Option<EmotionLabelKind>,
+}
+
+#[turbo_tasks::value_impl]
+impl EmotionTransformConfigVc {
+    #[turbo_tasks::function]
+    pub fn default() -> Self {
+        Self::cell(Default::default())
+    }
+}
+
+impl Default for EmotionTransformConfigVc {
+    fn default() -> Self {
+        Self::default()
+    }
+}
+
+#[derive(Debug)]
+pub struct EmotionTransformer {
+    #[cfg(feature = "transform_emotion")]
+    config: swc_emotion::EmotionOptions,
+}
+
+#[cfg(feature = "transform_emotion")]
+impl EmotionTransformer {
+    pub fn new(config: &EmotionTransformConfig) -> Option<Self> {
+        let config = swc_emotion::EmotionOptions {
+            // When you create a transformer structure, it is assumed that you are performing an
+            // emotion transform.
+            enabled: Some(true),
+            sourcemap: config.sourcemap,
+            label_format: config.label_format.clone(),
+            auto_label: if let Some(auto_label) = config.auto_label.as_ref() {
+                match auto_label {
+                    EmotionLabelKind::Always => Some(true),
+                    EmotionLabelKind::Never => Some(false),
+                    // [TODO]: this is not correct coerece, need to be fixed
+                    EmotionLabelKind::DevOnly => None,
+                }
+            } else {
+                None
+            },
+            ..Default::default()
+        };
+
+        Some(EmotionTransformer { config })
+    }
+}
+
+#[cfg(not(feature = "transform_emotion"))]
+impl EmotionTransformer {
+    pub fn new(_config: &EmotionTransformConfig) -> Option<Self> {
+        None
+    }
+}
+
+impl CustomTransformer for EmotionTransformer {
+    fn transform(&self, program: &mut Program, ctx: &TransformContext<'_>) -> Option<Program> {
+        #[cfg(feature = "transform_emotion")]
+        {
+            let p = std::mem::replace(program, Program::Module(Module::dummy()));
+            let hash = {
+                #[allow(clippy::disallowed_types)]
+                let mut hasher = std::collections::hash_map::DefaultHasher::new();
+                p.hash(&mut hasher);
+                hasher.finish()
+            };
+            *program = p.fold_with(&mut swc_emotion::emotion(
+                self.config.clone(),
+                Path::new(ctx.file_name_str),
+                hash as u32,
+                ctx.source_map.clone(),
+                ctx.comments.clone(),
+            ));
+        }
+
+        None
+    }
+}
+
+pub async fn build_emotion_transformer(
+    config: &Option<EmotionTransformConfigVc>,
+) -> Result<Option<Box<EmotionTransformer>>> {
+    Ok(if let Some(config) = config {
+        EmotionTransformer::new(&*config.await?).map(Box::new)
+    } else {
+        None
+    })
+}
diff --git a/crates/turbopack-ecmascript-plugins/src/transform/mod.rs b/crates/turbopack-ecmascript-plugins/src/transform/mod.rs
@@ -0,0 +1 @@
+pub mod emotion;
diff --git a/crates/turbopack-ecmascript/src/lib.rs b/crates/turbopack-ecmascript/src/lib.rs
@@ -43,8 +43,8 @@ use swc_core::{
     },
 };
 pub use transform::{
-    CustomTransform, CustomTransformVc, CustomTransformer, EcmascriptInputTransform,
-    EcmascriptInputTransformsVc, TransformContext,
+    CustomTransformer, EcmascriptInputTransform, EcmascriptInputTransformsVc, TransformContext,
+    TransformPlugin, TransformPluginVc,
 };
 use turbo_tasks::{
     primitives::StringVc, trace::TraceRawVcs, RawVc, ReadRef, TryJoinIterExt, Value, ValueToString,
diff --git a/crates/turbopack-ecmascript/src/transform/mod.rs b/crates/turbopack-ecmascript/src/transform/mod.rs
@@ -1,13 +1,7 @@
 mod server_to_client_proxy;
 mod util;
 
-use std::{
-    collections::hash_map::DefaultHasher,
-    fmt::Debug,
-    hash::{Hash, Hasher},
-    path::{Path, PathBuf},
-    sync::Arc,
-};
+use std::{fmt::Debug, hash::Hash, path::PathBuf, sync::Arc};
 
 use anyhow::Result;
 use swc_core::{
@@ -43,13 +37,7 @@ pub enum EcmascriptInputTransform {
     ClientDirective(StringVc),
     ServerDirective(StringVc),
     CommonJs,
-    Custom(CustomTransformVc),
-    Emotion {
-        #[serde(default)]
-        sourcemap: bool,
-        label_format: OptionStringVc,
-        auto_label: Option<bool>,
-    },
+    Plugin(TransformPluginVc),
     PresetEnv(EnvironmentVc),
     React {
         #[serde(default)]
@@ -93,7 +81,7 @@ pub trait CustomTransformer: Debug {
     fn transform(&self, program: &mut Program, ctx: &TransformContext<'_>) -> Option<Program>;
 }
 
-/// A wrapper around a CustomTransformer instance, allowing it to operate with
+/// A wrapper around a TransformPlugin instance, allowing it to operate with
 /// the turbo_task caching requirements.
 #[turbo_tasks::value(
     transparent,
@@ -103,9 +91,9 @@ pub trait CustomTransformer: Debug {
     cell = "new"
 )]
 #[derive(Debug)]
-pub struct CustomTransform(#[turbo_tasks(trace_ignore)] Box<dyn CustomTransformer + Send + Sync>);
+pub struct TransformPlugin(#[turbo_tasks(trace_ignore)] Box<dyn CustomTransformer + Send + Sync>);
 
-impl CustomTransformer for CustomTransform {
+impl CustomTransformer for TransformPlugin {
     fn transform(&self, program: &mut Program, ctx: &TransformContext<'_>) -> Option<Program> {
         self.0.transform(program, ctx)
     }
@@ -211,35 +199,6 @@ impl EcmascriptInputTransform {
                     Some(comments.clone()),
                 ));
             }
-            EcmascriptInputTransform::Emotion {
-                sourcemap,
-                label_format,
-                auto_label,
-            } => {
-                let options = swc_emotion::EmotionOptions {
-                    // this should be always enabled if match arrives here:
-                    // since moduleoptions expect to push emotion transform only if
-                    // there are valid, enabled config values.
-                    enabled: Some(true),
-                    sourcemap: Some(*sourcemap),
-                    label_format: label_format.await?.clone_value(),
-                    auto_label: *auto_label,
-                    ..Default::default()
-                };
-                let p = std::mem::replace(program, Program::Module(Module::dummy()));
-                let hash = {
-                    let mut hasher = DefaultHasher::new();
-                    p.hash(&mut hasher);
-                    hasher.finish()
-                };
-                *program = p.fold_with(&mut swc_emotion::emotion(
-                    options,
-                    Path::new(file_name_str),
-                    hash as u32,
-                    source_map.clone(),
-                    comments.clone(),
-                ))
-            }
             EcmascriptInputTransform::PresetEnv(env) => {
                 let versions = env.runtime_versions().await?;
                 let config = swc_core::ecma::preset_env::Config {
@@ -283,14 +242,14 @@ impl EcmascriptInputTransform {
                 }
 
                 let top_level_import_paths = &*top_level_import_paths.await?;
-                if top_level_import_paths.len() > 0 {
+                if !top_level_import_paths.is_empty() {
                     options.top_level_import_paths = top_level_import_paths
                         .iter()
                         .map(|s| JsWord::from(s.clone()))
                         .collect();
                 }
                 let meaningless_file_names = &*meaningless_file_names.await?;
-                if meaningless_file_names.len() > 0 {
+                if !meaningless_file_names.is_empty() {
                     options.meaningless_file_names = meaningless_file_names.clone();
                 }
 
@@ -361,7 +320,7 @@ impl EcmascriptInputTransform {
                         .emit();
                 }
             }
-            EcmascriptInputTransform::Custom(transform) => {
+            EcmascriptInputTransform::Plugin(transform) => {
                 if let Some(output) = transform.await?.transform(program, ctx) {
                     *program = output;
                 }
diff --git a/crates/turbopack-tests/Cargo.toml b/crates/turbopack-tests/Cargo.toml
@@ -26,6 +26,9 @@ turbo-tasks-fs = { workspace = true }
 turbo-tasks-memory = { workspace = true }
 turbopack-core = { workspace = true, features = ["issue_path"] }
 turbopack-dev = { workspace = true }
+turbopack-ecmascript-plugins = { workspace = true, features = [
+  "transform_emotion",
+] }
 turbopack-env = { workspace = true }
 turbopack-test-utils = { workspace = true }
 
diff --git a/crates/turbopack-tests/tests/snapshot.rs b/crates/turbopack-tests/tests/snapshot.rs
@@ -21,7 +21,7 @@ use turbopack::{
     condition::ContextCondition,
     ecmascript::EcmascriptModuleAssetVc,
     module_options::{
-        EmotionTransformConfig, JsxTransformOptions, JsxTransformOptionsVc, ModuleOptionsContext,
+        JsxTransformOptions, JsxTransformOptionsVc, ModuleOptionsContext,
         StyledComponentsTransformConfigVc,
     },
     resolve_options_context::ResolveOptionsContext,
@@ -43,12 +43,14 @@ use turbopack_core::{
     source_asset::SourceAssetVc,
 };
 use turbopack_dev::DevChunkingContextVc;
+use turbopack_ecmascript_plugins::transform::emotion::EmotionTransformConfig;
 use turbopack_env::ProcessEnvAssetVc;
 use turbopack_test_utils::snapshot::{diff, expected, matches_expected, snapshot_issues};
 
 fn register() {
     turbopack::register();
     turbopack_dev::register();
+    turbopack_ecmascript_plugins::register();
     include!(concat!(env!("OUT_DIR"), "/register_test_snapshot.rs"));
 }
 
diff --git a/crates/turbopack/Cargo.toml b/crates/turbopack/Cargo.toml
diff --git a/crates/turbopack/src/module_options/mod.rs b/crates/turbopack/src/module_options/mod.rs
diff --git a/crates/turbopack/src/module_options/module_options_context.rs b/crates/turbopack/src/module_options/module_options_context.rs

Original file line number	Diff line number	Diff line change
`@@ -8,5 +8,6 @@ pub(crate) mod embed_js;`
`8`	`8`	`pub fn register() {`
`9`	`9`	`turbopack::register();`
`10`	`10`	`turbopack_dev::register();`
	`11`	`+ turbopack_ecmascript_plugins::register();`
`11`	`12`	`include!(concat!(env!("OUT_DIR"), "/register.rs"));`
`12`	`13`	`}`