refactor: drop body-scroll-lock in favor of vueuse useScrollLock (#2809)

package.json

@@ -90,13 +90,12 @@
     "release": "node scripts/release.js"
   },
   "dependencies": {
-    "@docsearch/css": "^3.5.1",
-    "@docsearch/js": "^3.5.1",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@docsearch/css": "^3.5.2",
+    "@docsearch/js": "^3.5.2",
+    "@vitejs/plugin-vue": "^4.3.1",
     "@vue/devtools-api": "^6.5.0",
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
-    "body-scroll-lock": "3.1.5",
     "focus-trap": "^7.5.2",
     "mark.js": "8.11.1",
     "minisearch": "^6.1.0",
@@ -105,7 +104,7 @@
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@clack/prompts": "^0.6.3",
+    "@clack/prompts": "^0.7.0",
     "@mdit-vue/plugin-component": "^0.12.0",
     "@mdit-vue/plugin-frontmatter": "^0.12.0",
     "@mdit-vue/plugin-headers": "^0.12.0",
@@ -114,11 +113,10 @@
     "@mdit-vue/plugin-toc": "^0.12.0",
     "@mdit-vue/shared": "^0.12.0",
     "@rollup/plugin-alias": "^5.0.0",
-    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.0",
     "@rollup/plugin-replace": "^5.0.2",
-    "@types/body-scroll-lock": "^3.1.0",
     "@types/compression": "^1.7.2",
     "@types/cross-spawn": "^6.0.2",
     "@types/debug": "^4.1.8",
@@ -132,7 +130,7 @@
     "@types/markdown-it-emoji": "^2.0.2",
     "@types/micromatch": "^4.0.2",
     "@types/minimist": "^1.2.2",
-    "@types/node": "^20.4.8",
+    "@types/node": "^20.5.0",
     "@types/prompts": "^2.4.4",
     "@vue/shared": "^3.3.4",
     "chokidar": "^3.5.3",
@@ -140,16 +138,16 @@
     "conventional-changelog-cli": "^3.0.0",
     "cross-spawn": "^7.0.3",
     "debug": "^4.3.4",
-    "esbuild": "^0.19.0",
+    "esbuild": "^0.19.2",
     "escape-html": "^1.0.3",
     "execa": "^7.2.0",
     "fast-glob": "^3.3.1",
     "fs-extra": "^11.1.1",
     "get-port": "^7.0.0",
     "gray-matter": "^4.0.3",
-    "lint-staged": "^13.2.3",
+    "lint-staged": "^14.0.0",
     "lodash.template": "^4.5.0",
-    "lru-cache": "^10.0.0",
+    "lru-cache": "^10.0.1",
     "markdown-it": "^13.0.1",
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-attrs": "^4.1.6",
@@ -163,14 +161,14 @@
     "path-to-regexp": "^6.2.1",
     "picocolors": "^1.0.0",
     "pkg-dir": "^7.0.0",
-    "playwright-chromium": "^1.36.2",
+    "playwright-chromium": "^1.37.1",
     "polka": "1.0.0-next.22",
-    "prettier": "^3.0.1",
+    "prettier": "^3.0.2",
     "prompts": "^2.4.2",
     "punycode": "^2.3.0",
     "rimraf": "^5.0.1",
-    "rollup": "^3.27.2",
-    "rollup-plugin-dts": "^5.3.1",
+    "rollup": "^3.28.0",
+    "rollup-plugin-dts": "^6.0.0",
     "rollup-plugin-esbuild": "^5.0.0",
     "semver": "^7.5.4",
     "shiki-processor": "^0.1.3",
@@ -179,7 +177,7 @@
     "sitemap": "^7.1.1",
     "supports-color": "^9.4.0",
     "typescript": "^5.1.6",
-    "vitest": "^0.34.1",
+    "vitest": "^0.34.2",
     "vue-tsc": "^1.8.8",
     "wait-on": "^7.0.1"
   },

src/client/theme-default/components/VPLocalSearchBox.vue

