hot reload poc

[lifeart]

Todo:

• Figure out better ast plugin.
• Re-register components.
• Try to compare by reference (original class), instead of module name

How to check it?

Run project, edit src/components/Button/index.ts or src/components/Button/template.hbs and see reflected changes on main page.

Also, try to change .gts file.

Upd:
Now works for all components in /components/ folder.

---

How it's working?

1. We rely on moduleName metadata (file name) in compiled component template. Using it we map rendered components to updated.
2. We convert all components to yielded: <Button .../> to <Hot @component={{Button}} as |Button|><Button/></Hot>
3. Inside Hot component we render tracked {{yield this.component}} and listen for related template file changes (Button), once changed - we assign updated class to this.component.
4. In Vite we emit change event if Button component changed (to Hot), event contain new component class and moduleName (to allow it to map to any rendered component)
5. All transforms hidden in ast plugin

import { getComponentTemplate } from '@glimmer/manager';
// here is component definition
/* 
    usage without babel plugins:
    add this to the bottom of the gts component file
*/
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    const tpl = getComponentTemplate(newModule.default);
    const moduleName = tpl().moduleName;
    window.dispatchEvent(
      new CustomEvent("hot-reload", {
        detail: {
          moduleName,
          component: newModule.default,
        },
      })
    );
  });
}

// hot-reloaded component need to be wrapped

<Hot @component='Button' as |Button|><Button>Text</Button></Hot>

catch emitted change events in Hot component!

[netlify]

✅ Deploy Preview for ember-vite ready!

Name	Link
🔨 Latest commit	5b2a82a
🔍 Latest deploy log	https://app.netlify.com/sites/ember-vite/deploys/64b17147b710270008930017
😎 Deploy Preview	https://deploy-preview-54--ember-vite.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Code Coverage Report

Coverage after merging hot-reload-poc into master

99.55%

Coverage Report

File	Lines (%)	Funcs (%)	Uncovered Lines
addons
ember-simple-auth.ts			12, 16
.../Bootstrap
index.ts		50
.../Hot
index.ts	93.24		46, 47, 48, 68, ...
config
registry.ts			85, 99
router.ts	98.08		97, 98
helpers
memory-usage.ts			12, 18, 20, 30, ...
modifiers
click-tracker.ts			20, 21