swc-plugin-component-annotate 1.9.0 → 1.11.0

package/README.md

@@ -1,4 +1,4 @@
-# SWC Plugin: Component Annotate
+# SWC Plugin: Component Annotate [![npm badge](https://img.shields.io/npm/v/swc-plugin-component-annotate)](https://www.npmjs.com/package/swc-plugin-component-annotate)
 
 A SWC plugin that automatically annotates React components with data attributes for component tracking and debugging.
 
@@ -24,8 +24,6 @@ This plugin transforms React components by adding data attributes that help with
 
 ```bash
 npm install --save-dev swc-plugin-component-annotate
-# or
-yarn add -D swc-plugin-component-annotate
 ```
 
 ## Usage
@@ -182,4 +180,4 @@ const MyComponent = () => {
 
 ## Related
 
-- [Sentry Babel Component Annotate Plugin](https://github.com/getsentry/sentry-javascript-bundler-plugins/tree/main/packages/babel-plugin-component-annotate)
+- [Sentry Babel Component Annotate Plugin](https://github.com/getsentry/sentry-javascript-bundler-plugins/tree/main/packages/babel-plugin-component-annotate)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "swc-plugin-component-annotate",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "Use SWC to automatically annotate React components with data attributes for component tracking",
   "author": "scttcper <scttcper@gmail.com>",
   "license": "MIT",
@@ -19,11 +19,22 @@
     "swc_plugin_component_annotate.wasm"
   ],
   "homepage": "https://github.com/scttcper/swc-plugin-component-annotate#readme",
-  "repository": "scttcper/swc-plugin-component-annotate",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/scttcper/swc-plugin-component-annotate.git"
+  },
   "bugs": {
     "url": "https://github.com/scttcper/swc-plugin-component-annotate/issues"
   },
   "devDependencies": {},
   "peerDependencies": {},
-  "packageManager": "pnpm@10.15.0"
+  "packageManager": "pnpm@10.18.3",
+  "release": {
+    "branches": [
+      "main"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/src/config.rs

@@ -25,6 +25,10 @@ pub struct PluginConfig {
     /// Custom source path attribute name (overrides default and native setting)
     #[serde(default, rename = "source-path-attr")]
     pub source_path_attr: Option<String>,
+
+    /// Enable rewriting emotion styled components to inject data attributes
+    #[serde(default, rename = "rewrite-emotion-styled")]
+    pub experimental_rewrite_emotion_styled: bool,
 }
 
 impl PluginConfig {

package/src/lib.rs

@@ -26,6 +26,8 @@ pub struct ReactComponentAnnotateVisitor {
     current_component_name: Option<String>,
     ignored_elements: FxHashSet<&'static str>,
     ignored_components_set: FxHashSet<String>,
+    /// Track the local identifier name for `styled` from @emotion/styled
+    styled_import: Option<String>,
 }
 
 impl ReactComponentAnnotateVisitor {
@@ -44,6 +46,7 @@ impl ReactComponentAnnotateVisitor {
             current_component_name: None,
             ignored_elements: constants::default_ignored_elements(),
             ignored_components_set,
+            styled_import: None,
         }
     }
 
@@ -210,11 +213,162 @@ impl ReactComponentAnnotateVisitor {
             _ => {}
         }
     }
+
+    /// Check if a call expression matches styled(ComponentRef) pattern
+    fn is_styled_call_with_component_ref(&self, call_expr: &CallExpr) -> Option<String> {
+        // Check if we have a tracked styled import
+        let styled_name = self.styled_import.as_ref()?;
+
+        // Check if the callee is the styled identifier
+        let callee_name = match call_expr.callee.as_expr() {
+            Some(expr) => match expr.as_ref() {
+                Expr::Ident(ident) => ident.sym.as_ref(),
+                _ => return None,
+            },
+            _ => return None,
+        };
+
+        if callee_name != styled_name {
+            return None;
+        }
+
+        // Check if the first argument is an identifier (component reference)
+        if let Some(ExprOrSpread { spread: None, expr }) = call_expr.args.first() {
+            if let Expr::Ident(ident) = expr.as_ref() {
+                return Some(ident.sym.to_string());
+            }
+        }
+
+        None
+    }
+
+    /// Transform styled(ComponentRef) to styled(props => <ComponentRef data-element="..." {...props} />)
+    fn transform_styled_call(
+        &self,
+        call_expr: &mut CallExpr,
+        ref_component_name: String,
+        styled_component_name: String,
+    ) {
+        use swc_core::common::{SyntaxContext, DUMMY_SP};
+
+        // Create the props parameter: props
+        let props_param = Pat::Ident(BindingIdent {
+            id: Ident::new("props".into(), DUMMY_SP, SyntaxContext::empty()),
+            type_ann: None,
+        });
+
+        // Build attributes in order: data attributes first, then spread
+        let mut attrs = vec![];
+
+        // Add data-element attribute using the styled component variable name
+        attrs.push(create_jsx_attr(
+            self.config.element_attr_name(),
+            &styled_component_name,
+        ));
+
+        // Add data-source-file attribute
+        if let Some(ref source_file) = self.source_file_name {
+            attrs.push(create_jsx_attr(
+                self.config.source_file_attr_name(),
+                source_file,
+            ));
+        }
+
+        // Add data-source-path attribute (only if explicitly configured)
+        if self.config.source_path_attr.is_some() {
+            if let Some(ref source_path) = self.source_file_path {
+                attrs.push(create_jsx_attr(
+                    self.config.source_path_attr_name(),
+                    source_path,
+                ));
+            }
+        }
+
+        // Add spread attribute AFTER data attributes: {...props}
+        attrs.push(JSXAttrOrSpread::SpreadElement(SpreadElement {
+            dot3_token: DUMMY_SP,
+            expr: Box::new(Expr::Ident(Ident::new(
+                "props".into(),
+                DUMMY_SP,
+                SyntaxContext::empty(),
+            ))),
+        }));
+
+        // Create JSX element: <ComponentRef data-element="..." data-source-file="..." {...props} />
+        let jsx_element = JSXElement {
+            span: DUMMY_SP,
+            opening: JSXOpeningElement {
+                name: JSXElementName::Ident(Ident::new(
+                    ref_component_name.into(),
+                    DUMMY_SP,
+                    SyntaxContext::empty(),
+                )),
+                span: DUMMY_SP,
+                attrs,
+                self_closing: true,
+                type_args: None,
+            },
+            children: vec![],
+            closing: None,
+        };
+
+        // Create arrow function: props => <ComponentRef data-element="..." {...props} />
+        let arrow_func = ArrowExpr {
+            span: DUMMY_SP,
+            ctxt: SyntaxContext::empty(),
+            params: vec![props_param],
+            body: Box::new(BlockStmtOrExpr::Expr(Box::new(Expr::JSXElement(Box::new(
+                jsx_element,
+            ))))),
+            is_async: false,
+            is_generator: false,
+            type_params: None,
+            return_type: None,
+        };
+
+        // Replace the first argument with the arrow function
+        call_expr.args[0] = ExprOrSpread {
+            spread: None,
+            expr: Box::new(Expr::Arrow(arrow_func)),
+        };
+    }
 }
 
 impl VisitMut for ReactComponentAnnotateVisitor {
     noop_visit_mut_type!();
 
+    fn visit_mut_import_decl(&mut self, import_decl: &mut ImportDecl) {
+        // Track imports from @emotion/styled (only if enabled)
+        if self.config.experimental_rewrite_emotion_styled
+            && import_decl.src.value.as_ref() == "@emotion/styled"
+        {
+            for specifier in &import_decl.specifiers {
+                match specifier {
+                    // Default import: import styled from '@emotion/styled'
+                    ImportSpecifier::Default(default_import) => {
+                        self.styled_import = Some(default_import.local.sym.to_string());
+                    }
+                    // Named import: import { styled } from '@emotion/styled'
+                    ImportSpecifier::Named(named_import) => {
+                        // Check if the imported name is 'default' or 'styled'
+                        let imported_name = match &named_import.imported {
+                            Some(ModuleExportName::Ident(ident)) => ident.sym.as_ref(),
+                            None => named_import.local.sym.as_ref(),
+                            _ => continue,
+                        };
+
+                        if imported_name == "default" || imported_name == "styled" {
+                            self.styled_import = Some(named_import.local.sym.to_string());
+                        }
+                    }
+                    _ => {}
+                }
+            }
+        }
+
+        import_decl.visit_mut_children_with(self);
+    }
+
     fn visit_mut_fn_decl(&mut self, func_decl: &mut FnDecl) {
         let component_name = func_decl.ident.sym.to_string();
         self.find_jsx_in_function_body(&mut func_decl.function, component_name);
@@ -228,6 +382,22 @@ impl VisitMut for ReactComponentAnnotateVisitor {
 
             if let Some(init) = &mut var_declarator.init {
                 match init.as_mut() {
+                    Expr::Call(call_expr) => {
+                        // Check if this is a styled(ComponentRef) pattern (only if enabled)
+                        if self.config.experimental_rewrite_emotion_styled {
+                            if let Some(ref_component_name) =
+                                self.is_styled_call_with_component_ref(call_expr)
+                            {
+                                // Transform styled(ComponentRef) to styled(props => <ComponentRef {...props} />)
+                                // Use the styled component variable name (e.g., StyledButton) as data-element
+                                self.transform_styled_call(
+                                    call_expr,
+                                    ref_component_name,
+                                    component_name.clone(),
+                                );
+                            }
+                        }
+                    }
                     Expr::Arrow(arrow_func) => {
                         self.current_component_name = Some(component_name);