HMR and TypeScript types

[chrome holly]

Hi! I need to write something that accesses the hot reloading in vite.. How can I introduce the correct types in my TypeScript project? As of correct types, an example is in an order.. I'm trying to do something like this:

/* @refresh reload */
import { init } from "./index.js";
import { frag } from "./shaders/frag.js";


const chassis = init({ fragSrc: frag });

if (chassis) {
  chassis.run();

  if (import.meta.hot) {
    import.meta.hot.accept(
      "./shaders/frag",
      // WHAT TO TYPE HERE?! WHERE TO OBTAIN THE CORRECT TYPES?!?!
      (mod?: unknown) => {
        if (mod) {
          // EWWWWW!!!
          const { frag } = mod as { frag: string };
          console.log("Reloading shader modules!");
          chassis.reload(frag);
          chassis.run();
        }
      },
    );
  }
}

[true nacelle]

does the HMR API here help? https://vitejs.dev/guide/api-hmr.html

/// stuff
accept(): void
accept(cb: (mod: ModuleNamespace | undefined) => void): void
accept(dep: string, cb: (mod: ModuleNamespace | undefined) => void): void
accept(
  deps: readonly string[],
  cb: (mods: Array<ModuleNamespace | undefined>) => void,
): void

/// stuff

[chrome holly]

the issue is.. how do I import or get typings for ModuleNamespace?

like.. what do I Import in the file.. or add to tsconfig.. or.. anything?

the IDE and intellisense is like "mhm.. alright.. but what is this ModuleNamespace" and well.. my linters.. tscompiler too

[true nacelle]

it should be typed as long as you have vite/client in either vite-end.d.ts or to the types of your tsconfig.compilerOptions

[chrome holly]

when I do that ugly typing trick it works.. so I basically have the runtime code

hmm.. I have..

[true nacelle]

huh, weird

[chrome holly]

yeah!

can a monorepo affect this?

basically I think it shouldn't but.. uh.. I don't know.. vite is installed as the dep for the subproject correctly and everything else there works

I check if the issue is my vite version

might be

[true nacelle]

dont think so

[chrome holly]

hmm.. nope

updating didn't change it.. weird

[true nacelle]

i think you might need to manually import ModuleNamespace from node_modules/vite/types/hot

its exported from hot.d.ts but not from the vite/client types bundle

which is kinda weird i guess but 🤷

[chrome holly]

Yeah! Weird but can be done that way then