How Hot Module Replacement REALLY Works | JS Toolchain From Scratch

🎉 NEW book on tooling (build your own tools!) Coming 2024, register for updates): lachlan-miller.ck.page/92dfa0...
⚠️ 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/workspace/W1ZOW...
🔨 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/lmiller1990/build-...

[@LachlanMiller]

The R in HMR is for "replacement" - I say "reload" in this video (and have done so for years). Sorry about that 🤦‍♂ Enjoy!

[@TheAlexLichter]

I was today years old that it is Replacement and not Reload 🙈 Thanks for the video Lachlan 🙌🏻

[@LachlanMiller]

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...

[@TheAlexLichter]

@@LachlanMiller Glad you enjoy the podcast ☺ Oh yes, absolutely! My DMs are always open 🙌🏻

[@Pablitox26]

This is amazing! Learned a lot, thanks so much!! 😃

[@dimasheiko]

great video! please keep this tooling series going 👏

[@LachlanMiller]

Will do!

[@Mac501pl]

Great video! Nice to know how things we take for granted actually work

[@Kevin-xo5ul]

This is something I've been wanting to look into for a while, so great timing on the video.

[@LachlanMiller]

Hope you find it useful!

[@aaditolkar]

Great series! It can be hard to understand how these tools work at a basic level but you made it very digestable!

[@LachlanMiller]

Thank you - I am glad you are enjoying it!

[@sravansuresh7460]

This was awesome. Loving the series.

[@LachlanMiller]

Thanks, glad you are enjoying it! Not sure what to focus on next, any recommendations?

[@sravansuresh7460]

@@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.

[@LachlanMiller]

@@sravansuresh7460 Source maps for sure, to show this off I think we need a bundler / transpiler first, that might be next 🔥

[@rameshramesh-bd2wu]

Awesome content, when can we expect your book ?

[@LachlanMiller]

Hopefully later this year, this kind of content takes a ton of time! I will send out email updates as they come.

[@bk1507]

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?

[@LachlanMiller]

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