Ability to get notified about an HMR update (eg in order to reload i18n translations)

[tgds]

As far as I know, currently, there's no way to know when an HMR update happens other than creating your own websocket connection to the dev server (duplicating what the LiveReload component does).

One use case for that would be reloading i18n translation files. If you use i18n in Remix, you have to reload the page after modifying the translations to see the change. Simply adding those files to watched files and relying on HMR doesn't work here, because you need to let i18n know to reload the translations.

Proposal

Add config prop to LiveReload component that let's you pass an onMessage hook, that will get called on HMR update.

I'm happy to make the PR (it's a fairly straightforward change), however, I starting this discussion to see if you'd be open to that change and get your thoughts on what this API could look like. In particular, should it be just one generic hook (onMessage), or something more granular, like onHMR, onLog, onUpdateAccepted, etc.

[kiliman]

The <LiveReload> component is easy to inline (just copy from remix-react/components.tsx). I would recommend that you copy that and make your own custom component. Even publish it on npm. That way you don't have to wait for the Remix team and others can benefit from it.

If they see the value in it, then it may end up in Remix core. But while you wait, you still have working code that solves your needs.

[kiliman]

To clarify, I just think too many good ideas get stuck in Proposals or PRs. The Remix team is small and focused on fixing v2 issues or new architecture like RSC support, so things like this, which are "nice-to-haves", are not going to be high priority for them.

[tgds]

Sure, I inlined it for my purposes.

But here's a package, if anyone finds it useful.