Merge pull request #32 from dev-five-git/call-issue

Fix call issue

Author: owjs3901

.changeset/neat-emus-visit.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Fix walk issue, add flex props

libs/extractor/src/extract_style/mod.rs

@@ -21,6 +21,7 @@ pub struct ExtractStaticStyle {
 static MAINTAIN_VALUE_PROPERTIES: Lazy<HashSet<String>> = Lazy::new(|| {
     let mut set = HashSet::<String>::new();
     set.insert("opacity".to_string());
+    set.insert("flex".to_string());
     set.insert("zIndex".to_string());
     set.insert("fontWeight".to_string());
     set.insert("scale".to_string());

libs/extractor/src/lib.rs

@@ -956,7 +956,7 @@ export {
         assert_debug_snapshot!(extract(
             "test.js",
             r#"import {Flex} from '@devup-ui/core'
-        <Flex opacity={1} zIndex={2} fontWeight={900} scale={2} />
+        <Flex opacity={1} zIndex={2} fontWeight={900} scale={2} flex={1} />
         "#,
             ExtractOption {
                 package: "@devup-ui/core".to_string(),
@@ -1116,4 +1116,26 @@ export {
         )
         .unwrap());
     }
+
+    #[test]
+    #[serial]
+    fn test_component_in_func() {
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.js",
+            r#"import {Flex} from '@devup-ui/core'
+PROCESS_DATA.map(({ id, title, content }, idx) => (
+          <MotionDiv key={idx}>
+            <Flex alignItems="center" gap={[3, null, 5, null, 10]}>
+            </Flex>
+          </MotionDiv>
+        ))
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
+    }
 }

libs/extractor/src/snapshots/extractor__tests__component_in_func.snap

@@ -0,0 +1,54 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "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()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                basic: true,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "alignItems",
+                value: "center",
+                level: 0,
+                selector: None,
+                basic: false,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "12px",
+                level: 0,
+                selector: None,
+                basic: false,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "20px",
+                level: 2,
+                selector: None,
+                basic: false,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "gap",
+                value: "40px",
+                level: 4,
+                selector: None,
+                basic: false,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\nPROCESS_DATA.map(({ id, title, content }, idx) => <MotionDiv key={idx}>\n            <div className=\"d0 d1 d2 d3 d4\">\n            </div>\n          </MotionDiv>);\n",
+}

libs/extractor/src/snapshots/extractor__tests__maintain_value.snap

@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={1} zIndex={2} fontWeight={900} scale={2} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+expression: "extract(\"test.js\",\nr#\"import {Flex} from '@devup-ui/core'\n        <Flex opacity={1} zIndex={2} fontWeight={900} scale={2} flex={1} />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
 ---
 ExtractOutput {
     styles: [
@@ -49,6 +49,15 @@ ExtractOutput {
                 basic: false,
             },
         ),
+        Static(
+            ExtractStaticStyle {
+                property: "flex",
+                value: "1",
+                level: 0,
+                selector: None,
+                basic: false,
+            },
+        ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1 d2 d3 d4\" />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className=\"d0 d1 d2 d3 d4 d5\" />;\n",
 }

libs/extractor/src/visit.rs

@@ -171,9 +171,8 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
                     }
                 }
             }
-
-            walk_call_expression(self, it);
         }
+        walk_call_expression(self, it);
     }
     fn visit_tagged_template_expression(&mut self, it: &mut TaggedTemplateExpression<'a>) {
         if let Expression::Identifier(ident) = &it.tag {