Skip to content

Commit e95d559

Browse files
owjs3901owjs3901
authored
Merge pull request #53 from dev-five-git/fix-destructing
Fix destructing
2 parents ac0109d + 00b14ca commit e95d559

19 files changed

+747
-204
lines changed

‎.changeset/itchy-dolphins-talk.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@devup-ui/react": patch
3+
---
4+
5+
Support optional args in css

‎.changeset/soft-islands-compete.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@devup-ui/wasm": patch
3+
---
4+
5+
Support destructing, Support to direct selection of object with theme, Support for template literal on as prop

‎libs/extractor/src/lib.rs‎

Lines changed: 173 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,92 @@ mod tests {
181181
)
182182
.unwrap());
183183
}
184+
185+
#[test]
186+
#[serial]
187+
fn convert_tag() {
188+
reset_class_map();
189+
assert_debug_snapshot!(extract(
190+
"test.tsx",
191+
r#"import {Box} from '@devup-ui/core'
192+
<Box as="secton" />
193+
"#,
194+
ExtractOption {
195+
package: "@devup-ui/core".to_string(),
196+
css_file: None
197+
}
198+
)
199+
.unwrap());
200+
201+
reset_class_map();
202+
assert_debug_snapshot!(extract(
203+
"test.tsx",
204+
r#"import {Box} from '@devup-ui/core'
205+
<Box as={"secton"} />
206+
"#,
207+
ExtractOption {
208+
package: "@devup-ui/core".to_string(),
209+
css_file: None
210+
}
211+
)
212+
.unwrap());
213+
assert_debug_snapshot!(extract(
214+
"test.tsx",
215+
r#"import {Box} from '@devup-ui/core'
216+
<Box as={`secton`} />
217+
"#,
218+
ExtractOption {
219+
package: "@devup-ui/core".to_string(),
220+
css_file: None
221+
}
222+
)
223+
.unwrap());
224+
// assert_debug_snapshot!(extract(
225+
// "test.tsx",
226+
// r#"import {Box} from '@devup-ui/core'
227+
// <Box as={b ? "div":"secton"} />
228+
// "#,
229+
// ExtractOption {
230+
// package: "@devup-ui/core".to_string(),
231+
// css_file: None
232+
// }
233+
// )
234+
// .unwrap());
235+
// assert_debug_snapshot!(extract(
236+
// "test.tsx",
237+
// r#"import {Box} from '@devup-ui/core'
238+
// <Box as={b ? undefined:"secton"} />
239+
// "#,
240+
// ExtractOption {
241+
// package: "@devup-ui/core".to_string(),
242+
// css_file: None
243+
// }
244+
// )
245+
// .unwrap());
246+
//
247+
// assert_debug_snapshot!(extract(
248+
// "test.tsx",
249+
// r#"import {Box} from '@devup-ui/core'
250+
// <Box as={b ? null:"secton"} />
251+
// "#,
252+
// ExtractOption {
253+
// package: "@devup-ui/core".to_string(),
254+
// css_file: None
255+
// }
256+
// )
257+
// .unwrap());
258+
// assert_debug_snapshot!(extract(
259+
// "test.tsx",
260+
// r#"import {Box} from '@devup-ui/core'
261+
// <Box as={b ? null:undefined} />
262+
// "#,
263+
// ExtractOption {
264+
// package: "@devup-ui/core".to_string(),
265+
// css_file: None
266+
// }
267+
// )
268+
// .unwrap());
269+
}
184270
#[test]
185271
#[serial]
186272
fn extract_style_props() {
@@ -837,6 +923,19 @@ mod tests {
837923
}
838924
)
839925
.unwrap());
926+
927+
reset_class_map();
928+
assert_debug_snapshot!(extract(
929+
"test.tsx",
930+
r#"import { css } from "@devup-ui/core";
931+
<div className={css(a?{bg:"red"}:{bg:"blue"})}/>;
932+
"#,
933+
ExtractOption {
934+
package: "@devup-ui/core".to_string(),
935+
css_file: None
936+
}
937+
)
938+
.unwrap());
840939
}
841940

