feat: server reload on theme change

Author: antfu

demo/package.json

@@ -2,8 +2,8 @@
   "private": true,
   "version": "0.0.0-beta.1",
   "scripts": {
-    "dev": "nodemon -w '../packages/slidev/dist/*.js' --exec 'slidev'",
-    "starter": "nodemon -w '../packages/slidev/dist/*.js' --exec 'slidev starter.md'",
+    "dev": "nodemon -w '../packages/slidev/dist/*.js' --exec 'slidev --open=false'",
+    "starter": "nodemon -w '../packages/slidev/dist/*.js' --exec 'slidev starter.md --open=false'",
     "build": "slidev build",
     "export": "slidev export"
   },

packages/slidev/node/build.ts

@@ -2,19 +2,24 @@ import { promises as fs } from 'fs'
 import { build as viteBuild, InlineConfig, mergeConfig } from 'vite'
 import { ViteSlidevPlugin } from './plugins/preset'
 import { getIndexHtml } from './common'
-import { resolveOptions } from './plugins/options'
+import { resolveOptions, SlidevEntryOptions, SlidevPluginOptions } from './plugins/options'
 
-export async function build(entry: string, config: InlineConfig = {}) {
-  const options = await resolveOptions(entry)
-  await fs.writeFile('index.html', await getIndexHtml(options), 'utf-8')
+export async function build(
+  entry: SlidevEntryOptions = {},
+  pluginOptions: Omit<SlidevPluginOptions, 'slidev'> = {},
+  viteConfig: InlineConfig = {},
+) {
+  const resolved = await resolveOptions(entry)
+  await fs.writeFile('index.html', await getIndexHtml(resolved), 'utf-8')
   try {
     await viteBuild(
       mergeConfig(
-        config,
+        viteConfig,
         {
           plugins: [
-            await ViteSlidevPlugin({
-              resolved: options,
+            ViteSlidevPlugin({
+              ...pluginOptions,
+              slidev: resolved,
             }),
           ],
         },

packages/slidev/node/cli.ts

@@ -2,7 +2,8 @@ import path from 'path'
 import fs from 'fs-extra'
 import yargs, { Argv } from 'yargs'
 import { prompt } from 'enquirer'
-import { blue } from 'kolorist'
+import { green, yellow } from 'kolorist'
+import { ViteDevServer } from 'vite'
 import { version } from '../package.json'
 import { build } from './build'
 import { createServer } from './server'
@@ -15,7 +16,7 @@ function commonOptions(args: Argv<{}>) {
       type: 'string',
       describe: 'path to the slides markdown entry',
     })
-    .option('template', {
+    .option('theme', {
       alias: 't',
       type: 'string',
       describe: 'overide theme',
@@ -47,7 +48,7 @@ cli.command(
       describe: 'open in browser',
     })
     .help(),
-  async({ entry, port, open }) => {
+  async({ entry, theme, port, open }) => {
     if (!fs.existsSync(entry)) {
       const { create } = await prompt<{create: boolean}>({
         name: 'create',
@@ -60,14 +61,35 @@ cli.command(
         process.exit(0)
     }
 
-    const server = await createServer(entry, {
-      server: {
-        port,
-        open,
-      },
-    })
-    server.listen()
-    server.watcher.add(entry)
+    let server: ViteDevServer | undefined
+
+    async function initServer() {
+      if (server)
+        await server.close()
+      server = (await createServer(
+        {
+          entry,
+          theme,
+        },
+        {
+          onDataReload(newData, data) {
+            if (!theme && newData.config.theme !== data.config.theme) {
+              console.log(yellow('Slidev reloaded on theme change'))
+              initServer()
+            }
+          },
+        },
+        {
+          server: {
+            port,
+            open,
+          },
+        },
+      )).server
+      await server.listen()
+    }
+
+    initServer()
   },
 )
 
@@ -76,8 +98,8 @@ cli.command(
   'Build hostable SPA',
   args => commonOptions(args)
     .help(),
-  async({ entry }) => {
-    await build(entry)
+  async(args) => {
+    await build(args)
   },
 )
 
@@ -102,12 +124,25 @@ cli.command(
       describe: 'path to the the port output',
     })
     .help(),
-  async({ entry, output }) => {
+  async({ entry, theme, output }) => {
     output = output || `${path.basename(entry, '.md')}.pdf`
     process.env.NODE_ENV = 'production'
     const { genratePDF } = await import('./export')
-    await genratePDF(entry, output, { logLevel: 'error' })
-    console.log(blue(`PDF Exported: ./${output}`))
+    const port = 12445
+    const { server, resolved } = await createServer(
+      { entry, theme },
+      {},
+      {
+        server: { port },
+        logLevel: 'error',
+        clearScreen: true,
+      },
+    )
+    await server.listen()
+    parser.filterDisabled(resolved.data)
+    await genratePDF(port, resolved.data.slides.length, output)
+    console.log(green(`PDF Exported: ./${output}`))
+    server.close()
     process.exit(0)
   },
 )

packages/slidev/node/export.ts

@@ -1,21 +1,9 @@
 import { promises as fs } from 'fs'
 import { chromium } from 'playwright'
-import { InlineConfig } from 'vite'
 import { PDFDocument } from 'pdf-lib'
 import { yellow } from 'kolorist'
-import { createServer } from './server'
-import { filterDisabled, load } from './parser'
-
-export async function genratePDF(entry = 'slides.md', output = 'slides.pdf', config: InlineConfig = {}) {
-  const { slides } = filterDisabled(await load(entry))
-  const server = await createServer(entry, {
-    ...config,
-    logLevel: 'silent',
-    clearScreen: false,
-  })
-  const port = 18724
-  await server.listen(port)
 
+export async function genratePDF(port = 18724, pages = 0, output = 'slides.pdf') {
   const browser = await chromium.launch()
   const context = await browser.newContext({
     viewport: {
@@ -27,9 +15,8 @@ export async function genratePDF(entry = 'slides.md', output = 'slides.pdf', con
   const page = await context.newPage()
 
   const buffers: Buffer[] = []
-  const pagesCount = slides.length
-  for (let i = 0; i < pagesCount; i++) {
-    console.log(yellow(`Rendering page ${i + 1} / ${pagesCount}`))
+  for (let i = 0; i < pages; i++) {
+    console.log(`${yellow('Rendering')} page ${i + 1} / ${pages}`)
     await page.goto(`http://localhost:${port}/${i}?print`, {
       waitUntil: 'networkidle',
     })
@@ -62,6 +49,5 @@ export async function genratePDF(entry = 'slides.md', output = 'slides.pdf', con
   const buffer = await mergedPdf.save()
   await fs.writeFile(output, buffer)
   browser.close()
-  server.close()
   return output
 }

packages/slidev/node/parser.ts

@@ -2,7 +2,7 @@ import { promises as fs } from 'fs'
 import matter from 'gray-matter'
 import YAML from 'js-yaml'
 
-export interface SlidesMarkdownInfo {
+export interface SlideInfo {
   start: number
   end: number
   raw: string
@@ -25,9 +25,9 @@ export interface SlidevConfig {
   theme: string
 }
 
-export interface SlidesMarkdown {
+export interface SlidevMarkdown {
   filepath?: string
-  slides: SlidesMarkdownInfo[]
+  slides: SlideInfo[]
   options: ParseOptions
   raw: string
   config: SlidevConfig
@@ -42,13 +42,13 @@ export async function load(
   return parse(markdown, filepath, options)
 }
 
-export async function save(data: SlidesMarkdown, filepath?: string) {
+export async function save(data: SlidevMarkdown, filepath?: string) {
   filepath = filepath || data.filepath!
 
   await fs.writeFile(filepath, stringify(data), 'utf-8')
 }
 
-export function stringify(data: SlidesMarkdown) {
+export function stringify(data: SlidevMarkdown) {
   return `${
     data.slides
       .map(stringifySlide)
@@ -57,12 +57,12 @@ export function stringify(data: SlidesMarkdown) {
   }\n`
 }
 
-export function filterDisabled(data: SlidesMarkdown) {
+export function filterDisabled(data: SlidevMarkdown) {
   data.slides = data.slides.filter(i => !i.frontmatter?.disabled)
   return data
 }
 
-function stringifySlide(data: SlidesMarkdownInfo, idx = 1) {
+function stringifySlide(data: SlideInfo, idx = 1) {
   if (!data.raw)
     prettifySlide(data)
 
@@ -71,15 +71,15 @@ function stringifySlide(data: SlidesMarkdownInfo, idx = 1) {
     : `------\n${data.raw}`
 }
 
-function prettifySlide(data: SlidesMarkdownInfo) {
+function prettifySlide(data: SlideInfo) {
   data.content = `\n${data.content.trim()}\n\n`
   data.raw = Object.keys(data.frontmatter || {}).length
     ? `---\n${YAML.safeDump(data.frontmatter).trim()}\n---\n${data.content}`
     : data.content
   return data
 }
 
-export function prettify(data: SlidesMarkdown) {
+export function prettify(data: SlidevMarkdown) {
   data.slides.forEach(prettifySlide)
   return data
 }
@@ -88,9 +88,9 @@ export function parse(
   markdown: string,
   filepath?: string,
   options: ParseOptions = {},
-): SlidesMarkdown {
+): SlidevMarkdown {
   const lines = markdown.split(/\n/g)
-  const slides: SlidesMarkdownInfo[] = []
+  const slides: SlideInfo[] = []
   let start = 0
   let dividers = 0
 

packages/slidev/node/plugins/loaders.ts

@@ -4,7 +4,7 @@ import { isTruthy, notNullish, objectMap } from '@antfu/utils'
 import type { Connect } from 'vite'
 import fg from 'fast-glob'
 import * as parser from '../parser'
-import { ResolvedSlidevOptions } from './options'
+import { ResolvedSlidevOptions, SlidevPluginOptions } from './options'
 
 const regexId = /^\/\@slidev\/slide\/(\d+)\.(md|json)(?:\?import)?$/
 const regexIdQuery = /(\d+?)\.(md|json)$/
@@ -41,7 +41,7 @@ export function sendHmrReload(server: ViteDevServer, modules: ModuleNode[]) {
   })
 }
 
-export function createSlidesLoader({ data, entry, clientRoot, themeRoot, userRoot }: ResolvedSlidevOptions): Plugin[] {
+export function createSlidesLoader({ data, entry, clientRoot, themeRoot, userRoot }: ResolvedSlidevOptions, pluginOptions: SlidevPluginOptions): Plugin[] {
   const slidePrefix = '/@slidev/slides/'
   const hmrNextModuleIds: string[] = []
 
@@ -87,10 +87,6 @@ export function createSlidesLoader({ data, entry, clientRoot, themeRoot, userRoo
 
         const newData = await parser.load(entry)
 
-        if (data.config.theme !== newData.config.theme)
-          console.log('Theme changed')
-        // TODO: restart the server
-
         const moduleIds: (string | false)[] = [
           ...hmrNextModuleIds,
         ]
@@ -117,11 +113,14 @@ export function createSlidesLoader({ data, entry, clientRoot, themeRoot, userRoo
             `${slidePrefix}${i}.json`,
           )
         }
+
         const moduleEntries = moduleIds
           .filter(isTruthy)
           .map(id => ctx.server.moduleGraph.getModuleById(id as string))
           .filter(notNullish)
 
+        pluginOptions.onDataReload?.(newData, data)
+
         data = newData
 
         moduleEntries.map(m => ctx.server.moduleGraph.invalidateModule(m))

packages/slidev/node/plugins/options.ts

@@ -7,24 +7,31 @@ import WindiCSS from 'vite-plugin-windicss'
 import RemoteAssets from 'vite-plugin-remote-assets'
 import { ArgumentsType } from '@antfu/utils'
 import * as parser from '../parser'
+import { SlidevMarkdown } from '../parser'
 
-export interface SlidevOptions {
+export interface SlidevEntryOptions {
   /**
    * Markdown entry
    *
    * @default 'slides.md'
    */
   entry?: string
+
   /**
-   * Theme name
-   *
-   * @default `@slidev/theme-default`
+   * Theme id
    */
   theme?: string
+
+  /**
+   * Root path
+   *
+   * @default process.cwd()
+   */
+  userRoot?: string
 }
 
 export interface ResolvedSlidevOptions {
-  data: parser.SlidesMarkdown
+  data: SlidevMarkdown
   entry: string
   userRoot: string
   cliRoot: string
@@ -33,14 +40,15 @@ export interface ResolvedSlidevOptions {
   themeRoot: string
 }
 
-export interface SlidevPluginOptions extends SlidevOptions {
+export interface SlidevPluginOptions extends SlidevEntryOptions {
   vue?: ArgumentsType<typeof Vue>[0]
   markdown?: ArgumentsType<typeof Markdown>[0]
   components?: ArgumentsType<typeof ViteComponents>[0]
   windicss?: ArgumentsType<typeof WindiCSS>[0]
   icons?: ArgumentsType<typeof ViteIcons>[0]
   remoteAssets?: ArgumentsType<typeof RemoteAssets>[0]
-  resolved?: ResolvedSlidevOptions
+  slidev: ResolvedSlidevOptions
+  onDataReload?: (newData: SlidevMarkdown, data: SlidevMarkdown) => void
 }
 
 export function getClientRoot() {
@@ -55,9 +63,13 @@ export function getThemeRoot(name: string) {
   return dirname(require.resolve(`${name}/package.json`))
 }
 
-export async function resolveOptions(entry = 'slides.md', userRoot = process.cwd()): Promise<ResolvedSlidevOptions> {
+export async function resolveOptions(options: SlidevEntryOptions): Promise<ResolvedSlidevOptions> {
+  const {
+    entry = 'slides.md',
+    userRoot = process.cwd(),
+  } = options
   const data = await parser.load(entry)
-  const theme = data.config.theme
+  const theme = options.theme || data.config.theme
 
   return {
     data,