docs: enable twoslash

package.json

@@ -105,6 +105,7 @@
     "vite-plugin-inspect": "^0.8.1",
     "vite-plugin-pwa": "^0.17.4",
     "vitepress": "^1.0.0-rc.36",
+    "vitepress-plugin-twoslash": "0.9.0-0",
     "vitest": "^1.1.3",
     "vue": "^3.4.7",
     "vue2": "npm:vue@^2.7.14"

packages/.vitepress/config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vitepress'
+import { transformerTwoslash } from 'vitepress-plugin-twoslash'
 import { addonCategoryNames, categoryNames, coreCategoryNames, metadata } from '../metadata/metadata'
 import { currentVersion, versions } from '../../meta/versions'
 
@@ -60,6 +61,9 @@ export default defineConfig({
       light: 'vitesse-light',
       dark: 'vitesse-dark',
     },
+    codeTransformers: [
+      transformerTwoslash(),
+    ],
   },
 
   themeConfig: {
@@ -178,6 +182,7 @@ export default defineConfig({
     ['link', { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap' }],
     ['link', { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap' }],
   ],
+
 })
 
 function getFunctionsSideBar() {

packages/.vitepress/plugins/markdownTransform.ts

@@ -44,7 +44,7 @@ export function MarkdownTransform(): Plugin {
         const sliceIndex = firstHeader < 0 ? frontmatterEnds < 0 ? 0 : frontmatterEnds + 4 : firstHeader
 
         // Insert JS/TS code blocks
-        code = await replaceAsync(code, /\n```ts\n(.+?)\n```\n/gs, async (_, snippet) => {
+        code = await replaceAsync(code, /\n```ts( [^\n]+)?\n(.+?)\n```\n/gs, async (_, meta, snippet) => {
           const formattedTS = (await format(snippet.replace(/\n+/g, '\n'), { semi: false, singleQuote: true, parser: 'typescript' })).trim()
           const js = ts.transpileModule(formattedTS, {
             compilerOptions: { target: 99 },
@@ -57,8 +57,8 @@ export function MarkdownTransform(): Plugin {
 <CodeToggle>
 <div class="code-block-ts">
 
-\`\`\`ts
-${formattedTS}
+\`\`\`ts${meta}
+${snippet}
 \`\`\`
 
 </div>

packages/.vitepress/theme/components/CodeToggle.vue

@@ -15,7 +15,7 @@ const js = preferJS
 </script>
 
 <template>
-  <div flex="~ justify-end" mb--2 mt--4>
+  <div flex="~ justify-end" mb--2 mt--2>
     <label class="flex text-xs items-center px3 gap-1 bg-$vp-code-block-bg rounded-full py1" relative>
       <input
         v-model="preferJS"

packages/.vitepress/theme/index.ts

@@ -1,4 +1,5 @@
 import DefaultTheme from 'vitepress/theme'
+import TwoSlashFloatingVue from 'vitepress-plugin-twoslash/client'
 import { handleRedirects } from './redirects'
 
 import './styles/main.css'
@@ -13,6 +14,7 @@ export default {
   enhanceApp(ctx: any) {
     if (typeof window !== 'undefined')
       handleRedirects(ctx.router)
+    ctx.app.use(TwoSlashFloatingVue)
   },
 }
 

packages/core/useMouse/index.md

@@ -8,7 +8,7 @@ Reactive mouse position
 
 ## Basic Usage
 
-```js
+```ts twoslash
 import { useMouse } from '@vueuse/core'
 
 const { x, y, sourceType } = useMouse()
@@ -17,23 +17,26 @@ const { x, y, sourceType } = useMouse()
 Touch is enabled by default. To only detect mouse changes, set `touch` to `false`.
 The `dragover` event is used to track mouse position while dragging.
 
-```js
+```ts twoslash
+import { useMouse } from '@vueuse/core'
+// ---cut---
 const { x, y } = useMouse({ touch: false })
 ```
 
 ## Custom Extractor
 
 It's also possible to provide a custom extractor function to get the position from the event.
 
-```ts
+```ts twoslash
 import type { UseMouseEventExtractor } from '@vueuse/core'
 import { useMouse, useParentElement } from '@vueuse/core'
 
 const parentEl = useParentElement()
 
-const extractor: UseMouseEventExtractor = event => (event instanceof Touch
-  ? null
-  : [event.offsetX, event.offsetY]
+const extractor: UseMouseEventExtractor = event => (
+  event instanceof Touch
+    ? null
+    : [event.offsetX, event.offsetY]
 )
 
 const { x, y, sourceType } = useMouse({ target: parentEl, type: extractor })