842941
#[test]
@@ -854,6 +953,32 @@ mod tests {
854953
}
855954
)
856955
.unwrap());
956+
957+
reset_class_map();
958+
assert_debug_snapshot!(extract(
959+
"test.tsx",
960+
r#"import {Box} from '@devup-ui/core'
961+
<Box color={`$nice`} />
962+
"#,
963+
ExtractOption {
964+
package: "@devup-ui/core".to_string(),
965+
css_file: None
966+
}
967+
)
968+
.unwrap());
969+
970+
reset_class_map();
971+
assert_debug_snapshot!(extract(
972+
"test.tsx",
973+
r#"import {Box} from '@devup-ui/core'
974+
<Box color={("$nice")} />
975+
"#,
976+
ExtractOption {
977+
package: "@devup-ui/core".to_string(),
978+
css_file: None
979+
}
980+
)
981+
.unwrap());
857982
}
858983

859984
#[test]
@@ -1260,6 +1385,33 @@ export {
12601385
}
12611386
)
12621387
.unwrap());
1388+
1389+
reset_class_map();
1390+
assert_debug_snapshot!(extract(
1391+
"test.js",
1392+
r#"import {Center} from '@devup-ui/core'
1393+
<Center bg={SOME_VAR[idx]}>
1394+
</Center>
1395+
"#,
1396+
ExtractOption {
1397+
package: "@devup-ui/core".to_string(),
1398+
css_file: None
1399+
}
1400+
)
1401+
.unwrap());
1402+
1403+
reset_class_map();
1404+
assert_debug_snapshot!(extract(
1405+
"test.js",
1406+
r#"import {Flex} from '@devup-ui/core'
1407+
<Flex bg={{a:"$red", b:"$blue"}[idx]} />
1408+
"#,
1409+
ExtractOption {
1410+
package: "@devup-ui/core".to_string(),
1411+
css_file: None
1412+
}
1413+
)
1414+
.unwrap());
12631415
}
12641416

12651417
#[test]
@@ -1347,7 +1499,7 @@ PROCESS_DATA.map(({ id, title, content }, idx) => (
13471499
)
13481500
.unwrap());
13491501
}
1350-
1502+
13511503
#[test]
13521504
#[serial]
13531505
fn avoid_same_name_component() {
@@ -1366,4 +1518,24 @@ import {Button} from '@devup/ui'
13661518
)
13671519
.unwrap());
13681520
}
1521+
1522+
#[test]
1523+
#[serial]
1524+
fn css_props_destructuring_assignment() {
1525+
reset_class_map();
1526+
assert_debug_snapshot!(extract(
1527+
"test.js",
1528+
r#"import {css} from '@devup-ui/core'
1529+
<div className={css({
1530+
...(a ? { bg: 'red' } : { bg: 'blue' }),
1531+
...({ p: 1 }),
1532+
})} />
1533+
"#,
1534+
ExtractOption {
1535+
package: "@devup-ui/core".to_string(),
1536+
css_file: None
1537+
}
1538+
)
1539+
.unwrap());
1540+
}
13691541
}

‎libs/extractor/src/prop_modify_utils.rs‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ use oxc_span::SPAN;
1414
pub fn modify_prop_object<'a>(
1515
ast_builder: &AstBuilder<'a>,
1616
props: &mut oxc_allocator::Vec<ObjectPropertyKind<'a>>,
17-
styles: Vec<ExtractStyleProp<'a>>,
17+
styles: &[ExtractStyleProp<'a>],
1818
) {
1919
let mut class_name_prop = None;
2020
let mut style_prop = None;
@@ -38,7 +38,7 @@ pub fn modify_prop_object<'a>(
3838
}
3939

