refactor(playground): extract logic

playground/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "tsx ./setup/vite.ts",
+    "dev": "node ./setup/vite.js",
     "build": "vite build"
   },
   "dependencies": {
@@ -11,7 +11,6 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.0",
-    "tsx": "^4.6.0",
     "vite": "^5.0.2",
     "vite-node": "^0.34.6",
     "vite-plugin-inspect": "^0.7.42"

playground/setup/dev.js

@@ -1,10 +1,12 @@
+// @ts-check
 import path from 'node:path'
-import type { Plugin } from 'vite'
 
 const dirname = path.dirname(new URL(import.meta.url).pathname)
-const resolve = (p: string) => path.resolve(dirname, '../../packages', p)
+const resolve = (/** @type {string} */ p) =>
+  path.resolve(dirname, '../../packages', p)
 
-export function DevPlugin(): Plugin {
+/** @returns {import('vite').Plugin} */
+export function DevPlugin() {
   return {
     name: 'dev-plugin',
     config() {

playground/setup/vite-node.js

@@ -1,16 +1,20 @@
+// @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'
+import { DevPlugin } from './dev.js'
 
-const logger = createLogger(undefined, {
+export const logger = createLogger(undefined, {
   prefix: '[vite-node]',
   allowClearScreen: false
 })
 
-export async function setupViteNode(onUpdate: () => void) {
+/**
+ * @param {() => void} onUpdate
+ */
+export async function setupViteNode(onUpdate) {
   const server = await createServer({
     configFile: false,
     optimizeDeps: { disabled: true },

playground/setup/vite.js

@@ -0,0 +1,58 @@
+// @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()
+
+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
+  }
+}
+
+/**
+ * @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/vite.ts

@@ -1,30 +0,0 @@
-import path from 'node:path'
-import { createServer } from 'vite'
-import { setupViteNode } from './vite-node'
-
-const dirname = path.dirname(new URL(import.meta.url).pathname)
-main()
-
-async function main() {
-  const runner = await setupViteNode(async () => {
-    const VuePlugin = await getVuePlugin()
-    server.config.inlineConfig.plugins = [VuePlugin]
-    server.restart()
-  })
-
-  const VuePlugin = await getVuePlugin()
-  const server = await createServer({
-    plugins: [VuePlugin]
-  })
-  await server.listen()
-  server.printUrls()
-  server.bindCLIShortcuts({
-    print: true
-  })
-
-  async function getVuePlugin() {
-    const file = path.resolve(dirname, 'vue-plugin.ts')
-    const mod = (await runner.executeId(file)) as typeof import('./vue-plugin')
-    return mod.VuePlugin
-  }
-}

pnpm-lock.yaml

@@ -446,9 +446,6 @@ importers:
       '@vitejs/plugin-vue':
         specifier: ^4.5.0
         version: 4.5.0(vite@5.0.2)(vue@packages+vue)
-      tsx:
-        specifier: ^4.6.0
-        version: 4.6.0
       vite:
         specifier: ^5.0.2
         version: 5.0.2(@types/node@20.10.0)(terser@5.22.0)