grommet / grommet/jsx-to-string

Option to put props on single line

Open
#40 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
122
Forks
26
PR merge metrics
No merged PRs in 30d

Description

Hi, cool library. It turned out to be exactly what I was looking for today.
Anyway, I noticed that the JSX string adds line breaks between props when the component has children. This leads to somewhat awkward looking strings.

For example,
```javascript
jsxToString(Another thing, {
shortBooleanSyntax: true
});
/*
Outputs:

Another thing

*/
```

My proposal is to add an option to put props on one line. For example,
```javascript
jsxToString(Another thing, {
shortBooleanSyntax: true,
singleLineProps: true
});
/*
Outputs:

Another thing

*/
```

It looks like a pretty simple fix, so I may just go ahead and submit a PR.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start at the jsxToString entry point and trace how formatting options affect props when the component has children. Add the proposed singleLineProps option, then verify that the example produces one prop line while preserving the child indentation and closing tag output.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.