Feat auto props

Author: owjs3901

libs/extractor/src/lib.rs

@@ -1902,6 +1902,25 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
         ));
     }
 
+    #[test]
+    #[serial]
+    fn support_transpile_cjs22() {
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.js",
+                r#"import { jsx as e } from "react/jsx-runtime";
+    import { Box as o } from "@devup-ui/core";
+    e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
+    "#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                }
+            )
+            .unwrap()
+        ));
+    }
     #[test]
     #[serial]
     fn support_transpile_cjs() {

libs/extractor/src/prop_modify_utils.rs

@@ -6,8 +6,8 @@ use oxc_ast::AstBuilder;
 use oxc_ast::ast::JSXAttributeItem::Attribute;
 use oxc_ast::ast::JSXAttributeName::Identifier;
 use oxc_ast::ast::{
-    Expression, JSXAttributeItem, JSXAttributeValue, JSXExpression, ObjectPropertyKind,
-    PropertyKey, PropertyKind, TemplateElementValue,
+    Expression, JSXAttributeItem, JSXAttributeValue, JSXExpression, LogicalOperator,
+    ObjectPropertyKind, PropertyKey, PropertyKind, TemplateElementValue,
 };
 use oxc_span::SPAN;
 
@@ -21,6 +21,7 @@ pub fn modify_prop_object<'a>(
 ) {
     let mut class_name_prop = None;
     let mut style_prop = None;
+    let mut spread_props = vec![];
     for idx in (0..props.len()).rev() {
         let prop = props.remove(idx);
         match prop {
@@ -40,14 +41,20 @@ pub fn modify_prop_object<'a>(
                 }
                 props.insert(idx, ObjectPropertyKind::ObjectProperty(attr));
             }
-            _ => {
-                props.insert(idx, prop);
+            ObjectPropertyKind::SpreadProperty(spread) => {
+                spread_props.push(spread.argument.clone_in(ast_builder.allocator));
+                props.insert(idx, ObjectPropertyKind::SpreadProperty(spread));
             }
         }
     }
 
