Skip to content

fix: Improve contextual spacing for JSX expression containers when js… #726

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: Improve contextual spacing for JSX expression containers when js… #726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/generation/generate.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3949,16 +3949,16 @@ fn gen_as_jsx_expr_container(expr: Node, inner_items: PrintItems, context: &mut
if surround_with_new_lines {
items.push_signal(Signal::NewLine);
items.push_signal(Signal::StartIndent);
} else if surround_with_space {
items.push_space();
}
items.extend(inner_items);
if surround_with_new_lines {
items.extend(inner_items);
items.extend(gen_trailing_comments_as_statements(&expr.range(), context));
items.push_signal(Signal::NewLine);
items.push_signal(Signal::FinishIndent);
} else if surround_with_space {
items.push_space();
items.push_signal(Signal::SpaceOrNewLine);
items.extend(inner_items);
items.push_condition(if_false("addSpaceIfNotStartOfLine", condition_resolvers::is_start_of_line(), " ".into()));
} else {
items.extend(inner_items);
}
items.push_sc(sc!("}"));

Expand Down
190 changes: 190 additions & 0 deletions ...ecs/jsx/JsxExpressionContainer/JsxExpressionContainer_SpaceSurroundingExpression_True.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,193 @@ const t = <test other={ 4 } />;

[expect]
const t = <test other={ 4 } />;

== should not add extra space before closing brace in nested JSX ==
<OuterComponent
menuTarget={
<InnerComponent
item={ content }
className={ styles.someClass }
/>
}
/>;

[expect]
<OuterComponent
menuTarget={
<InnerComponent
item={ content }
className={ styles.someClass }
/>
}
/>;

== should not add extra space in similar nested JSX pattern ==
<OuterComponent
prop={
<InnerComponent
attr={ value }
className={ styles.someClass }
/>
}
otherProp="value"
/>;

[expect]
<OuterComponent
prop={
<InnerComponent
attr={ value }
className={ styles.someClass }
/>
}
otherProp="value"
/>;

== should handle deeply nested JSX without extra spaces ==
<OuterComponent
complexProp={
<MiddleComponent
nestedProp={
<InnerComponent
innerAttr={ someValue }
/>
}
/>
}
/>;

[expect]
<OuterComponent
complexProp={
<MiddleComponent
nestedProp={
<InnerComponent
innerAttr={ someValue }
/>
}
/>
}
/>;

== expression braces on the same line as a component ==
<Component>{contents}</Component>;

[expect]
<Component>{ contents }</Component>;

== expression braces on the same line ==
return (<Component>
{contents}</Component>);

[expect]
return (
<Component>
{ contents }
</Component>
);

== expression braces across multiple lines ==
return <Component>{<div><div /></div>}</Component>;

[expect]
return (
<Component>
{
<div>
<div />
</div>
}
</Component>
);

== open braces followed by open braces ==
return (
<Component style={{
color: "blue",
}} />
);

[expect]
return (
<Component
style={ {
color: "blue",
} }
/>
);

== open braces with compound expressions ==
<>
{groups.length === 0 && (
<div className={ styles.Group }>
<p>text</p>
</div>
)}
</>;

[expect]
<>
{ groups.length === 0 && (
<div className={ styles.Group }>
<p>text</p>
</div>
) }
</>;

== open braces with arrow function ==
<>
{data.map((data, index) => (
<div key={ index } className={ styles.item }>
<strong>{ data.label }:</strong> { data.text }
</div>
))}
</>;

[expect]
<>
{ data.map((data, index) => (
<div key={ index } className={ styles.item }>
<strong>{ data.label }:</strong> { data.text }
</div>
)) }
</>;

== more varied formatting ==
<OuterComponent
inner={
<InnerComponent item={content }
className={styles.someClass}
foo={a }
bar={ b}
/>
}
/>

[expect]
<OuterComponent
inner={ <InnerComponent item={ content } className={ styles.someClass } foo={ a } bar={ b } /> }
/>;

== more varied formatting across lines ==
<OuterComponent
inner={
<InnerComponent item={content }
className={styles.someClass}
foo={areallylongidentifier}
bar={ anotherreallylongidentifier}
/>
}
/>

[expect]
<OuterComponent
inner={
<InnerComponent
item={ content }
className={ styles.someClass }
foo={ areallylongidentifier }
bar={ anotherreallylongidentifier }
/>
}
/>;