HMR

[konsumer]

I am interested in HMR (hot module reloading) for ink, so it can keep state and reload components on file-change. I'm not sure where to start. It seems like react-hot-loader is pretty focused on webpack & web-oriented workflows. Any suggestions would be welcomed.

Might be sort of related to #15

[konsumer]

I started with a kind of naive approach, just to see if I could rerender on change.

I have a complete (no HMR) project here if you want to try it out.

I have an App that I want to fill the screen, and get re-rendered if a file changes (and eventually when terminal size changes.) I am using hooks and an HOC, because this illustrates how I will really use it.

• Here is my main app, that sizes itself to stdout.rows
• Here is my reloader, which clears the require-cash and re-requires the App

It works fine to render App, but when a file changes, the screen goes blank.

[vadimdemedes]

Good idea! I'm currently focusing on resolving layout issues, but would certainly love to look into it later. Keep us posted with your progress!

[vadimdemedes]

Based on my investigation, HMR is only possible when you bundle with webpack or alike - something which majority of Ink-based CLIs don't.

I'm going to leave this issue open for visibility, but not planning to spend time on it myself for now.

[tom-sherman]

You could potentially try https://github.com/sidorares/hot-module-replacement so that a bundler isn't needed.

Also, if someone is gonna attempt this they should integrate with https://www.npmjs.com/package/react-refresh however this does require babel.

[t3dotgg]

Was looking into using Ink on a new project and was surprised this wasn't a thing yet. A simple ink vite template w/ hmr would be killer for greenfield and a useful resource for existing projects trying to improve their DX.

The starting point as things stand now with npx create-ink-app feels...weird? Like the release story is there but the local dev story is not