How Hot Module Replacement REALLY Works | JS Toolchain From Scratch
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- 🎉 NEW book on tooling (build your own tools!) Coming 2024, register for updates): lachlan-miller...
⚠️ NOTE: I refer to HMR as Hot Module RELOAD - it's actually "Replacement", I had been saying in wrong for years.
🐦 My Twitter: / lachlan19900
✏️ Diagram/notes from video: app.eraser.io/...
🔨 I am building an entire JS toolchain from (mostly) scratch. In this video, we lay the foundations and build out a naive but simple and functional hot module replacement (HMR) implementation.
Source: github.com/lmi...
The R in HMR is for "replacement" - I say "reload" in this video (and have done so for years). Sorry about that 🤦♂ Enjoy!
Great series! It can be hard to understand how these tools work at a basic level but you made it very digestable!
Thank you - I am glad you are enjoying it!
25:40 the hardest part of this is implementing the actual real life hot.accept method. I know that u used a simplified example where u just rerender the component, but it real-life conditions it would be much harder (like how do restore the props state for the hot swapped component from the parent?)
This is something I've been wanting to look into for a while, so great timing on the video.
Hope you find it useful!
I was today years old that it is Replacement and not Reload 🙈
Thanks for the video Lachlan 🙌🏻
Thanks! Been tuning in to you & Michael's podcast, great stuff! SSR / hydration isn't something I know well, might have to hit you up for some help when I get to making a video about how that works under the hood...
@@LachlanMiller Glad you enjoy the podcast ☺
Oh yes, absolutely! My DMs are always open 🙌🏻
Awesome content, when can we expect your book ?
Hopefully later this year, this kind of content takes a ton of time! I will send out email updates as they come.
This is great, thanks!
Great video! Nice to know how things we take for granted actually work
Great content. Thanks
great video! please keep this tooling series going 👏
Will do!
This was awesome. Loving the series.
Thanks, glad you are enjoying it! Not sure what to focus on next, any recommendations?
@@LachlanMiller I have always been curious about source maps and how the browser uses them. I would also love to see a basic bundler & transpiler built with something like esbuild and what to keep in mind when working with them.
@@sravansuresh7460 Source maps for sure, to show this off I think we need a bundler / transpiler first, that might be next 🔥
This is amazing! Learned a lot, thanks so much!! 😃
cool and make sense
Came here after the beef between Evan You and the guy from TsCoding Haha. Really interesting stuff really. Great video! Thanks, man.
what beef?
@@LachlanMiller th-cam.com/video/96JvriLR4s8/w-d-xo.htmlsi=q9UEoAah88cwMcAl I mean this
im confused in the hotmodule class you have an accept method that takes in a callback. but then the accept method is not called anywhere so where is the callback coming from?
Confusing right... it is called in the `child,.js`, it is `import.meta.hot.accept(...)`. It is called as soon at the module is loaded. See here: github.com/lmiller1990/build-your-own-vite/blob/371c6a991615f881ac1562ebcbb2ffdf02fe9c6e/dev-server/src/child.js#L3
Actual web development
Hello,
I was analyzing your TH-cam channel. your you tube SEO score is zero.
It should be increased. and subscribers ,views , like, comments is very low according
to your channel age. This is why your you tube growth is very low and your channel
setup is also having many problems. If, you can solve this problems your channel will
grow and be famous very quickly.
thanks