-    if let Some(ex) = get_class_name_expression(ast_builder, &class_name_prop, styles, style_order)
-    {
+    if let Some(ex) = get_class_name_expression(
+        ast_builder,
+        &class_name_prop,
+        styles,
+        style_order,
+        &spread_props,
+    ) {
         props.push(ObjectPropertyKind::ObjectProperty(
             ast_builder.alloc_object_property(
                 SPAN,
@@ -60,7 +67,9 @@ pub fn modify_prop_object<'a>(
             ),
         ));
     }
-    if let Some(ex) = get_style_expression(ast_builder, &style_prop, styles, &style_vars) {
+    if let Some(ex) =
+        get_style_expression(ast_builder, &style_prop, styles, &style_vars, &spread_props)
+    {
         props.push(ObjectPropertyKind::ObjectProperty(
             ast_builder.alloc_object_property(
                 SPAN,
@@ -84,6 +93,7 @@ pub fn modify_props<'a>(
 ) {
     let mut class_name_prop = None;
     let mut style_prop = None;
+    let mut spread_props = vec![];
     for idx in (0..props.len()).rev() {
         let prop = props.remove(idx);
         match prop {
@@ -125,13 +135,19 @@ pub fn modify_props<'a>(
                 }
                 props.insert(idx, Attribute(attr));
             }
-            _ => {
-                props.insert(idx, prop);
+            JSXAttributeItem::SpreadAttribute(spread) => {
+                spread_props.push(spread.argument.clone_in(ast_builder.allocator));
+                props.insert(idx, JSXAttributeItem::SpreadAttribute(spread));
             }
         }
     }
-    if let Some(ex) = get_class_name_expression(ast_builder, &class_name_prop, styles, style_order)
-    {
+    if let Some(ex) = get_class_name_expression(
+        ast_builder,
+        &class_name_prop,
+        styles,
+        style_order,
+        &spread_props,
+    ) {
         props.push(Attribute(ast_builder.alloc_jsx_attribute(
             SPAN,
             Identifier(ast_builder.alloc_jsx_identifier(SPAN, "className")),
@@ -144,7 +160,9 @@ pub fn modify_props<'a>(
             }),
         )));
     }
-    if let Some(ex) = get_style_expression(ast_builder, &style_prop, styles, &style_vars) {
+    if let Some(ex) =
+        get_style_expression(ast_builder, &style_prop, styles, &style_vars, &spread_props)
+    {
         props.push(Attribute(ast_builder.alloc_jsx_attribute(
             SPAN,
             Identifier(ast_builder.alloc_jsx_identifier(SPAN, "style")),
@@ -160,16 +178,30 @@ pub fn get_class_name_expression<'a>(
     class_name_prop: &Option<Expression<'a>>,
     styles: &mut [ExtractStyleProp<'a>],
     style_order: Option<u8>,
+    spread_props: &[Expression<'a>],
 ) -> Option<Expression<'a>> {
     // should modify class name prop
     merge_string_expressions(
         ast_builder,
         [
-            class_name_prop.clone_in(ast_builder.allocator),
+            class_name_prop
+                .as_ref()
+                .map(|class_name| convert_class_name(ast_builder, class_name)),
             gen_class_names(ast_builder, styles, style_order),
         ]
         .into_iter()
         .flatten()
+        .chain(spread_props.iter().map(|ex| {
+            convert_class_name(
+                ast_builder,
+                &Expression::StaticMemberExpression(ast_builder.alloc_static_member_expression(
+                    SPAN,
+                    ex.clone_in(ast_builder.allocator),
+                    ast_builder.identifier_name(SPAN, ast_builder.atom("className")),
+                    true,
+                )),
+            )
+        }))
         .collect::<Vec<_>>()
         .as_slice(),
     )
@@ -180,6 +212,7 @@ pub fn get_style_expression<'a>(
     style_prop: &Option<Expression<'a>>,
     styles: &[ExtractStyleProp<'a>],
     style_vars: &Option<Expression<'a>>,
+    spread_props: &[Expression<'a>],
 ) -> Option<Expression<'a>> {
     merge_object_expressions(
         ast_builder,
@@ -192,6 +225,14 @@ pub fn get_style_expression<'a>(
         ]
         .into_iter()
         .flatten()
+        .chain(spread_props.iter().map(|ex| {
+            Expression::StaticMemberExpression(ast_builder.alloc_static_member_expression(
+                SPAN,
+                ex.clone_in(ast_builder.allocator),
+                ast_builder.identifier_name(SPAN, ast_builder.atom("style")),
+                true,
+            ))
+        }))
         .collect::<Vec<_>>()
         .as_slice(),
     )
@@ -333,6 +374,35 @@ fn merge_object_expressions<'a>(
     ))
 }
 
+pub fn convert_class_name<'a>(
+    ast_builder: &AstBuilder<'a>,
+    class_name: &Expression<'a>,
+) -> Expression<'a> {
+    if matches!(
+        class_name,
+        Expression::StringLiteral(_)
+            | Expression::TemplateLiteral(_)
+            | Expression::NumericLiteral(_)
+    ) {
+        return class_name.clone_in(ast_builder.allocator);
+    }
+
+    // wrap ( and ?? ''
+    Expression::LogicalExpression(
+        ast_builder.alloc_logical_expression(
+            SPAN,
+            Expression::ParenthesizedExpression(
+                ast_builder.alloc_parenthesized_expression(
+                    SPAN,
+                    class_name.clone_in(ast_builder.allocator),
+                ),
+            ),
+            LogicalOperator::Coalesce,
+            Expression::StringLiteral(ast_builder.alloc_string_literal(SPAN, "", None)),
+        ),
+    )
+}
+
 pub fn convert_style_vars<'a>(
     ast_builder: &AstBuilder<'a>,
     style_vars: &Expression<'a>,

libs/extractor/src/snapshots/extractor__tests__extract_class_name_from_component.snap

@@ -45,5 +45,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${\"a\" + \"b\"} d0 d1 d2 d3`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${\"a\" + \"b\" ?? \"\"} d0 d1 d2 d3`} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-5.snap

@@ -23,5 +23,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${\"a\" + \"b\"} d0 d1`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${\"a\" + \"b\" ?? \"\"} d0 d1`} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-6.snap

@@ -23,5 +23,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<img src=\"/next.svg\" alt=\"Next.js logo\" className={`${styles.logo} d0 d1`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<img src=\"/next.svg\" alt=\"Next.js logo\" className={`${styles.logo ?? \"\"} d0 d1`} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-7.snap

@@ -23,5 +23,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${variable} d0 d1`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${variable ?? \"\"} d0 d1`} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-8.snap

@@ -40,5 +40,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${variable} d0 ${true ? \"d1\" : \"d2\"}`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`${variable ?? \"\"} d0 ${true ? \"d1\" : \"d2\"}`} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__rest_props.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={0.5} {...props} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={0.5} {...props} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div {...props} className=\"d0 d1\" />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div {...props} className={`d0 d1 ${props?.className ?? \"\"}`} style={props?.style} />;\n",
 }