As we are developing portions of code, it has become very apparent that we cannot continue to have to reload our environment, reinstall everything, and navigate back to the specific portion of the app we were testing in order to verify that our changes were correct.
To that end, we need a system that interacts with the HMR system and accepts the HMR request at the module level and replaces the module stored in memory and re-registers it in the render block. See this for more info on how HMR typically works (in Vite): Hot Module Replacement is Easy.
Concerns I have around this are exactly how HMR interacts with the boundary we are drawing around each Neighbourhood component or package. What are the options?
Each package needs to have its own dev server.
Each package can configure its own build env (is it Vite? Webpack?), and each package would correspond to a particular URL on the local dev environment.
Each package would have an index.html file that is loaded into an invisible iframe.
Code would hook into the events for when new code has been reloaded and re-emit the event along with all the code for the module.
Our component manager would listen for these are dynamically recreate the module and re-register it with the shared custom component registry used used in the render block.
We could include every package in the dev env into a specific module that would then depend on all the modules and would still do parts 3,4 from above.
We could hook directly into the HMR system and listen for the modules that we want. This would require being able to configure our dev environment's HMR sever to always look at and serve the modules from packages independent of them being included in the project. If this is possible, we could essentially integrate directly with the HMR server. We would:
Set up the project so all the packages in a project get served under one dev server.
Allow configuring included modules from the dev server URLs directly from the dev config file.
As we include each module file and register them with their respective manager (assessment controls, resource views, etc.), we can also accept updates from the HMR server to swap out the module.
Open questions are if we need to better control how top level page reloading occurs if we are enabling HMR for modules that are not imported anywhere and aren't self-accepting (though I don't know if we can even configure the HMR server to do that).
As we are developing portions of code, it has become very apparent that we cannot continue to have to reload our environment, reinstall everything, and navigate back to the specific portion of the app we were testing in order to verify that our changes were correct.
To that end, we need a system that interacts with the HMR system and accepts the HMR request at the module level and replaces the module stored in memory and re-registers it in the render block. See this for more info on how HMR typically works (in Vite): Hot Module Replacement is Easy.
Concerns I have around this are exactly how HMR interacts with the boundary we are drawing around each Neighbourhood component or package. What are the options?