From 5e40829bf1cf856b0db16d83c1ab927f58418445 Mon Sep 17 00:00:00 2001 From: =?utf8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?= Date: Thu, 30 Nov 2023 04:44:28 +0800 Subject: [PATCH] feat(playground): use vite-node --- playground/package.json | 4 +- playground/setup/dev.ts | 60 ++++++++++++++++++++++++++++++ playground/setup/vite-node.ts | 52 ++++++++++++++++++++++++++ playground/setup/vite.ts | 30 +++++++++++++++ playground/setup/vue-plugin.ts | 10 +++++ playground/vite.config.ts | 67 ++-------------------------------- pnpm-lock.yaml | 6 +++ 7 files changed, 164 insertions(+), 65 deletions(-) create mode 100644 playground/setup/dev.ts create mode 100644 playground/setup/vite-node.ts create mode 100644 playground/setup/vite.ts create mode 100644 playground/setup/vue-plugin.ts diff --git a/playground/package.json b/playground/package.json index c89d53db57..ec563071c2 100644 --- a/playground/package.json +++ b/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" } } diff --git a/playground/setup/dev.ts b/playground/setup/dev.ts new file mode 100644 index 0000000000..98dd7c839d --- /dev/null +++ b/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` + } + } + } + } +} diff --git a/playground/setup/vite-node.ts b/playground/setup/vite-node.ts new file mode 100644 index 0000000000..162f5c07c9 --- /dev/null +++ b/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 +} diff --git a/playground/setup/vite.ts b/playground/setup/vite.ts new file mode 100644 index 0000000000..d85e8baa1d --- /dev/null +++ b/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 + } +} diff --git a/playground/setup/vue-plugin.ts b/playground/setup/vue-plugin.ts new file mode 100644 index 0000000000..439aacfaf6 --- /dev/null +++ b/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 +}) diff --git a/playground/vite.config.ts b/playground/vite.config.ts index c45aff7a77..630eb03e54 100644 --- a/playground/vite.config.ts +++ b/playground/vite.config.ts @@ -1,72 +1,11 @@ -import path from 'node:path' -import { type Plugin, defineConfig } from 'vite' -import Vue from '@vitejs/plugin-vue' +import { defineConfig } from 'vite' 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: [ - DevPlugin(), - Vue({ - isProduction: true, - template: { - compiler: CompilerVapor - } - }), - Inspect() - ] + plugins: [DevPlugin(), 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` - } - } - } - } -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bb028af7a4..365eb1e3d2 100644 --- a/pnpm-lock.yaml +++ b/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) -- 2.47.2