refactor(playground): extract vite-hyper-config

playground/package.json

@@ -4,14 +4,15 @@
   "type": "module",
   "scripts": {
     "dev": "node ./setup/vite.js",
-    "build": "vite build"
+    "build": "node ./setup/vite.js build"
   },
   "dependencies": {
     "vue": "workspace:*"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.0",
     "vite": "^5.0.2",
+    "vite-hyper-config": "^0.1.1",
     "vite-node": "^0.34.6",
     "vite-plugin-inspect": "^0.7.42"
   }

playground/setup/vite.js

@@ -1,58 +1,14 @@
 // @ts-check
-import path from 'node:path'
-import { createServer, version } from 'vite'
-import { setupViteNode, logger } from './vite-node.js'
-import colors from 'picocolors'
-import minimist from 'minimist'
 
-const dirname = path.dirname(new URL(import.meta.url).pathname)
-main()
+import { startVite } from 'vite-hyper-config'
+import { DevPlugin } from './dev.js'
 
-async function main() {
-  logger.info('Starting server...', { timestamp: true })
-  const runner = await setupViteNode(async () => {
-    const VuePlugin = await getVuePlugin()
-    server.config.inlineConfig.plugins = [VuePlugin]
-    server.restart()
-  })
-
-  const VuePlugin = await getVuePlugin()
-  const server = await startViteServer({
-    plugins: [VuePlugin]
-  })
-
-  async function getVuePlugin() {
-    /** @type { typeof import('./vue-plugin') } */
-    const mod = await runner.executeId(path.resolve(dirname, 'vue-plugin.ts'))
-    return mod.VuePlugin
+startVite(
+  undefined,
+  { plugins: [DevPlugin()] },
+  {
+    deps: {
+      inline: ['@vitejs/plugin-vue']
+    }
   }
-}
-
-/**
- * @param {import('vite').InlineConfig} inlineConfig
- */
-async function startViteServer(inlineConfig) {
-  const args = minimist(process.argv.slice(2))
-  const server = await createServer({
-    configFile: args.c || args.config,
-    logLevel: args.l || args.logLevel,
-    optimizeDeps: { force: args.force },
-    server: {
-      host: args.host,
-      port: args.port,
-      open: args.open,
-      cors: args.cors,
-      strictPort: args.strictPort
-    },
-    ...inlineConfig
-  })
-  await server.listen()
-  server.config.logger.info(
-    `\n  ${colors.green(`${colors.bold('VITE')} v${version}`)}\n`
-  )
-  server.printUrls()
-  server.bindCLIShortcuts({
-    print: true
-  })
-  return server
-}
+)

playground/vite.config.ts

@@ -1,11 +1,23 @@
 import { defineConfig } from 'vite'
 import Inspect from 'vite-plugin-inspect'
 import { DevPlugin } from './setup/dev'
+import Vue from '@vitejs/plugin-vue'
+import * as CompilerVapor from '@vue/compiler-vapor'
+import * as CompilerSFC from '@vue/compiler-sfc'
 
 export default defineConfig({
   build: {
     target: 'esnext'
   },
   clearScreen: false,
-  plugins: [DevPlugin(), Inspect()]
+  plugins: [
+    Vue({
+      template: {
+        compiler: CompilerVapor
+      },
+      compiler: CompilerSFC
+    }),
+    DevPlugin(),
+    Inspect()
+  ]
 })