feat(admin): use Vite as middleware on dev (#500)

* feat(admin): use Vite as middleware on dev

close #293

* chore: fix build

* feat(admin): dark mode (#502)

Author: antfu

package.json

@@ -30,14 +30,14 @@
   ],
   "scripts": {
     "build": "rm -rf dist && siroc build",
-    "dev": "BUILD_ADMIN=true nuxt dev docs",
+    "dev": "ADMIN_DEV=true nuxt dev docs",
     "dev:nuxtjs": "nuxt dev nuxtjs.org",
-    "dev:admin": "vite --config src/admin/vite.config.ts",
+    "dev:admin": "vite --config src/admin/app/vite.config.ts",
     "generate": "nuxt generate --force-build docs",
     "generate:nuxtjs": "nuxt generate --force-build nuxtjs.org",
     "start": "nuxt start docs",
     "start:nuxtjs": "nuxt start nuxtjs.org",
-    "play": "BUILD_ADMIN=true nuxt dev playground",
+    "play": "ADMIN_DEV=true nuxt dev playground",
     "lint": "eslint --ext .ts,.js,.vue .",
     "prepare": "yarn link && yarn link docus && vue-demi-switch 3 vue3",
     "release": "yarn test && standard-version && git push --follow-tags && npm publish",

siroc.config.ts

@@ -10,7 +10,7 @@ export default defineSirocConfig({
     'build:extend'() {
       // eslint-disable-next-line no-console
       console.log('📝 Building the admin app')
-      execSync('npx vite --config src/admin/vite.config.ts build')
+      execSync('npx vite --config src/admin/app/vite.config.ts build', { stdio: 'inherit' })
     }
   }
 })

src/admin/vite.config.ts renamed to src/admin/app/vite.config.ts

@@ -1,13 +1,13 @@
-import { join, resolve } from 'path'
+import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import WindiCSS from 'vite-plugin-windicss'
 import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
 import ViteComponents from 'vite-plugin-components'
-import { dependencies, devDependencies } from '../../package.json'
+import { dependencies, devDependencies } from '../../../package.json'
 
 const r = path => resolve(__dirname, path)
-const root = join(__dirname, 'app')
+const root = __dirname
 
 export default defineConfig({
   root,
@@ -20,7 +20,7 @@ export default defineConfig({
     WindiCSS({
       root,
       scan: {
-        include: [r('app/**/*')]
+        include: [r('**/*')]
       }
     }),
     ViteComponents({

src/admin/index.ts

@@ -1,9 +1,9 @@
-import { execSync } from 'child_process'
 import { join } from 'upath'
 import chalk from 'chalk'
 import { NuxtOptionsServer } from '@nuxt/types/config/server'
 import serveStatic from 'serve-static'
 import { Module } from '@nuxt/types'
+import { createServer as createViteServer } from 'vite'
 import api from './api'
 
 export default <Module>function () {
@@ -12,43 +12,6 @@ export default <Module>function () {
   process.options = nuxt.options
   process.previewUrl = 'http://localhost:4000'
 
-  addServerMiddleware({
-    path: '/admin/api',
-    handler: api
-  })
-
-  // TODO: Implement Vite as server middleware/proxy, so we can remove this
-  // Build the admin
-  if (process.env.BUILD_ADMIN) execSync('npx vite --config src/admin/vite.config.ts build')
-
-  this.addServerMiddleware({
-    path: '/admin/',
-    handler: serveStatic(join(__dirname, 'app/dist'))
-  })
-
-  // TODO: Implement Vite as server middleware/proxy
-  //       instead of using the built version.
-  /* if (process.env.ADMIN_DEV && false) {
-    // Start the admin in development
-    const viteServer = await createServer({
-      configFile: false,
-      ...viteConfig
-    })
-    await viteServer.listen()
-    const viteUrl = `http://localhost:${viteServer.config.server.port}`
-
-    // TODO: handle when Array syntax
-    const proxy = (this.options.proxy = this.options.proxy || {})
-    proxy['/admin/'] = {
-      target: viteUrl,
-      pathRewrite: {
-        '^/admin/': '/'
-      }
-    }
-
-    this.requireModule('@nuxtjs/proxy')
-  } */
-
   // Add runtime plugin
   if (options.dev) this.options.plugins.push(require.resolve(join(__dirname, '/runtime/plugin')))
 
@@ -60,4 +23,45 @@ export default <Module>function () {
       chalk.bold('📝 Admin: ') + chalk.underline.yellow(`${process.previewUrl}/admin/`)
     )
   })
+
+  if (process.env.ADMIN_DEV) {
+    // use Vite as middleware
+    const server = createViteServer({
+      root: join(__dirname, 'app'),
+      server: {
+        middlewareMode: 'html'
+      },
+      plugins: [
+        {
+          name: 'docus:admin-api',
+          configureServer(server) {
+            server.middlewares.use('/api', api)
+          }
+        }
+      ]
+    })
+
+    nuxt.hook('render:setupMiddleware', async () => {
+      const middleware = (await server).middlewares
+
+      // remove Vite's base middleware since it's already handled by connect route
+      // it's right before '/__open-in-editor' middleware
+      const viteBaseMiddlewareIndex = middleware.stack.findIndex(i => i.route === '/__open-in-editor') - 1
+      if (viteBaseMiddlewareIndex >= 0) {
+        middleware.stack.splice(viteBaseMiddlewareIndex, 1)
+      }
+
+      nuxt.server.app.use('/admin/', middleware)
+    })
+  } else {
+    // use built dist
+    addServerMiddleware({
+      path: '/admin/',
+      handle: serveStatic(join(__dirname, 'app/dist'))
+    })
+    addServerMiddleware({
+      path: '/admin/api',
+      handler: api
+    })
+  }
 }