docs: refactor twoslash files

Author: posva

docs/.vitepress/config.ts

@@ -9,12 +9,7 @@ import {
   releases,
   discord,
 } from './meta'
-import {
-  apiIndexFile,
-  typedRouterFile,
-  typedRouterFileAsModule,
-  usersLoaderFile,
-} from './twoslash-files'
+import { typedRouterFile, typedRouterFileAsModule } from './twoslash-files'
 import { extraFiles } from './twoslash/files'
 
 export default defineConfig({
@@ -26,9 +21,6 @@ export default defineConfig({
             ...extraFiles,
             'router.ts': typedRouterFileAsModule,
             'typed-router.d.ts': typedRouterFile,
-            'api/index.ts': apiIndexFile,
-            '../api/index.ts': apiIndexFile,
-            'loaders/users.ts': usersLoaderFile,
           },
         },
       }),

docs/.vitepress/twoslash-files.ts

@@ -32,38 +32,3 @@ declare module 'vue-router/auto-routes' {
 }
 `
 export const typedRouterFileAsModule = typedRouterFile + '\nexport {}\n'
-export const apiIndexFile = `
-export interface User {
-  id: number
-  name: string
-  photoURL: string
-}
-
-export async function getUserById(id: string | number) {
-  return {} as User
-}
-export async function getUserList() {
-  return [] as User[]
-}
-
-export async function getCommonFriends(userAId: string | number, userBId: string | number) {
-  return [] as User[]
-}
-
-export async function getCurrentUser() {
-  return {} as User
-}
-
-export async function getFriends(id: string | number) {
-  return [] as User[]
-}
-`
-export const usersLoaderFile = `
-${apiIndexFile}
-import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic'
-
-export const useUserData = defineBasicLoader((route) => getUserById(route.params.id as string))
-export const useUserList = defineBasicLoader(() => getUserList())
-
-export { User, getUserById, getUserList }
-`

docs/.vitepress/twoslash/code/api.ts

@@ -0,0 +1,27 @@
+export interface User {
+  id: number
+  name: string
+  photoURL: string
+}
+
+export async function getUserById(id: string | number) {
+  return {} as User
+}
+export async function getUserList() {
+  return [] as User[]
+}
+
+export async function getCommonFriends(
+  userAId: string | number,
+  userBId: string | number
+) {
+  return [] as User[]
+}
+
+export async function getCurrentUser() {
+  return {} as User
+}
+
+export async function getFriends(id: string | number) {
+  return [] as User[]
+}

docs/.vitepress/twoslash/code/stores.ts

@@ -1,3 +1,4 @@
 import { defineStore } from 'pinia'
 
 export const useSomeStore = defineStore('some', {})
+export const useOtherStore = defineStore('other', {})

docs/.vitepress/twoslash/code/typed-router.ts

@@ -0,0 +1,31 @@
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>
+    '/users': RouteRecordInfo<
+      '/users',
+      '/users',
+      Record<never, never>,
+      Record<never, never>
+    >
+    '/users/[id]': RouteRecordInfo<
+      '/users/[id]',
+      '/users/:id',
+      { id: ParamValue<true> },
+      { id: ParamValue<false> }
+    >
+    '/users/[id]/edit': RouteRecordInfo<
+      '/users/[id]/edit',
+      '/users/:id/edit',
+      { id: ParamValue<true> },
+      { id: ParamValue<false> }
+    >
+  }
+}

docs/.vitepress/twoslash/files.ts

@@ -4,6 +4,19 @@ import { fileURLToPath } from 'node:url'
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url))
 
+const apiCode = fs.readFileSync(join(__dirname, './code/api.ts'), 'utf-8')
+
+export const usersLoaderCode = `
+import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic'
+
+${apiCode}
+
+export const useUserData = defineBasicLoader((route) => getUserById(route.params.id as string))
+export const useUserList = defineBasicLoader(() => getUserList())
+
+export { User, getUserById, getUserList }
+`
+
 export const extraFiles = {
   '@/stores/index.ts': fs.readFileSync(
     join(__dirname, './code/stores.ts'),
@@ -16,4 +29,13 @@ declare module '*.vue' {
   export default defineComponent({})
 }
 `.trimStart(),
+
+  // 'router.ts': typedRouterFileAsModule,
+  'typed-router.d.ts': fs.readFileSync(
+    join(__dirname, './code/typed-router.ts'),
+    'utf-8'
+  ),
+  'api/index.ts': apiCode,
+  '../api/index.ts': apiCode,
+  'loaders/users.ts': usersLoaderCode,
 }