feat: setup for routes (#1529)

Author: kermanx

docs/.vitepress/config.ts

@@ -148,6 +148,10 @@ const Customizations: (DefaultTheme.NavItemWithLink | DefaultTheme.NavItemChildr
     text: 'Configure Parser',
     link: '/custom/config-parser',
   },
+  {
+    text: 'Configure Routes',
+    link: '/custom/config-routes',
+  },
   {
     text: 'Configure Shortcuts',
     link: '/custom/config-shortcuts',

docs/custom/config-routes.md

@@ -0,0 +1,25 @@
+# Configure Routes
+
+<Environment type="client" />
+
+Add your pages to the Slidev app.
+
+## Usage
+
+Create `./setup/routes.ts` with the following content:
+
+```ts
+import { defineRoutesSetup } from '@slidev/types'
+
+export default defineRoutesSetup((routes) => {
+  return [
+    ...routes,
+    {
+      path: '/my-page',
+      component: () => import('../pages/my-page.vue'),
+    },
+  ]
+})
+```
+
+Learn more about routes in the [Vue Router documentation](https://router.vuejs.org/).

packages/client/routes.ts

@@ -9,7 +9,7 @@ import { createVClickDirectives } from '../modules/v-click'
 import { createVMarkDirective } from '../modules/v-mark'
 import { createVDragDirective } from '../modules/v-drag'
 import { createVMotionDirectives } from '../modules/v-motion'
-import { routes } from '../routes'
+import setupRoutes from '../setup/routes'
 import setups from '#slidev/setups/main'
 
 import '#slidev/styles'
@@ -28,7 +28,7 @@ export default async function setupMain(app: App) {
     history: __SLIDEV_HASH_ROUTE__
       ? createWebHashHistory(import.meta.env.BASE_URL)
       : createWebHistory(import.meta.env.BASE_URL),
-    routes,
+    routes: setupRoutes(),
   })
 
   app.use(router)

packages/client/setup/main.ts

@@ -0,0 +1,80 @@
+import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
+import configs from '#slidev/configs'
+import setups from '#slidev/setups/routes'
+
+export default function setupRoutes() {
+  const routes: RouteRecordRaw[] = []
+
+  if (__SLIDEV_FEATURE_PRESENTER__) {
+    function passwordGuard(to: RouteLocationNormalized) {
+      if (!configs.remote || configs.remote === to.query.password)
+        return true
+      if (configs.remote && to.query.password === undefined) {
+        // eslint-disable-next-line no-alert
+        const password = prompt('Enter password')
+        if (configs.remote === password)
+          return true
+      }
+      if (to.params.no)
+        return { path: `/${to.params.no}` }
+      return { path: '' }
+    }
+
+    routes.push(
+      {
+        name: 'entry',
+        path: '/entry',
+        component: () => import('../pages/entry.vue'),
+      },
+      {
+        name: 'overview',
+        path: '/overview',
+        component: () => import('../pages/overview.vue'),
+      },
+      {
+        name: 'notes',
+        path: '/notes',
+        component: () => import('../pages/notes.vue'),
+        beforeEnter: passwordGuard,
+      },
+      {
+        name: 'presenter',
+        path: '/presenter/:no',
+        component: () => import('../pages/presenter.vue'),
+        beforeEnter: passwordGuard,
+      },
+      {
+        path: '/presenter',
+        redirect: { path: '/presenter/1' },
+      },
+    )
+  }
+
+  if (__SLIDEV_HAS_SERVER__) {
+    routes.push(
+      {
+        name: 'print',
+        path: '/print',
+        component: () => import('../pages/print.vue'),
+      },
+      {
+        path: '/presenter/print',
+        component: () => import('../pages/presenter/print.vue'),
+      },
+    )
+  }
+
+  routes.push(
+    {
+      name: 'play',
+      path: '/:no',
+      component: () => import('../pages/play.vue'),
+    },
+    {
+      path: '',
+      redirect: { path: '/1' },
+    },
+  )
+
+  return setups.reduce((routes, setup) => setup(routes), routes)
+}

packages/client/setup/routes.ts

@@ -28,6 +28,6 @@ function createSetupTemplate(name: string): VirtualModuleTemplate {
 }
 
 // setups
-const setupModules = ['shiki', 'code-runners', 'monaco', 'mermaid', 'main', 'root', 'shortcuts', 'context-menu']
+const setupModules = ['shiki', 'code-runners', 'monaco', 'mermaid', 'main', 'root', 'routes', 'shortcuts', 'context-menu']
 
 export const templateSetups = setupModules.map(createSetupTemplate)

packages/slidev/node/virtual/setups.ts

@@ -97,6 +97,13 @@ declare module '#slidev/setups/shortcuts' {
   export default setups
 }
 
+declare module '#slidev/setups/routes' {
+  import type { RoutesSetup } from '@slidev/types'
+
+  const setups: RoutesSetup[]
+  export default setups
+}
+
 declare module '#slidev/setups/context-menu' {
   import type { ContextMenuSetup } from '@slidev/types'
 

packages/types/client.d.ts

@@ -1,7 +1,7 @@
 import type { Awaitable } from '@antfu/utils'
 import type * as monaco from 'monaco-editor'
 import type { App, ComputedRef, Ref } from 'vue'
-import type { Router } from 'vue-router'
+import type { RouteRecordRaw, Router } from 'vue-router'
 import type mermaid from 'mermaid'
 import type { KatexOptions } from 'katex'
 import type { BuiltinLanguage, BuiltinTheme, CodeOptionsMeta, CodeOptionsThemes, CodeToHastOptionsCommon, Highlighter, LanguageInput } from 'shiki'
@@ -73,6 +73,7 @@ export type PreparserSetup = (filepath: string) => SlidevPreparserExtension
 export type MonacoSetup = (m: typeof monaco) => Awaitable<MonacoSetupReturn | void>
 export type AppSetup = (context: AppContext) => Awaitable<void>
 export type RootSetup = () => Awaitable<void>
+export type RoutesSetup = (routes: RouteRecordRaw[]) => RouteRecordRaw[]
 export type MermaidSetup = () => Partial<MermaidOptions> | void
 export type ShortcutsSetup = (nav: NavOperations, defaultShortcuts: ShortcutOptions[]) => Array<ShortcutOptions>
 export type CodeRunnersSetup = (runners: CodeRunnerProviders) => Awaitable<CodeRunnerProviders | void>
@@ -86,6 +87,8 @@ export const defineShikiSetup = defineSetup<ShikiSetup>
 export const defineUnoSetup = defineSetup<UnoSetup>
 export const defineMonacoSetup = defineSetup<MonacoSetup>
 export const defineAppSetup = defineSetup<AppSetup>
+export const defineRootSetup = defineSetup<RootSetup>
+export const defineRoutesSetup = defineSetup<RoutesSetup>
 export const defineMermaidSetup = defineSetup<MermaidSetup>
 export const defineKatexSetup = defineSetup<KatexSetup>
 export const defineShortcutsSetup = defineSetup<ShortcutsSetup>