wip: setup twoslash

Author: antfu

.npmrc

@@ -0,0 +1,2 @@
+# This is needed for TwoSlash to resolve the types correctly
+shamefully-hoist=true

.vitepress/config.ts

@@ -4,6 +4,7 @@ import { defineConfigWithTheme } from 'vitepress'
 import type { Config as ThemeConfig } from '@vue/theme'
 import baseConfig from '@vue/theme/config'
 import { headerPlugin } from './headerMdPlugin'
+import { transformerTwoslash } from 'vitepress-plugin-twoslash'
 // import { textAdPlugin } from './textAdMdPlugin'
 
 const nav: ThemeConfig['nav'] = [
@@ -622,6 +623,8 @@ export default defineConfigWithTheme<ThemeConfig>({
     ]
   ],
 
+
+
   themeConfig: {
     nav,
     sidebar,
@@ -711,15 +714,19 @@ export default defineConfigWithTheme<ThemeConfig>({
   },
 
   markdown: {
+    theme: 'github-dark',
     config(md) {
       md.use(headerPlugin)
       // .use(textAdPlugin)
-    }
+    },
+    codeTransformers: [
+      transformerTwoslash()
+    ]
   },
 
   vite: {
     define: {
-      __VUE_OPTIONS_API__: false
+      __VUE_OPTIONS_API__: true
     },
     optimizeDeps: {
       include: ['gsap', 'dynamics.js'],

.vitepress/theme/index.ts

@@ -1,6 +1,9 @@
+import 'vitepress-plugin-twoslash/style.css'
 import './styles/index.css'
-import { h, App } from 'vue'
+
+import { h, App, Plugin } from 'vue'
 import { VPTheme } from '@vue/theme'
+import twoslashFloatingVue from 'vitepress-plugin-twoslash/client'
 import PreferenceSwitch from './components/PreferenceSwitch.vue'
 import {
   preferComposition,
@@ -22,6 +25,7 @@ export default Object.assign({}, VPTheme, {
     })
   },
   enhanceApp({ app }: { app: App }) {
+    app.use(twoslashFloatingVue as Plugin<[]>)
     app.provide('prefer-composition', preferComposition)
     app.provide('prefer-sfc', preferSFC)
     app.provide('filter-headers', filterHeadersByPreference)

.vitepress/theme/styles/index.css

@@ -1,11 +1,7 @@
 @import "./pages.css";
 @import "./badges.css";
+@import "./twoslash.css";
 @import "./options-boxes.css";
 @import "./inline-demo.css";
 @import "./utilities.css";
 @import "./style-guide.css";
-
-/* vitepress rc.31 migrated to shijiki and need this to apply code styles */
-.vp-code span {
-  color: var(--shiki-dark, inherit);
-}

.vitepress/theme/styles/twoslash.css

@@ -0,0 +1,27 @@
+.floating-vue-twoslash .twoslash-popup-type {
+  max-width: 600px;
+  display: block;
+  padding: 6px 12px;
+  width: fit-content;
+  min-width: 100%;
+  font-family: var(--vt-font-family-mono);
+  line-height: var(--vt-doc-code-line-height);
+  font-size: 14px;
+  color: white;
+  transition: color 0.5s;
+  white-space: pre-wrap;
+}
+
+.v-popper--theme-twoslash .v-popper__inner {
+  background: #24292e;
+  color: white;
+  border-color: #8885;
+}
+
+.v-popper--theme-dropdown .v-popper__arrow-outer {
+  border-color: #8885;
+}
+
+.v-popper--theme-dropdown .v-popper__arrow-inner {
+  border-color: #24292e;
+}

package.json

@@ -10,21 +10,29 @@
     "preinstall": "npx only-allow pnpm"
   },
   "dependencies": {
-    "@vue/repl": "^3.0.0",
+    "@vue/repl": "^3.3.0",
     "@vue/theme": "^2.2.5",
     "dynamics.js": "^1.1.5",
-    "gsap": "^3.9.0",
-    "vitepress": "1.0.0-rc.33",
-    "vue": "^3.4.0"
+    "floating-vue": "^5.0.3",
+    "gsap": "^3.12.4",
+    "vitepress": "1.0.0-rc.36",
+    "vue": "^3.4.13"
   },
   "devDependencies": {
-    "@types/markdown-it": "^12.2.3",
-    "@types/node": "^20.10.1",
-    "terser": "^5.14.2"
+    "@types/markdown-it": "^13.0.7",
+    "@types/node": "^20.11.0",
+    "shikiji": "0.10.0-beta.1",
+    "shikiji-transformers": "0.10.0-beta.1",
+    "shikiji-twoslash": "0.10.0-beta.1",
+    "terser": "^5.26.0",
+    "vitepress-plugin-twoslash": "0.10.0-beta.1"
   },
   "pnpm": {
     "overrides": {
-      "@vitejs/plugin-vue": "5.0.0-beta.1"
+      "shikiji": "0.10.0-beta.1",
+      "shikiji-transformers": "0.10.0-beta.1",
+      "shikiji-twoslash": "0.10.0-beta.1",
+      "vitepress-plugin-twoslash": "0.10.0-beta.1"
     },
     "peerDependencyRules": {
       "ignoreMissing": [