feat: new --inspect option

Author: antfu

demo/starter/package.json

@@ -10,7 +10,6 @@
     "@slidev/theme-default": "^0.21.2",
     "@slidev/theme-seriph": "^0.21.3",
     "@slidev/types": "workspace:*",
-    "nodemon": "^2.0.19",
-    "vite-plugin-inspect": "^0.7.1"
+    "nodemon": "^2.0.19"
   }
 }

demo/starter/vite.config.ts

@@ -1,10 +1,6 @@
-import Inspect from 'vite-plugin-inspect'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [
-    Inspect({
-      dev: true,
-    }),
   ],
 })

packages/slidev/node/cli.ts

@@ -63,6 +63,11 @@ cli.command(
       choices: ['error', 'warn', 'info', 'silent'],
       describe: 'log level',
     })
+    .option('inspect', {
+      default: false,
+      type: 'boolean',
+      describe: 'enable the inspect plugin for debugging',
+    })
     .option('force', {
       alias: 'f',
       default: false,
@@ -71,7 +76,7 @@ cli.command(
     })
     .strict()
     .help(),
-  async ({ entry, theme, port: userPort, open, log, remote, force }) => {
+  async ({ entry, theme, port: userPort, open, log, remote, force, inspect }) => {
     if (!fs.existsSync(entry) && !entry.endsWith('.md'))
       entry = `${entry}.md`
 
@@ -94,7 +99,7 @@ cli.command(
     async function initServer() {
       if (server)
         await server.close()
-      const options = await resolveOptions({ entry, remote, theme }, 'dev')
+      const options = await resolveOptions({ entry, remote, theme, inspect }, 'dev')
       port = userPort || await findFreePort(3030)
       server = (await createServer(
         options,
@@ -204,12 +209,17 @@ cli.command(
       type: 'boolean',
       describe: 'allow download as PDF',
     })
+    .option('inspect', {
+      default: false,
+      type: 'boolean',
+      describe: 'enable the inspect plugin for debugging',
+    })
     .strict()
     .help(),
-  async ({ entry, theme, watch, base, download, out }) => {
+  async ({ entry, theme, watch, base, download, out, inspect }) => {
     const { build } = await import('./build')
 
-    const options = await resolveOptions({ entry, theme }, 'build')
+    const options = await resolveOptions({ entry, theme, inspect }, 'build')
     if (download && !options.data.config.download)
       options.data.config.download = download
 
@@ -411,6 +421,8 @@ function printInfo(options: ResolvedSlidevOptions, port?: number, remote?: strin
     if (query)
       console.log(`${dim('  private slide show ')} > ${cyan(`http://localhost:${bold(port)}/${query}`)}`)
     console.log(`${dim('  presenter mode ')}     > ${blue(`http://localhost:${bold(port)}${presenterPath}`)}`)
+    if (options.inspect)
+      console.log(`${dim('  inspector')}           > ${yellow(`http://localhost:${bold(port)}/__inspect/`)}`)
 
     if (remote !== undefined) {
       Object.values(os.networkInterfaces())

packages/slidev/node/options.ts

@@ -42,6 +42,11 @@ export interface SlidevEntryOptions {
    * @default process.cwd()
    */
   userRoot?: string
+
+  /**
+   * Enable inspect plugin
+   */
+  inspect?: boolean
 }
 
 export interface ResolvedSlidevOptions {
@@ -56,6 +61,7 @@ export interface ResolvedSlidevOptions {
   roots: string[]
   mode: 'dev' | 'build'
   remote?: string
+  inspect?: boolean
 }
 
 export interface SlidevPluginOptions extends SlidevEntryOptions {
@@ -116,7 +122,7 @@ export async function resolveOptions(
   mode: ResolvedSlidevOptions['mode'],
   promptForInstallation = true,
 ): Promise<ResolvedSlidevOptions> {
-  const { remote } = options
+  const { remote, inspect } = options
   const {
     entry,
     userRoot,
@@ -175,5 +181,6 @@ export async function resolveOptions(
     addonRoots,
     roots,
     remote,
+    inspect,
   }
 }

packages/slidev/node/plugins/preset.ts

@@ -7,6 +7,7 @@ import Components from 'unplugin-vue-components/vite'
 import RemoteAssets, { DefaultRules } from 'vite-plugin-remote-assets'
 import ServerRef from 'vite-plugin-vue-server-ref'
 import { notNullish } from '@antfu/utils'
+import Inspect from 'vite-plugin-inspect'
 import type { ResolvedSlidevOptions, SlidevPluginOptions, SlidevServerOptions } from '../options'
 import { loadDrawings, writeDrawings } from '../drawings'
 import { createConfigPlugin } from './extendConfig'
@@ -167,6 +168,13 @@ export async function ViteSlidevPlugin(
     createClientSetupPlugin(options),
     createMonacoTypesLoader(),
     createFixPlugins(options),
+
+    options.inspect
+      ? Inspect({
+        dev: true,
+        build: true,
+      })
+      : null,
   ]
     .flat()
     .filter(notNullish)

packages/slidev/package.json

@@ -88,6 +88,7 @@
     "unplugin-icons": "^0.14.9",
     "unplugin-vue-components": "^0.22.6",
     "vite": "^3.1.0",
+    "vite-plugin-inspect": "^0.7.1",
     "vite-plugin-remote-assets": "^0.3.0",
     "vite-plugin-vue-markdown": "~0.20.1",
     "vite-plugin-vue-server-ref": "^0.3.0",