Support auto insert to props

.changeset/eager-singers-cover.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Feat auto insertion className, style props

libs/extractor/src/prop_modify_utils.rs

@@ -6,8 +6,8 @@
 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 @@
 ) {
     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 @@
                 }
                 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 @@
             ),
         ));
     }
-    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 @@
 ) {
     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 @@
                 }
                 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 @@
             }),
         )));
     }
-    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 @@
     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 @@
     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 @@
         ]
         .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(),
     )
@@ -210,9 +251,14 @@
 
     let mut string_literals: std::vec::Vec<String> = vec![];
     let mut other_expressions = vec![];
+    let mut prev_str = false;
     for ex in expressions {
-        string_literals.push("".to_string());
+        if !prev_str {
+            string_literals.push("".to_string());
+            prev_str = false;
+        }
         if let Expression::StringLiteral(literal) = ex {
+            prev_str = true;
             if !string_literals.is_empty() {
                 string_literals
                     .last_mut()
@@ -273,12 +319,14 @@
                         let trimmed = s.trim();
                         if trimmed.is_empty() {
                             "".to_string()
-                        } else if idx > 0 && idx == string_literals.len() - 1 {
-                            if string_literals.len() == other_expressions.len() {
-                                format!(" {trimmed} ")
+                        } else if idx == string_literals.len() - 1 {
+                            let prefix = if idx == 0 { "" } else { " " };
+                            let suffix = if string_literals.len() == other_expressions.len() {
+                                " "
                             } else {
-                                format!(" {trimmed}")
-                            }
+                                ""
+                            };
+                            format!("{prefix}{trimmed}{suffix}")
                         } else if idx == string_literals.len() - 1 {
                             trimmed.to_string()
                         } else {
@@ -333,6 +381,35 @@
     ))
 }
 
+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__avoid_same_name_component.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\nimport {Button} from '@devup/ui'\n            ;<Box bg=\"red\" background=\"red\" />\n            ;<Button bg=\"red\" background=\"red\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\nimport {Button} from '@devup/ui'\n            ;<Box bg=\"red\" background=\"red\" />\n            ;<Button bg=\"red\" background=\"red\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {

libs/extractor/src/snapshots/extractor__tests__backtick_prop-2.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`${variable}`} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`${variable}`} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {

libs/extractor/src/snapshots/extractor__tests__backtick_prop.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`black`} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg={`black`} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {

libs/extractor/src/snapshots/extractor__tests__component_in_func.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\nPROCESS_DATA.map(({ id, title, content }, idx) => (\n          <MotionDiv key={idx}>\n            <Flex alignItems=\"center\" gap={[3, null, 5, null, 10]}>\n            </Flex>\n          </MotionDiv>\n        ))\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'\nPROCESS_DATA.map(({ id, title, content }, idx) => (\n          <MotionDiv key={idx}>\n            <Flex alignItems=\"center\" gap={[3, null, 5, null, 10]}>\n            </Flex>\n          </MotionDiv>\n        ))\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {

libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {css} from '@devup-ui/core'\n    <div className={css({\n       ...(a ? { bg: 'red', border: \"solid 1px red\" } : { bg: 'blue' }),\n       ...({ p: 1,m: 1 }),\n     })} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {css} from '@devup-ui/core'\n    <div className={css({\n       ...(a ? { bg: 'red', border: \"solid 1px red\" } : { bg: 'blue' }),\n       ...({ p: 1,m: 1 }),\n     })} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {

libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {css} from '@devup-ui/core'\n    <div className={css({\n       ...(a ? { bg: 'red' } : { bg: 'blue' }),\n       ...({ p: 1 }),\n     })} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {css} from '@devup-ui/core'\n    <div className={css({\n       ...(a ? { bg: 'red' } : { bg: 'blue' }),\n       ...({ p: 1 }),\n     })} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {

libs/extractor/src/snapshots/extractor__tests__custom_selector-2.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"*[aria-diabled='true'] &:hover\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"*[aria-diabled='true'] &:hover\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {

libs/extractor/src/snapshots/extractor__tests__custom_selector-3.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"*[aria-diabled='true'] &\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {

libs/extractor/src/snapshots/extractor__tests__custom_selector.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"&[aria-diabled='true']\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n    <Box selectors={{\n    \"&[aria-diabled='true']\": {\n      opacity: 0.5\n      }\n    }} />\n            \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {

libs/extractor/src/snapshots/extractor__tests__duplicate_style_props.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg=\"red\" background=\"red\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box bg=\"red\" background=\"red\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {

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__group_selector_props.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box _groupHover={{ bg: \"red\" }} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n            <Box _groupHover={{ bg: \"red\" }} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {

libs/extractor/src/snapshots/extractor__tests__negative_props-2.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-a} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-a} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {

libs/extractor/src/snapshots/extractor__tests__negative_props-3.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-(1+a)} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-(1+a)} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {

libs/extractor/src/snapshots/extractor__tests__negative_props-4.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-1*a} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-1*a} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {

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

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "ToBTreeSet::from(extract(\"test.js\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-(1)} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box zIndex={-(1)} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
 ---
 ToBTreeSet {
     styles: {