diff --git a/packages/client/constants.ts b/packages/client/constants.ts index 1c6ae16d7a..de65481247 100644 --- a/packages/client/constants.ts +++ b/packages/client/constants.ts @@ -3,14 +3,16 @@ import type { RouteRecordRaw } from 'vue-router' import type { ClicksContext, RenderContext } from '@slidev/types' import type { SlidevContext } from './modules/context' -export const injectionClicksContext: InjectionKey> = Symbol('slidev-clicks-context') -export const injectionCurrentPage: InjectionKey> = Symbol('slidev-page') -export const injectionSlideScale: InjectionKey> = Symbol('slidev-slide-scale') -export const injectionSlidevContext: InjectionKey> = Symbol('slidev-slidev-context') -export const injectionRoute: InjectionKey = Symbol('slidev-route') -export const injectionRenderContext: InjectionKey> = Symbol('slidev-render-context') -export const injectionActive: InjectionKey> = Symbol('slidev-active') -export const injectionFrontmatter: InjectionKey> = Symbol('slidev-fontmatter') +// Here we use string literal instead of symbols to make HMR more stable +// The value of the injections keys are implementation details, you should always use them with the reference to the constant instead of the value +export const injectionClicksContext = '$$slidev-clicks-context' as unknown as InjectionKey> +export const injectionCurrentPage = '$$slidev-page' as unknown as InjectionKey> +export const injectionSlideScale = '$$slidev-slide-scale' as unknown as InjectionKey> +export const injectionSlidevContext = '$$slidev-context' as unknown as InjectionKey> +export const injectionRoute = '$$slidev-route' as unknown as InjectionKey +export const injectionRenderContext = '$$slidev-render-context' as unknown as InjectionKey> +export const injectionActive = '$$slidev-active' as unknown as InjectionKey> +export const injectionFrontmatter = '$$slidev-fontmatter' as unknown as InjectionKey> export const CLASS_VCLICK_TARGET = 'slidev-vclick-target' export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'