type for ViteHotContext, meta, import.meta.hot.on( 'type'

[wispy leaf]

hi, how do we add type for custom event in **ViteHotContext **? import.meta.hot.on( 'type' .
i try in src/vite-env.d.ts

/// <reference types="vite/client" />

interface ImportMetaEnv {
    readonly VITE_CUSTOM_ENV_VARIABLE: string
}

interface ImportMeta {
    readonly env: ImportMetaEnv
}

interface ViteHotContext {
    on<T extends ({}&string)|'mycustomevent1|mycustomevent2'>( // i want my custom string type here 
        event: T,
        cb: ( payload: InferCustomEventPayload<T> ) => void,
    ): void
}

work for ImportMetaEnv, ImportMeta , but not for ViteHotContext !, i need strict custom events string or enums

[dusty linden]

i think the best way is not to extend the type of T itself, but rather InferCustomEventPayload

https://github.com/vitejs/vite/blob/main/packages/vite/src/shared/hmr.ts#L122

so if you see there, the payload type is InferCustomEventPayload<T>

that is taken from here https://github.com/vitejs/vite/blob/main/packages/vite/types/customEvent.d.ts

so if you add your own keys and their corresponding value for each keys, the HMR api should accept your custom events

[wispy leaf]

ho thanks you , i was missing the generic ! my bad
did you think we can do something similar for data?
More clean than this ?
const data = import.meta.hot.data as ViteHotContextData

am not really fan of dangerous inference and am also not sure why .data is type any and not unknown !!!?
it look a bad practice no ?!

[dusty linden]

wait, did you get the previous one working? what did you change?

[wispy leaf]

it work i just fix typing

😆 am maniac

[dusty linden]

i tried to override it locally, in my case, i still wasn't able to override the type of hot on ImportMeta

how did you do it again?

[wispy leaf]

i try to not have as x or any in my project

[dusty linden]

/// <reference types="vite/client" />

interface CustomEventMap {
  "vite:beforeUpdate": number;
  "vite:customEvent": number;
}

type InferCustomEventPayload<T extends string> = T extends keyof CustomEventMap
  ? CustomEventMap[T]
  : never;

interface ViteHotContext {
  on<T extends string>(
    event: T,
    cb: (payload: InferCustomEventPayload<T>) => void,
  ): void;
}

interface ImportMetaEnv {
  readonly VITE_HI: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
  readonly hot?: string;
}

i did this in my case

(not working)

[wispy leaf]

ya , i tryed this no work

[dusty linden]

wait, so how did you fix it?

[dusty linden]

import.meta.hot should be string in this case, but instead, its ViteHotContext

https://github.com/vitejs/vite/blob/main/packages/vite/types/importMeta.d.ts

[wispy leaf]

ya

interface ViteHotContextData {
    editor?: Editor;
    game?: Game;
}

it for keep some module alive, like webgl,wbegpu cache for avoid cache all textures agains
it the only way i found

[dusty linden]

looks like the handling is different for ImportMetaEnv and ViteHotContext

[wispy leaf]

yeah, I don't really know how to extends or override the type in this case, for global ?
i have a global.d.ts where i can add some hack type when am stuck with other libs, but idk if vitejs have this kind of feature ?
ex: ```ts
declare global {
const _: _;

namespace GlobalMixins {

    interface DisplayObject {
        _eid: EID;
        _events: Record<PixiEventName, EE[]>;
    }
    interface LoaderResource {
        textures_n?: Record<string, import( '@pixi/core' ).Texture>;
        texture_n?: import( '@pixi/core' ).Texture;
    }
    export interface Container {

[dusty linden]

hmmm it's interesting that it doesn't work

[dusty linden]

yea this also doesn't work

export interface ViteHotContext {
  readonly data: any

  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

  acceptExports(
    exportNames: string | readonly string[],
    cb?: (mod: ModuleNamespace | undefined) => void,
  ): void

  dispose(cb: (data: any) => void): void
  prune(cb: (data: any) => void): void
  invalidate(message?: string): void

  on<T extends string>(
    event: T,
    cb: (payload: InferCustomEventPayload<T>) => void,
  ): void
  off<T extends string>(
    event: T,
    cb: (payload: InferCustomEventPayload<T>) => void,
  ): void
  send<T extends string>(event: T, data?: InferCustomEventPayload<T>): void
}

also tried overriding data to a certain type, also doesn't work

[wispy leaf]

ha oki, otherwise, ..hum it's not so bad!
I can simply infer, but I prefer to have stronger typing when possible.
But anyway,** thanks for the original question** being able to type my events name is already good.

[dusty linden]

yea it's definitely something weird, i'll try and make an issue in github for you

[wispy leaf]

thanks i will keep a eye on it if you can share link for i subscribes

[dusty linden]

by the way, how are you handling the custom events on the HMR?

@wispy leaf

so say you have an event called "customEvent", how does the HMR handle such event?

and how does it even get emitted in the first place?

[wispy leaf]

during dispose

it a special hack for everithing work, it send something to vite server and than this message is propagate to all my project for special thing

[dusty linden]

ah i see

okay

[dusty linden]

hi, @wispy leaf
https://vitejs.dev/guide/api-plugin.html#typescript-for-custom-events

i think this part of the docs explains what ur looking for

[dusty linden]

though i'm still not able to put together an example that works

https://github.com/vitejs/vite/issues/16601

here is the issue link