From 0ca25ca314d0ec92b00a797bddee55d63ad27870 Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Tue, 5 Aug 2025 22:01:23 +0800
Subject: [PATCH] refactor(nav,layout): use `InjectionKey` (#4880)

---------

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 src/client/theme-default/Layout.vue              |  4 ++--
 src/client/theme-default/components/VPHero.vue   |  5 +++--
 src/client/theme-default/components/VPNav.vue    |  4 ++--
 .../components/VPNavScreenMenuGroupLink.vue      |  3 ++-
 .../components/VPNavScreenMenuLink.vue           |  3 ++-
 src/client/theme-default/composables/layout.ts   | 16 +++++++++++++++-
 src/client/theme-default/composables/nav.ts      |  8 +++++++-
 7 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 30ebe491..ace5edd5 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -8,7 +8,7 @@ import VPNav from './components/VPNav.vue'
 import VPSidebar from './components/VPSidebar.vue'
 import VPSkipLink from './components/VPSkipLink.vue'
 import { useData } from './composables/data'
-import { registerWatchers } from './composables/layout'
+import { layoutInfoInjectionKey, registerWatchers } from './composables/layout'
 import { useSidebarControl } from './composables/sidebar'
 
 const {
@@ -24,7 +24,7 @@ const { frontmatter } = useData()
 const slots = useSlots()
 const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
 
-provide('hero-image-slot-exists', heroImageSlotExists)
+provide(layoutInfoInjectionKey, { heroImageSlotExists })
 </script>
 
 <template>
diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
index e1653085..4e1e2e9b 100644
--- a/src/client/theme-default/components/VPHero.vue
+++ b/src/client/theme-default/components/VPHero.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { type Ref, inject } from 'vue'
 import type { DefaultTheme } from 'vitepress/theme'
+import { inject } from 'vue'
+import { layoutInfoInjectionKey } from '../composables/layout'
 import VPButton from './VPButton.vue'
 import VPImage from './VPImage.vue'
 
@@ -20,7 +21,7 @@ defineProps<{
   actions?: HeroAction[]
 }>()
 
-const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
+const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
 </script>
 
 <template>
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index 577c8ece..d33949a6 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -2,7 +2,7 @@
 import { inBrowser } from 'vitepress'
 import { computed, provide, watchEffect } from 'vue'
 import { useData } from '../composables/data'
-import { useNav } from '../composables/nav'
+import { navInjectionKey, useNav } from '../composables/nav'
 import VPNavBar from './VPNavBar.vue'
 import VPNavScreen from './VPNavScreen.vue'
 
@@ -13,7 +13,7 @@ const hasNavbar = computed(() => {
   return frontmatter.value.navbar !== false
 })
 
-provide('close-screen', closeScreen)
+provide(navInjectionKey, { closeScreen })
 
 watchEffect(() => {
   if (inBrowser) {
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
index 283cec7c..7633a8bb 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
 import { inject } from 'vue'
+import { navInjectionKey } from '../composables/nav'
 import VPLink from './VPLink.vue'
 
 defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
 
-const closeScreen = inject('close-screen') as () => void
+const { closeScreen } = inject(navInjectionKey)!
 </script>
 
 <template>
diff --git a/src/client/theme-default/components/VPNavScreenMenuLink.vue b/src/client/theme-default/components/VPNavScreenMenuLink.vue
index fde606fe..17b5a955 100644
--- a/src/client/theme-default/components/VPNavScreenMenuLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuLink.vue
@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
 import { inject } from 'vue'
+import { navInjectionKey } from '../composables/nav'
 import VPLink from './VPLink.vue'
 
 defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
 
-const closeScreen = inject('close-screen') as () => void
+const { closeScreen } = inject(navInjectionKey)!
 </script>
 
 <template>
diff --git a/src/client/theme-default/composables/layout.ts b/src/client/theme-default/composables/layout.ts
index 1b993ea6..e0484cf2 100644
--- a/src/client/theme-default/composables/layout.ts
+++ b/src/client/theme-default/composables/layout.ts
@@ -1,6 +1,13 @@
 import { inBrowser, onContentUpdated, useRoute } from 'vitepress'
 import type { DefaultTheme, useLayout as expected } from 'vitepress/theme'
-import { computed, shallowReadonly, shallowRef, watch } from 'vue'
+import {
+  computed,
+  shallowReadonly,
+  shallowRef,
+  watch,
+  type ComputedRef,
+  type InjectionKey
+} from 'vue'
 import { getSidebar, getSidebarGroups } from '../support/sidebar'
 import { useData } from './data'
 import { getHeaders } from './outline'
@@ -102,3 +109,10 @@ export function registerWatchers({ closeSidebar }: RegisterWatchersOptions) {
 
   useCloseSidebarOnEscape(closeSidebar)
 }
+
+export interface LayoutInfo {
+  heroImageSlotExists: ComputedRef<boolean>
+}
+
+export const layoutInfoInjectionKey: InjectionKey<LayoutInfo> =
+  Symbol('layout-info')
diff --git a/src/client/theme-default/composables/nav.ts b/src/client/theme-default/composables/nav.ts
index fbefa6f4..370c9e08 100644
--- a/src/client/theme-default/composables/nav.ts
+++ b/src/client/theme-default/composables/nav.ts
@@ -1,5 +1,5 @@
 import { useRoute } from 'vitepress'
-import { ref, watch } from 'vue'
+import { ref, watch, type InjectionKey } from 'vue'
 
 export function useNav() {
   const isScreenOpen = ref(false)
@@ -35,3 +35,9 @@ export function useNav() {
     toggleScreen
   }
 }
+
+export interface NavExposedMethods {
+  closeScreen: () => void
+}
+
+export const navInjectionKey: InjectionKey<NavExposedMethods> = Symbol('nav')