refactor(playground): extract vite-hyper-config

playground/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "dev": "node ./setup/vite.js",
-    "build": "vite build"
+    "build": "node ./setup/vite.js build"
   },
   "dependencies": {
     "vue": "workspace:*"
@@ -12,6 +12,7 @@
   "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-node.js

@@ -1,56 +0,0 @@
-// @ts-check
-import { createServer, createLogger } from 'vite'
-import { ViteNodeServer } from 'vite-node/server'
-import { ViteNodeRunner } from 'vite-node/client'
-import { reload } from 'vite-node/hmr'
-import { installSourcemapsSupport } from 'vite-node/source-map'
-import { DevPlugin } from './dev.js'
-
-export const logger = createLogger(undefined, {
-  prefix: '[vite-node]',
-  allowClearScreen: false
-})
-
-/**
- * @param {() => void} onUpdate
- */
-export async function setupViteNode(onUpdate) {
-  const server = await createServer({
-    configFile: false,
-    optimizeDeps: { disabled: true },
-    plugins: [
-      DevPlugin(),
-      {
-        name: 'hmr',
-        async handleHotUpdate({ modules }) {
-          if (modules.length === 0) return
-          await reload(runner, [])
-          onUpdate()
-        }
-      }
-    ],
-    customLogger: logger
-  })
-  await server.pluginContainer.buildStart({})
-  const node = new ViteNodeServer(server, {
-    deps: {
-      inline: ['@vitejs/plugin-vue']
-    }
-  })
-  installSourcemapsSupport({
-    getSourceMap: source => node.getSourceMap(source)
-  })
-
-  const runner = new ViteNodeRunner({
-    root: server.config.root,
-    base: server.config.base,
-    fetchModule(id) {
-      return node.fetchModule(id)
-    },
-    async resolveId(id, importer) {
-      return node.resolveId(id, importer)
-    }
-  })
-
-  return runner
-}

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/setup/vue-plugin.ts

@@ -1,10 +0,0 @@
-import * as CompilerVapor from '@vue/compiler-vapor'
-import * as CompilerSFC from '@vue/compiler-sfc'
-import Vue from '@vitejs/plugin-vue'
-
-export const VuePlugin = Vue({
-  template: {
-    compiler: CompilerVapor
-  },
-  compiler: CompilerSFC
-})

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()
+  ]
 })

pnpm-lock.yaml

@@ -449,6 +449,9 @@ importers:
       vite:
         specifier: ^5.0.2
         version: 5.0.2(@types/node@20.10.0)(terser@5.22.0)
+      vite-hyper-config:
+        specifier: ^0.1.1
+        version: 0.1.1(@types/node@20.10.0)(terser@5.22.0)(vite@5.0.2)
       vite-node:
         specifier: ^0.34.6
         version: 0.34.6(@types/node@20.10.0)(terser@5.22.0)
@@ -6197,6 +6200,27 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /vite-hyper-config@0.1.1(@types/node@20.10.0)(terser@5.22.0)(vite@5.0.2):
+    resolution: {integrity: sha512-Sc9WuuLImezPUG6JUnBU/L0KHZDHRyvLKEU1fEPCR6gBsC9QTnmnX78doRQpKt6P/rRcawlytbA2xt9Qb/kaVQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      vite: ^4.0.0 || ^5.0.0
+    dependencies:
+      cac: 6.7.14
+      picocolors: 1.0.0
+      vite: 5.0.2(@types/node@20.10.0)(terser@5.22.0)
+      vite-node: 0.34.6(@types/node@20.10.0)(terser@5.22.0)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
   /vite-node@0.34.6(@types/node@20.10.0)(terser@5.22.0):
     resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
     engines: {node: '>=v14.18.0'}