feat(playground): use vite-node

playground/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "tsx ./setup/vite.ts",
     "build": "vite build"
   },
   "dependencies": {
@@ -11,7 +11,9 @@
   },
   "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.ts

@@ -0,0 +1,60 @@
+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)
+
+export function DevPlugin(): Plugin {
+  return {
+    name: 'dev-plugin',
+    config() {
+      return {
+        resolve: {
+          alias: {
+            'vue/vapor': resolve('vue/vapor/index.mjs'),
+            vue: resolve('vue/src/runtime.ts'),
+            '@vue/vapor': resolve('vue-vapor/src'),
+
+            '@vue/runtime-core': resolve('runtime-core/src'),
+            '@vue/runtime-dom': resolve('runtime-dom/src'),
+            '@vue/runtime-vapor': resolve('runtime-vapor/src'),
+
+            '@vue/compiler-core': resolve('compiler-core/src'),
+            '@vue/compiler-dom': resolve('compiler-dom/src'),
+            '@vue/compiler-vapor': resolve('compiler-vapor/src'),
+
+            '@vue/compiler-sfc': resolve('compiler-sfc/src'),
+            '@vue/compiler-ssr': resolve('compiler-ssr/src'),
+
+            '@vue/reactivity': resolve('reactivity/src'),
+            '@vue/shared': resolve('shared/src')
+          }
+        },
+        define: {
+          __COMMIT__: `"__COMMIT__"`,
+          __VERSION__: `"0.0.0"`,
+          __DEV__: `true`,
+          // this is only used during Vue's internal tests
+          __TEST__: `false`,
+          // If the build is expected to run directly in the browser (global / esm builds)
+          __BROWSER__: String(true),
+          __GLOBAL__: String(false),
+          __ESM_BUNDLER__: String(true),
+          __ESM_BROWSER__: String(false),
+          // is targeting Node (SSR)?
+          __NODE_JS__: String(false),
+          // need SSR-specific branches?
+          __SSR__: String(false),
+
+          // 2.x compat build
+          __COMPAT__: String(false),
+
+          // feature flags
+          __FEATURE_SUSPENSE__: `true`,
+          __FEATURE_OPTIONS_API__: `true`,
+          __FEATURE_PROD_DEVTOOLS__: `false`
+        }
+      }
+    }
+  }
+}

playground/setup/vite-node.ts

@@ -0,0 +1,52 @@
+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'
+
+const logger = createLogger(undefined, {
+  prefix: '[vite-node]',
+  allowClearScreen: false
+})
+
+export async function setupViteNode(onUpdate: () => void) {
+  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.ts

@@ -0,0 +1,30 @@
+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
+  }
+}

playground/setup/vue-plugin.ts

@@ -0,0 +1,10 @@
+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,72 +1,11 @@
-import path from 'node:path'
+import { defineConfig } from 'vite'
-import { type Plugin, defineConfig } from 'vite'
-import Vue from '@vitejs/plugin-vue'
 import Inspect from 'vite-plugin-inspect'
-import * as CompilerVapor from '../packages/compiler-vapor/src'
+import { DevPlugin } from './setup/dev'
 
 export default defineConfig({
   build: {
     target: 'esnext'
   },
   clearScreen: false,
-  plugins: [
+  plugins: [DevPlugin(), Inspect()]
-    DevPlugin(),
-    Vue({
-      isProduction: true,
-      template: {
-        compiler: CompilerVapor
-      }
-    }),
-    Inspect()
-  ]
 })
-
-function DevPlugin(): Plugin {
-  const resolve = (p: string) => path.resolve(__dirname, '..', p)
-  return {
-    name: 'dev-plugin',
-    config() {
-      return {
-        resolve: {
-          alias: {
-            'vue/vapor': resolve('packages/vue/vapor/index.mjs'),
-            vue: resolve('packages/vue/src/runtime.ts'),
-            '@vue/vapor': resolve('packages/vue-vapor/src/index.ts'),
-            '@vue/runtime-dom': resolve('packages/runtime-dom/src/index.ts'),
-            '@vue/runtime-core': resolve('packages/runtime-core/src/index.ts'),
-            '@vue/shared': resolve('packages/shared/src/index.ts'),
-            '@vue/reactivity': resolve('packages/reactivity/src/index.ts'),
-            '@vue/compiler-vapor': resolve(
-              'packages/compiler-vapor/src/index.ts'
-            ),
-            '@vue/runtime-vapor': resolve('packages/runtime-vapor/src/index.ts')
-          }
-        },
-        define: {
-          __COMMIT__: `"__COMMIT__"`,
-          __VERSION__: `"0.0.0"`,
-          __DEV__: `true`,
-          // this is only used during Vue's internal tests
-          __TEST__: `false`,
-          // If the build is expected to run directly in the browser (global / esm builds)
-          __BROWSER__: String(true),
-          __GLOBAL__: String(false),
-          __ESM_BUNDLER__: String(true),
-          __ESM_BROWSER__: String(false),
-          // is targeting Node (SSR)?
-          __NODE_JS__: String(false),
-          // need SSR-specific branches?
-          __SSR__: String(false),
-
-          // 2.x compat build
-          __COMPAT__: String(false),
-
-          // feature flags
-          __FEATURE_SUSPENSE__: `true`,
-          __FEATURE_OPTIONS_API__: `true`,
-          __FEATURE_PROD_DEVTOOLS__: `false`
-        }
-      }
-    }
-  }
-}

pnpm-lock.yaml

@@ -446,9 +446,15 @@ 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)
+      vite-node:
+        specifier: ^0.34.6
+        version: 0.34.6(@types/node@20.10.0)(terser@5.22.0)
       vite-plugin-inspect:
         specifier: ^0.7.42
         version: 0.7.42(rollup@4.1.4)(vite@5.0.2)