TL;DR:

• Many websites are (unintentionally) shipping ES6+ code in production. This indicates that transpiling to ES5 is outdated practice.
• We need a better baseline for transpilation, which should be a moving target.
• We should transpile code in node_modules, at least for production.

Do you prefer your modal component (<dialog>, <Modal>, etc.) to be controlled or uncontrolled?

Uncontrolled: When I use the HTML native <dialog>, I need to access methods on HTMLDialogElement using a ref. This feels uncomfortable and not idiomatic React.

Controlled: I prefer using a boolean prop to control the open/closed state of the dialog. However, then I need to handle some features like Close on ESC key, which may otherwise cause the open/closed state to desync from the actual dialog state. I also have to be careful about using other HTML features that may close the dialog, e.g. <button formmethod="dialog">

altogether and instead use "legacy" modals built with carefully styled <div>s. But then I give up on many of the nice features of <dialog>, such as tab focus containment and accessibility.

What is your preferred way of using modals? Controlled vs uncontrolled? <dialog> vs <div>s?

Edit: Lemmy dislikes angle brackets inside `` :(

The Rome project appears to be dead. Several of its maintainers have stepped up to create a fork named Biome.

See also: tweet by Jonny Burger