sort-package-json v2 pure ESMThe npm package sort-package-json migrated to ES Modules in their v2 release and indirectly broke their named exports which our packages have been consuming. It was a major semver bump, but breaking changes slipped from their changelog and readme radar, so I wanted to explain what actually happened there.
This weekend I was tinkering with string-strip-html GUI; I wanted to sync the state with URL params so that users could bookmark the page and visit later and automatically get those settings restored.
Here’s an MVP based on a forked Remix.js starter template on StackBlitz.
getby and findby interchangeabilityAt first glance, it seems that React Testing Library (abbreviated RTL) await waitFor + get can be replaced with find everywhere, but it’s not so.
react-codemirror instancesWhen building the string-strip-html GUI, I wanted: line wrapping, full-screen flexbox layout, with scrollbars on Codemirror box only. That’s a common layout seen on code-oriented sites like Codepen or Stackblitz. I created a minimal proof-of-concept sandbox to prove it works.
Syntax highlighting is done using either highlight.js or prism.js. Once you’ve picked one, you’ll have to set it up for code blocks: 1. within MDX and 2. outside MDX. That’s how it works on all kinds of frameworks, not just Remix, although I’ll post examples for Remix.
This setup is mostly a trivial task; however, there are a few niggles worth mentioning.
I used to believe that three-theme UI toggle (auto-dark-light) was superior to the two-theme, dark-light. But I don’t think that way anymore.