HMR: How to invalidate module when import changes?

[jkxyz]

I have two modules, one with a base class and the other with a class which extends it. I've written some reload logic to handle updating instances of the base class. This works great when updating App.ts. But I'm seeing that when I update component.ts, even though the module gets invalidated, it still calls the accept callback in App.ts. For the sake of simplicity, I'd just like updating component.ts to trigger a page reload, instead of attempting to reload the module. I could write some code to update the prototype chain of all instances of Component, but I don't expect this file to be updated very often and therefore a page reload is fine.

Is there a simple way to achieve this?

The simplest approach I've found so far is to call window.location.reload() in the accept callback in component.ts. But this circumvents Vite's logging in the CLI and logs it as a hmr update to component.ts. Essentially what I want is to invalidate component.ts and all of its importers.

Here's an outline of the code:

component.ts:

export default class Component {
  // ...

  static reload(NewClass: typeof Component): void {
    // ...
  } 
}

if (import.meta.hot) {
  import.meta.hot.accept(() => {
    import.meta.hot?.invalidate();
  });
}

App.ts:

import Component from "./component";

export default class App extends Component {
  // ...
}

if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    if (newModule) {
      App.reload(newModule.default);
    }
  });
}