From e41429f3ef062142d8f858464ffe95f3792e568f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?= Date: Thu, 30 Nov 2023 05:54:27 +0800 Subject: [PATCH] refactor(playground): extract logic --- playground/package.json | 3 +- playground/setup/{dev.ts => dev.js} | 8 ++- .../setup/{vite-node.ts => vite-node.js} | 10 +++- playground/setup/vite.js | 58 +++++++++++++++++++ playground/setup/vite.ts | 30 ---------- pnpm-lock.yaml | 3 - 6 files changed, 71 insertions(+), 41 deletions(-) rename playground/setup/{dev.ts => dev.js} (91%) rename playground/setup/{vite-node.ts => vite-node.js} (86%) create mode 100644 playground/setup/vite.js delete mode 100644 playground/setup/vite.ts diff --git a/playground/package.json b/playground/package.json index ec563071c..02f0f75b0 100644 --- a/playground/package.json +++ b/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" diff --git a/playground/setup/dev.ts b/playground/setup/dev.js similarity index 91% rename from playground/setup/dev.ts rename to playground/setup/dev.js index 98dd7c839..f68ac01a7 100644 --- a/playground/setup/dev.ts +++ b/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() { diff --git a/playground/setup/vite-node.ts b/playground/setup/vite-node.js similarity index 86% rename from playground/setup/vite-node.ts rename to playground/setup/vite-node.js index 162f5c07c..ac956b973 100644 --- a/playground/setup/vite-node.ts +++ b/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 }, diff --git a/playground/setup/vite.js b/playground/setup/vite.js new file mode 100644 index 000000000..053c536d4 --- /dev/null +++ b/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 +} diff --git a/playground/setup/vite.ts b/playground/setup/vite.ts deleted file mode 100644 index d85e8baa1..000000000 --- a/playground/setup/vite.ts +++ /dev/null @@ -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 - } -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 365eb1e3d..612cd719e 100644 --- a/pnpm-lock.yaml +++ b/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)