-
-
Notifications
You must be signed in to change notification settings - Fork 1k
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.
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
Prettier can break <Trans/> #575
Comments
the only thing i could think of: https://prettier.io/docs/en/ignore.html not sure how we could monkey patch that on our side - how we decide if that {' '} was added intentional or just out of prettier?!? |
Thanks for the quick response! I'm not really sure myself... I am wondering how advisable it might be to just have My understanding is that actually having content in So this change shouldn't actually change anything? Unless I'm missing something :) |
the JSX nodes to interpolate need to have the right index the string parts in between are irrelevant (as long the index in children is right) |
Right -- I was saying because the string parts don't matter, if we detect I believe this case only causes an issue when the |
yes ... just |
In Trans.js#L18 we have this block that checks the incoming nodes. WDYT about adding some logic like "if current node is the empty string, and EITHER the previous/next nodes are plain strings, ignore the node"? Test cases:
Can also maybe add a flag |
I will keep this open here for the case more devs ask for it. But my personal opinion: "Do not monkey patch a package - just because a code style formatter tool breaks it" <-- Feels absolutely wrong. |
That's fair! Thanks for the quick responses 🙏 My perspective is that this affects more than just a code formatter, |
closing this for now...seems not to attract interest of people... |
Perhaps we should mention workaround in the documentation. |
I'm sorry but what's the solution/workaround here? |
You can use Trans like https://react.i18next.com/latest/trans-component#alternative-usage I got no idea how we should detect changes made by prettier breaking translations |
Bumped into the same issue with Here was another example: A one liner with
was turned into the following by
and would break the unit test, causing the entire anchor
Perhaps we need to mention such compatibility issue on the documentation to prevent people from being caught from surprise when using |
Recently I have written a package for eslint(plugin). It adds a /* prettier-ignore*/ for all components |
Those were broken by Prettier: i18next/react-i18next#575
Hi, I'm reporting an undesirable interaction between Prettier and
<Trans/>
. The frustrating part is that I think both are behaving as expected, so I am not sure if this is even possible to fix. Would be interested in advice to best avoid this!<Trans/>
uses tagged strings like'<0>first node</0> second node <2>third node</2>'
to translate content like<b>bold</b> unbolded <i>italicized</i>
.Prettier formats long blocks of text in HTML by inserting
{' '}
, which is a fairly standard way of adding spaces between nodes in React. However, this added space is also treated as a node by<Trans/>
.Thus, the following are not equivalent, even though Prettier may silently format the first into the second:
The sneaky part of this issue is that you can be testing your change, verify that it works, run your formatter (which silently breaks the translation), and push your change.
The text was updated successfully, but these errors were encountered: