How I indirectly helped remove stray characters from across the web
One day at work I noticed a stray } at the bottom of a page of our product. I went searching for it, and found the culprit: during a refactor a } which had previously been used to enclose an expression within some JSX had been left behind. It occurred to me that this was likely a common error and something that could be linted for. I slapped together a quick rule that reported certain syntax characters that tend to get left behind (like ), ;, >, } or })) as a lint error.
I ran the rule on the code base and to my surprise there were a few hundred examples of stray characters in our UI. A few weeks later a similar bug cropped up in a separate codebase at work where I had not enabled the rule. My colleague Brad Zacher remembered my lint rule and suggested it get added there as well. However, at that point an engineer on the Flow team suggested maybe Flow could just make some of these characters a syntax error. They did and uncovered and fixed a few hundred more errors.
This inspired Brad and he decided to go on a mission to fix this not just at Meta, but in the whole ecosystem by opening pull requests on all the popular parsers. In all, some version of this fix has been added to:
Brad himself shared this anecdote in his words as part of the TypeScript GitHub issue:
Backstory for how this got implemented in flow:
A dangling `}` was missed in code review, was shipped to production, and had a bug reported for it.
Annoyed, the engineer quietly wrote a very simple lint rule to catch this (it just checked for `}` at the start/end of a JSXText node). They shipped it, and manually fixed up a few hundred cases across the facebook codebase.
A few weeks later someone just happened to ask if there was a lint rule they could use for the react native codebase. I mentioned that the lint rule could be synced across, and an engineer on the flow team chimed in saying that they should probably just make it a flow parser error because it's technically invalid JSX.
Fast forward another few weeks and the change was released in flow, and the flow engineer manually fixed up the remaining few hundred errors.
> Is there a good reason we want all these implementations to break people?
This is a net benefit for everyone - it's very rare that a dangling `}` or `>` is intentional from what I've seen.
You can't include `<` or `{` in JSX text anyways, so this just bring parity in for `>` and `}`.
I’m so grateful for Brad’s initiative here which I am confident fixed many issues across the React ecosystem, sparing us as users from encountering these stray syntax characters in the products we use every day, and us as React developers from shipping these embarrassing bugs.