diff --git a/crates/jsx_parser/src/jsx_precompile.rs b/crates/jsx_parser/src/jsx_precompile.rs index e82e39f9..c76ee2e4 100644 --- a/crates/jsx_parser/src/jsx_precompile.rs +++ b/crates/jsx_parser/src/jsx_precompile.rs @@ -233,10 +233,7 @@ fn transform_component_attributes(attributes: &[JSXAttribute]) -> Result { if attr.name.starts_with("...") { - attr_parts.push(format!( - r#"`${{__jsxSpread({})}}`"#, - attr.name.replace("...", "") - )); + attr_parts.push(format!("{{{}}}", attr.name)); } else { attr_parts.push(format!(r#"`{}`"#, attr.name)); } @@ -754,7 +751,7 @@ mod tests { let result = jsx_precompile(source).unwrap(); assert_eq!( result, - "const el = `${__jsxComponent($Component, [`${__jsxSpread(props)}`], `content`)}`;" + "const el = `${__jsxComponent($Component, [{...props}], `content`)}`;" ); } @@ -791,7 +788,7 @@ mod tests { fn test_nested_components_and_element() { let source = r#"const el =
Inner content
;"#; let result = jsx_precompile(source).unwrap(); - let expected = "const el = `${__jsxComponent(ParentComponent, [{\"attr\":\"val\"},`moto`], `${__jsxComponent(ChildComponent, [`${__jsxSpread(spread)}`], `
Inner content
`)}`)}`;"; + let expected = "const el = `${__jsxComponent(ParentComponent, [{\"attr\":\"val\"},`moto`], `${__jsxComponent(ChildComponent, [{...spread}], `
Inner content
`)}`)}`;"; assert_eq!(result, expected); } @@ -839,6 +836,16 @@ mod tests { ); } + #[test] + fn test_loop_component_spread() { + let source = r#"const el =
{posts.map((post) => )}
;"#; + let result = jsx_precompile(source).unwrap(); + assert_eq!( + result, + "const el = `${__jsxTemplate(`
${posts.map((post) => `${__jsxComponent(Component, [{...post}])}`)}
`)}`;" + ); + } + #[test] fn test_filter_transformation() { let source = r#"const el =
{items.filter(item => item.active).map(item =>
  • {item.name}
  • )}
    ;"#;