4040
// should modify class name prop
41-
if let Some(ex) = gen_class_names(ast_builder, &styles) {
41+
if let Some(ex) = gen_class_names(ast_builder, styles) {
4242
if let Some(pr) = if let Some(class_name_prop) = class_name_prop {
4343
merge_expression_for_class_name(
4444
ast_builder,
@@ -76,7 +76,7 @@ pub fn modify_prop_object<'a>(
7676
}
7777

7878
// should modify style prop
79-
if let Some(mut ex) = gen_styles(ast_builder, &styles) {
79+
if let Some(mut ex) = gen_styles(ast_builder, styles) {
8080
props.push(if let Some(style_prop) = style_prop {
8181
ObjectPropertyKind::ObjectProperty(ast_builder.alloc_object_property(
8282
SPAN,
@@ -117,7 +117,7 @@ pub fn modify_prop_object<'a>(
117117
pub fn modify_props<'a>(
118118
ast_builder: &AstBuilder<'a>,
119119
props: &mut oxc_allocator::Vec<JSXAttributeItem<'a>>,
120-
styles: Vec<ExtractStyleProp<'a>>,
120+
styles: &[ExtractStyleProp<'a>],
121121
) {
122122
let mut class_name_prop = None;
123123
let mut style_prop = None;
@@ -141,7 +141,7 @@ pub fn modify_props<'a>(
141141
}
142142

143143
// should modify class name prop
144-
if let Some(ex) = gen_class_names(ast_builder, &styles) {
144+
if let Some(ex) = gen_class_names(ast_builder, styles) {
145145
let mut attr = if let Some(class_name_prop) = class_name_prop {
146146
class_name_prop
147147
} else {
@@ -160,7 +160,7 @@ pub fn modify_props<'a>(
160160
}
161161

162162
// should modify style prop
163-
if let Some(ex) = gen_styles(ast_builder, &styles) {
163+
if let Some(ex) = gen_styles(ast_builder, styles) {
164164
let mut attr = if let Some(style_prop) = style_prop {
165165
style_prop
166166
} else {

‎libs/extractor/src/snapshots/extractor__tests__convert_tag-2.snap‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box as={\"secton\"} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
4+
---
5+
ExtractOutput {
6+
styles: [],
7+
code: "<secton />;\n",
8+
}

‎libs/extractor/src/snapshots/extractor__tests__convert_tag-3.snap‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box as={`secton`} />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
4+
---
5+
ExtractOutput {
6+
styles: [],
7+
code: "<secton />;\n",
8+
}

‎libs/extractor/src/snapshots/extractor__tests__convert_tag.snap‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n <Box as=\"secton\" />\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
4+
---
5+
ExtractOutput {
6+
styles: [],
7+
code: "<secton />;\n",
8+
}

‎libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "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()"
4+
---
5+
ExtractOutput {
6+
styles: [
7+
Static(
8+
ExtractStaticStyle {
9+
property: "padding",
10+
value: "4px",
11+
level: 0,
12+
selector: None,
13+
basic: false,
14+
},
15+
),
16+
Static(
17+
ExtractStaticStyle {
18+
property: "background",
19+
value: "red",
20+
level: 0,
21+
selector: None,
22+
basic: false,
23+
},
24+
),
25+
Static(
26+
ExtractStaticStyle {
27+
property: "background",
28+
value: "blue",
29+
level: 0,
30+
selector: None,
31+
basic: false,
32+
},
33+
),
34+
],
35+
code: "import \"@devup-ui/core/devup-ui.css\";\nimport { css } from \"@devup-ui/core\";\n<div className={css(`d2 ${a ? \"d0\" : \"d1\"}`)} />;\n",
36+
}

‎libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ ExtractOutput {
66
styles: [
77
Static(
88
ExtractStaticStyle {
9-
property: "color",
10-
value: "blue",
9+
property: "background",
10+
value: "red",
1111
level: 0,
1212
selector: Some(
1313
Postfix(
@@ -19,8 +19,8 @@ ExtractOutput {
1919
),
2020
Static(
2121
ExtractStaticStyle {
22-
property: "background",
23-
value: "red",
22+
property: "color",
23+
value: "blue",
2424
level: 0,
2525
selector: Some(
2626
Postfix(

‎libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
source: libs/extractor/src/lib.rs
3+
expression: "extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n <div className={css(a?{bg:\"red\"}:{bg:\"blue\"})}/>;\n \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
4+
---
5+
ExtractOutput {
6+
styles: [
7+
Static(
8+
ExtractStaticStyle {
9+
property: "background",
10+
value: "red",
11+
level: 0,
12+
selector: None,
13+
basic: false,
14+
},
15+
),
16+
Static(
17+
ExtractStaticStyle {
18+
property: "background",
19+
value: "blue",
20+
level: 0,
21+
selector: None,
22+
basic: false,
23+
},
24+
),
25+
],
26+
code: "import \"@devup-ui/core/devup-ui.css\";\nimport { css } from \"@devup-ui/core\";\n<div className={css(a ? \"d0\" : \"d1\")} />;\n",
27+
}

0 commit comments

Comments
 (0)