@@ -12,7 +12,7 @@ import {
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 import Mark from 'mark.js/src/vanilla.js'
 import MiniSearch, { type SearchResult } from 'minisearch'
-import { useRouter, dataSymbol } from 'vitepress'
+import { inBrowser, useRouter, dataSymbol } from 'vitepress'
 import {
   computed,
   createApp,
@@ -41,7 +41,6 @@ const emit = defineEmits<{
 
 const el = shallowRef<HTMLElement>()
 const resultsEl = shallowRef<HTMLElement>()
-const body = shallowRef<HTMLElement>()
 
 /* Search */
 
@@ -354,10 +353,9 @@ useEventListener('popstate', (event) => {
 })
 
 /** Lock body */
-const isLocked = useScrollLock(body)
+const isLocked = useScrollLock(inBrowser ? document.body : null)
 
 onMounted(() => {
-  body.value = document.body
   nextTick(() => {
     isLocked.value = true
     nextTick().then(() => activate())

src/client/theme-default/components/VPNavScreen.vue

@@ -1,31 +1,25 @@
 <script setup lang="ts">
+import { useScrollLock } from '@vueuse/core'
+import { inBrowser } from 'vitepress'
 import { ref } from 'vue'
-import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
-import VPNavScreenMenu from './VPNavScreenMenu.vue'
 import VPNavScreenAppearance from './VPNavScreenAppearance.vue'
-import VPNavScreenTranslations from './VPNavScreenTranslations.vue'
+import VPNavScreenMenu from './VPNavScreenMenu.vue'
 import VPNavScreenSocialLinks from './VPNavScreenSocialLinks.vue'
+import VPNavScreenTranslations from './VPNavScreenTranslations.vue'
 
 defineProps<{
   open: boolean
 }>()
 
 const screen = ref<HTMLElement | null>(null)
-
-function lockBodyScroll() {
-  disableBodyScroll(screen.value!, { reserveScrollBarGap: true })
-}
-
-function unlockBodyScroll() {
-  clearAllBodyScrollLocks()
-}
+const isLocked = useScrollLock(inBrowser ? document.body : null)
 </script>
 
 <template>
   <transition
     name="fade"
-    @enter="lockBodyScroll"
-    @after-leave="unlockBodyScroll"
+    @enter="isLocked = true"
+    @after-leave="isLocked = false"
   >
     <div v-if="open" class="VPNavScreen" ref="screen" id="VPNavScreen">
       <div class="container">

src/client/theme-default/components/VPSidebar.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock'
-import { ref, watchPostEffect } from 'vue'
+import { useScrollLock } from '@vueuse/core'
+import { inBrowser } from 'vitepress'
+import { ref, watch } from 'vue'
 import { useSidebar } from '../composables/sidebar'
 import VPSidebarItem from './VPSidebarItem.vue'
 
@@ -11,24 +12,19 @@ const props = defineProps<{
 }>()
 
 // a11y: focus Nav element when menu has opened
-let navEl = ref<HTMLElement | null>(null)
+const navEl = ref<HTMLElement | null>(null)
+const isLocked = useScrollLock(inBrowser ? document.body : null)
 
-function lockBodyScroll() {
-  disableBodyScroll(navEl.value!, { reserveScrollBarGap: true })
-}
-
-function unlockBodyScroll() {
-  clearAllBodyScrollLocks()
-}
-
-watchPostEffect(async () => {
+watch(
+  [props, navEl],
+  () => {
     if (props.open) {
-    lockBodyScroll()
+      isLocked.value = true
       navEl.value?.focus()
-  } else {
-    unlockBodyScroll()
-  }
-})
+    } else isLocked.value = false
+  },
+  { immediate: true, flush: 'post' }
+)
 </script>
 
 <template>

src/node/init/init.ts

@@ -67,16 +67,19 @@ export async function init() {
           message: 'Theme:',
           options: [
             {
+              // @ts-ignore
               value: ScaffoldThemeType.Default,
               label: 'Default Theme',
               hint: 'Out of the box, good-looking docs'
             },
             {
+              // @ts-ignore
               value: ScaffoldThemeType.DefaultCustom,
               label: 'Default Theme + Customization',
               hint: 'Add custom CSS and layout slots'
             },
             {
+              // @ts-ignore
               value: ScaffoldThemeType.Custom,
               label: 'Custom Theme',
               hint: 'Build your own or use external'