Skip to content

fix: TS to JS conversion - Ability to spread props within components & allow for empty tags (fragments) #2816

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

Merged
evwilkin merged 3 commits into from
Jan 21, 2022
Merged

fix: TS to JS conversion - Ability to spread props within components & allow for empty tags (fragments) #2816

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8da725b
fix: TS to JS conversion - Ability to spread props within components …
Jan 19, 2022
914d05f
moving paren usage
Jan 20, 2022
a8f6f50
address more feedback
Jan 21, 2022
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
23 changes: 16 additions & 7 deletions packages/ast-helpers/stringify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,18 +212,18 @@ const es2017GeneratorJSX = {
},
// {...props}
JSXSpreadAttribute(node, state) {
state.write('...(');
state.write(' {...');
if (node.argument.type === 'LogicalExpression') {
state.write('(');
Copy link
Contributor

@DaoDaoNoCode DaoDaoNoCode Jan 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for not explaining clearly. The state.write('('); should be above this[node.argument.left.type](node.argument.left, state); and the state.write(')'); should be below this[node.argument.right.type](node.argument.right, state);, so it will wrap the whole expression in this way. And we should better keep these 2 state.write(' '); here because we still need the space between the props and the logical operator. So the whole if statement should be like:

if (node.argument.type === 'LogicalExpression') {
  state.write('(');
  this[node.argument.left.type](node.argument.left, state);
  state.write(' ');
  state.write(node.argument.operator);
  state.write(' ');
  this[node.argument.right.type](node.argument.right, state);
  state.write(')');
}

Or you can even combine the center 3 state.write together to be like:

if (node.argument.type === 'LogicalExpression') {
  state.write('(');
  this[node.argument.left.type](node.argument.left, state);
  state.write(` ${node.argument.operator} `);    // or state.write(' ' + node.argument.operator + ' '); 
  this[node.argument.right.type](node.argument.right, state);
  state.write(')');
}

The situation in this if statement is not very commonly seen, many generators don't even consider it, but it's great to keep it here. Hope this makes sense 🙂

this[node.argument.left.type](node.argument.left, state);
state.write(' ');
state.write(node.argument.operator);
state.write(' ');
state.write(` ${node.argument.operator} `);
this[node.argument.right.type](node.argument.right, state);
state.write(')');
}
else {
this[node.argument.type](node.argument, state);
}
state.write(')');
state.write('}');
},
// <></>
JSXFragment(node, state) {
Expand All @@ -232,8 +232,17 @@ const es2017GeneratorJSX = {
attributes: [],
name: {
type: 'JSXIdentifier',
name: 'React.Fragment'
Copy link
Collaborator

@nicolethoen nicolethoen Jan 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this still parse React.Fragment correctly?

Copy link
Contributor Author

@jpuzz0 jpuzz0 Jan 19, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did try both, and both are still working. There is an additional block for using JSXFragments where React.Fragment is handled already;

patternfly-org/packages/ast-helpers/stringify.js

Line 129 in 8da725b

JSXFragment(node, state) {

}
name: ''
},
type: 'JSXOpeningElement'
},
closingElement: {
attributes: [],
name: {
type: 'JSXIdentifier',
name: ''
},
type: 'JSXClosingElement'
},
children: node.children
}, state);
Expand Down