Hot reloading for local component development

[calebjacob]

Hey everyone, I was tasked this sprint with getting my team set up to start developing RoC components. I got the repo set up and the workflow is actually really nice! https://github.com/near/near-roc-components

Anyways, I started thinking it would be super cool if we could see our changes instantly in the browser when modifying a component without having to do a manual, full page refresh each time. I chatted quickly with @mpeterdev about it and we decided it made sense for me to take a stab at it.

Here's where I ended up:

• Created two new packages: packages/hot-reload-server and packages/hot-reload-client
• Added a new command in the root package.json: pnpm dev:components
• Updated apps/web to allow configuration of a new feature flag config for hotReloadWebsocketUrl in the Dev Tools drawer.
• The packages/hot-reload-client exposes a reusable useHotReload() hook to initialize the websocket connection. The hotReloadWebsocketUrl is passed into the hook. When it's set, it will initialize the websocket connection and listen for a HOT_RELOAD event.
• Added a detailed README to packages/hot-reload-server to explain context and usage

The intent behind pnpm dev:components is giving component authors a quick way to call a single command to get everything up and running for local component development (in this case, it's booting up apps/web and packages/hot-reload-server).

Please give the README a glance and let me know what you think!

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bos-web-engine	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 17, 2024 11:10pm
bos-web-engine-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 17, 2024 11:10pm
bos-web-engine-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 17, 2024 11:10pm