feat: support hash router mode

Author: antfu

packages/client/internals/Play.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { isPrintMode, showEditor, windowSize, isScreenVertical, slideScale } from '../state'
-import { next, prev, useSwipeControls } from '../logic/nav'
+import { showEditor, windowSize, isScreenVertical, slideScale } from '../state'
+import { isPrintMode, next, prev, useSwipeControls } from '../logic/nav'
 import { registerShotcuts } from '../logic/shortcuts'
 import Controls from './Controls.vue'
 import SlideContainer from './SlideContainer.vue'

packages/client/logic/nav.ts

@@ -1,15 +1,16 @@
 import { computed, Ref, ref } from 'vue'
 import { isString, SwipeDirection, timestamp, useSwipe } from '@vueuse/core'
-import { query } from '../state'
 import { rawRoutes, router } from '../routes'
 import { configs } from '../env'
+import { useRouteQuery } from './route'
 
 export { rawRoutes }
 
 export const route = computed(() => router.currentRoute.value)
 
 export const isPresenter = computed(() => route.value.path.startsWith('/presenter'))
 
+export const queryClicks = useRouteQuery('clicks', '0')
 export const total = computed(() => rawRoutes.length - 1)
 export const path = computed(() => route.value.path)
 
@@ -25,13 +26,13 @@ export const nextRoute = computed(() => rawRoutes.find(i => i.path === `${Math.m
 export const clicksElements = computed<HTMLElement[]>(() => currentRoute.value?.meta?.__clicksElements || [])
 export const clicks = computed<number>({
   get() {
-    let clicks = +query.clicks || 0
+    let clicks = +(queryClicks.value || 0)
     if (isNaN(clicks))
       clicks = 0
     return clicks
   },
   set(v) {
-    query.clicks = v.toString()
+    queryClicks.value = v.toString()
   },
 })
 
@@ -47,7 +48,6 @@ export function next() {
 export async function prev() {
   if (clicks.value <= 0)
     await prevSlide()
-
   else
     clicks.value -= 1
 }
@@ -63,14 +63,11 @@ export function nextSlide() {
 
 export async function prevSlide(lastClicks = true) {
   const next = Math.max(1, currentPage.value - 1)
-  await go(next)
-  if (lastClicks)
-    clicks.value = clicksTotal.value
+  await go(next, (lastClicks && clicksTotal.value) ? clicksTotal.value : undefined)
 }
 
-export function go(page: number) {
-  clicks.value = 0
-  return router.push(getPath(page))
+export function go(page: number, clicks?: number) {
+  return router.push({ path: getPath(page), query: { ...route.value.query, clicks } })
 }
 
 export function useSwipeControls(root: Ref<HTMLElement | undefined>) {
@@ -109,3 +106,5 @@ export async function downloadPDF() {
     `${configs.title}.pdf`,
   )
 }
+
+export const isPrintMode = computed(() => route.value.query.print !== undefined)

packages/client/logic/route.ts

@@ -0,0 +1,26 @@
+import { computed, nextTick, unref } from 'vue-demi'
+import { router } from '../routes'
+
+export function useRouteQuery<T extends string | string[]>(
+  name: string,
+  defaultValue?: T,
+  {
+    mode = 'replace',
+  } = {},
+) {
+  return computed<any>({
+    get() {
+      const data = router.currentRoute.value.query[name]
+      if (data == null)
+        return defaultValue ?? null
+      if (Array.isArray(data))
+        return data.filter(Boolean)
+      return data
+    },
+    set(v) {
+      nextTick(() => {
+        router[unref(mode) as 'replace' | 'push']({ query: { ...router.currentRoute.value.query, [name]: v } })
+      })
+    },
+  })
+}

packages/client/modules/directives.ts

@@ -1,6 +1,6 @@
 import { App, DirectiveBinding, InjectionKey, Ref, watch } from 'vue'
 import { remove } from '@antfu/utils'
-import { isPrintMode } from '../state'
+import { isPrintMode } from '../logic/nav'
 
 export const injectionClicks: InjectionKey<Ref<number>> = Symbol('v-click-clicks')
 export const injectionClicksElements: InjectionKey<Ref<(Element | string)[]>> = Symbol('v-click-clicks-elements')

packages/client/routes.ts

@@ -1,4 +1,4 @@
-import { createRouter, RouteRecordRaw, createWebHistory } from 'vue-router'
+import { createRouter, RouteRecordRaw, createWebHistory, createWebHashHistory } from 'vue-router'
 import Play from './internals/Play.vue'
 // @ts-expect-error
 import _rawRoutes from '/@slidev/routes'
@@ -33,7 +33,7 @@ if (import.meta.env.DEV) {
 }
 
 export const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: __SLIDEV_HASH_ROUTE__ ? createWebHashHistory(import.meta.env.BASE_URL) : createWebHistory(import.meta.env.BASE_URL),
   routes,
 })
 

packages/client/state/index.ts

@@ -1,4 +1,4 @@
-import { useMagicKeys, useActiveElement, useStorage, useUrlSearchParams, useBreakpoints, breakpointsTailwind, useWindowSize, useFullscreen, useToggle, isClient } from '@vueuse/core'
+import { useMagicKeys, useActiveElement, useStorage, useBreakpoints, breakpointsTailwind, useWindowSize, useFullscreen, useToggle, isClient } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
 export const showOverview = ref(false)
@@ -7,7 +7,6 @@ export const showInfoDialog = ref(false)
 export const showGotoDialog = ref(false)
 
 export const shortcutsEnabled = ref(true)
-export const query = useUrlSearchParams()
 export const breakpoints = useBreakpoints(breakpointsTailwind)
 export const windowSize = useWindowSize()
 export const magicKeys = useMagicKeys()
@@ -25,6 +24,4 @@ export const slideScale = useStorage<number>('slidev-scale', null)
 export const showEditor = useStorage('slidev-show-editor', false)
 export const editorWidth = useStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 100)
 
-export const isPrintMode = computed(() => query.print != null)
-
 export const toggleOverview = useToggle(showOverview)

packages/parser/src/core.ts

@@ -144,6 +144,7 @@ export function parse(
     info: false,
     highlighter: 'prism',
     colorSchema: 'auto',
+    routerMode: 'history',
   }
   const config: SlidevConfig = Object.assign(
     defaultConfig,

packages/slidev/node/cli.ts

@@ -8,11 +8,18 @@ import prompts from 'prompts'
 import { blue, bold, cyan, dim, gray, green, yellow } from 'kolorist'
 import { LogLevel, ViteDevServer } from 'vite'
 import * as parser from '@slidev/parser/fs'
+import { SlidevConfig } from '@slidev/types'
 import { version } from '../package.json'
 import { createServer } from './server'
 import { getThemeRoots, isRelative, ResolvedSlidevOptions, resolveOptions } from './options'
 import { resolveThemeName } from './themes'
 
+const CONFIG_RESTART_FIELDS: (keyof SlidevConfig)[] = [
+  'highlighter',
+  'monaco',
+  'routerMode',
+]
+
 const cli = yargs
   .scriptName('slidev')
   .usage('$0 [args]')
@@ -82,7 +89,7 @@ cli.command(
               console.log(yellow('\n  restarting on theme change\n'))
               initServer()
             }
-            else if (newData.config.monaco !== data.config.monaco || newData.config.highlighter !== data.config.highlighter) {
+            else if (CONFIG_RESTART_FIELDS.some(i => newData.config[i] !== data.config[i])) {
               console.log(yellow('\n  restarting on config change\n'))
               initServer()
             }
@@ -277,6 +284,7 @@ cli.command(
       output,
       timeout,
       dark,
+      routerMode: options.data.config.routerMode,
     })
     console.log(`${green('  ✓ ')}${dim('exported to ')}./${output}\n`)
     server.close()

packages/slidev/node/export.ts

@@ -15,6 +15,7 @@ export interface ExportOptions {
   output?: string
   timeout?: number
   dark?: boolean
+  routerMode?: 'hash' | 'history'
 }
 
 function createSlidevProgress() {
@@ -62,6 +63,7 @@ export async function exportSlides({
   base = '/',
   timeout = 500,
   dark = false,
+  routerMode = 'history',
 }: ExportOptions) {
   if (!packageExists('playwright-chromium'))
     throw new Error('The exporting for Slidev is powered by Playwright, please installed it via `npm i playwright-chromium`')
@@ -83,7 +85,10 @@ export async function exportSlides({
 
     if (dark)
       await page.emulateMedia({ colorScheme: 'dark' })
-    await page.goto(`http://localhost:${port}${base}${no}?print`, {
+    const url = routerMode === 'hash'
+      ? `http://localhost:${port}/#${base}${no}?print`
+      : `http://localhost:${port}${base}${no}?print`
+    await page.goto(url, {
       waitUntil: 'networkidle',
     })
     await page.waitForTimeout(timeout)

packages/slidev/node/plugins/config.ts

@@ -16,6 +16,8 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
       const injection: InlineConfig = {
         define: {
           __SLIDEV_CLIENT_ROOT__: JSON.stringify(toAtFS(options.clientRoot)),
+          __SLIDEV_HASH_ROUTE__: options.data.config.routerMode === 'hash',
+          __DEV__: options.mode === 'dev',
         },
         resolve: {
           alias: {