From ed338018c016a853613b9bf0957c7f572ac1d900 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Thu, 5 Dec 2024 13:58:11 +0900 Subject: [PATCH 1/4] wip: test vue plugin --- packages/vite/misc/rolldown-runtime.js | 2 ++ .../src/node/server/environments/rolldown.ts | 15 +++++++++++++ .../rolldown-dev-vue/__tests__/basic.spec.ts | 18 +++++++++++++++ playground/rolldown-dev-vue/index.html | 10 +++++++++ playground/rolldown-dev-vue/package.json | 16 ++++++++++++++ playground/rolldown-dev-vue/src/App.vue | 11 ++++++++++ playground/rolldown-dev-vue/src/main.js | 4 ++++ playground/rolldown-dev-vue/vite.config.ts | 20 +++++++++++++++++ pnpm-lock.yaml | 22 +++++++++++++++++++ 9 files changed, 118 insertions(+) create mode 100644 playground/rolldown-dev-vue/__tests__/basic.spec.ts create mode 100644 playground/rolldown-dev-vue/index.html create mode 100644 playground/rolldown-dev-vue/package.json create mode 100644 playground/rolldown-dev-vue/src/App.vue create mode 100644 playground/rolldown-dev-vue/src/main.js create mode 100644 playground/rolldown-dev-vue/vite.config.ts diff --git a/packages/vite/misc/rolldown-runtime.js b/packages/vite/misc/rolldown-runtime.js index 1a2ce4e5cb1b3c..86b99004b9b7cd 100644 --- a/packages/vite/misc/rolldown-runtime.js +++ b/packages/vite/misc/rolldown-runtime.js @@ -126,6 +126,8 @@ var rolldown_runtime = (self.rolldown_runtime = { }) } }, + // TODO: import.meta.hot.on + on: () => {}, }, }) this.executeModuleStack.push(id) diff --git a/packages/vite/src/node/server/environments/rolldown.ts b/packages/vite/src/node/server/environments/rolldown.ts index 225d05ca716255..9205e4b4aef095 100644 --- a/packages/vite/src/node/server/environments/rolldown.ts +++ b/packages/vite/src/node/server/environments/rolldown.ts @@ -205,6 +205,7 @@ class RolldownEnvironment extends DevEnvironment { 'vite:css', 'vite:css-post', 'vite:asset', + 'vite:vue', ].includes(p.name) || [ 'AliasPlugin', @@ -230,6 +231,20 @@ class RolldownEnvironment extends DevEnvironment { patchRuntimePlugin(this), patchCssPlugin(), reactRefreshPlugin(), + { + // TODO: import.meta not supported by app format + name: 'patch-import-meta', + transform: { + filter: { + code: [/import\.meta\.hot/], + }, + handler(code) { + const output = new MagicString(code) + output.replaceAll('import.meta.hot', 'module.hot') + return { code: output.toString(), map: output.generateMap() } + }, + }, + }, ], moduleTypes: { '.css': 'js', diff --git a/playground/rolldown-dev-vue/__tests__/basic.spec.ts b/playground/rolldown-dev-vue/__tests__/basic.spec.ts new file mode 100644 index 00000000000000..7a47a7182ace0b --- /dev/null +++ b/playground/rolldown-dev-vue/__tests__/basic.spec.ts @@ -0,0 +1,18 @@ +import { test } from 'vitest' +import { editFile, isBuild, page, viteTestUrl } from '../../test-utils' + +test('basic', async () => { + await page.getByRole('button', { name: 'Count: 0' }).click() + await page.getByRole('button', { name: 'Count: 1' }).click() +}) + +test.runIf(!isBuild)('hmr js', async () => { + await page.goto(viteTestUrl) + await page.getByRole('button', { name: 'Count: 0' }).click() + + editFile('./src/App.vue', (s) => s.replace('Count:', 'Count-x:')) + await page.getByRole('button', { name: 'Count-x: 1' }).click() + + editFile('./src/app.tsx', (s) => s.replace('Count-x:', 'Count:')) + await page.getByRole('button', { name: 'Count: 2' }).click() +}) diff --git a/playground/rolldown-dev-vue/index.html b/playground/rolldown-dev-vue/index.html new file mode 100644 index 00000000000000..a1c813e07a7db0 --- /dev/null +++ b/playground/rolldown-dev-vue/index.html @@ -0,0 +1,10 @@ + + + + + + +
+ + + diff --git a/playground/rolldown-dev-vue/package.json b/playground/rolldown-dev-vue/package.json new file mode 100644 index 00000000000000..25009cbd56b515 --- /dev/null +++ b/playground/rolldown-dev-vue/package.json @@ -0,0 +1,16 @@ +{ + "name": "@vitejs/test-rolldown-dev-vue", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "vue": "^3.5.13" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^5.2.1" + } +} diff --git a/playground/rolldown-dev-vue/src/App.vue b/playground/rolldown-dev-vue/src/App.vue new file mode 100644 index 00000000000000..5c470b8f87b816 --- /dev/null +++ b/playground/rolldown-dev-vue/src/App.vue @@ -0,0 +1,11 @@ + + + + + diff --git a/playground/rolldown-dev-vue/src/main.js b/playground/rolldown-dev-vue/src/main.js new file mode 100644 index 00000000000000..01433bca2ac765 --- /dev/null +++ b/playground/rolldown-dev-vue/src/main.js @@ -0,0 +1,4 @@ +import { createApp } from 'vue' +import App from './App.vue' + +createApp(App).mount('#app') diff --git a/playground/rolldown-dev-vue/vite.config.ts b/playground/rolldown-dev-vue/vite.config.ts new file mode 100644 index 00000000000000..33b063489fd06e --- /dev/null +++ b/playground/rolldown-dev-vue/vite.config.ts @@ -0,0 +1,20 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + clearScreen: false, + experimental: { + rolldownDev: { + hmr: true, + }, + }, + plugins: [ + vue(), + { + name: 'debug', + buildEnd(err) { + console.log('[buildEnd]', err) + }, + }, + ], +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 310c0db645d215..306efee178a09f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1357,6 +1357,16 @@ importers: specifier: ^18.3.1 version: 18.3.1 + playground/rolldown-dev-vue: + dependencies: + vue: + specifier: ^3.5.13 + version: 3.5.13(typescript@5.6.3) + devDependencies: + '@vitejs/plugin-vue': + specifier: ^5.2.1 + version: 5.2.1(vite@packages+vite)(vue@3.5.13(typescript@5.6.3)) + playground/self-referencing: {} playground/ssr: @@ -3344,6 +3354,13 @@ packages: vite: workspace:* vue: ^3.2.25 + '@vitejs/plugin-vue@5.2.1': + resolution: {integrity: sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ==} + engines: {node: ^18.0.0 || >=20.0.0} + peerDependencies: + vite: workspace:* + vue: ^3.2.25 + '@vitejs/release-scripts@1.3.2': resolution: {integrity: sha512-g4jaMHxdjPiGlFV8qSq8EaE3SYtLHeEGGfmVASvJ+mn+W0kKH0nDXO3u9RR25zVbW9ooamQcpEAx2fTMhlwvkg==} @@ -9078,6 +9095,11 @@ snapshots: vite: link:packages/vite vue: 3.5.13(typescript@5.6.3) + '@vitejs/plugin-vue@5.2.1(vite@packages+vite)(vue@3.5.13(typescript@5.6.3))': + dependencies: + vite: link:packages/vite + vue: 3.5.13(typescript@5.6.3) + '@vitejs/release-scripts@1.3.2': dependencies: execa: 8.0.1 From a65258921578b6673408c584963dccd5ed17b286 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Thu, 5 Dec 2024 14:15:15 +0900 Subject: [PATCH 2/4] fix: move initial build from `env.init` to `env.listen` --- packages/vite/src/node/server/environments/rolldown.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/vite/src/node/server/environments/rolldown.ts b/packages/vite/src/node/server/environments/rolldown.ts index 9205e4b4aef095..92edbdbba621b1 100644 --- a/packages/vite/src/node/server/environments/rolldown.ts +++ b/packages/vite/src/node/server/environments/rolldown.ts @@ -171,6 +171,10 @@ class RolldownEnvironment extends DevEnvironment { assert(this._pluginContainer) this._pluginContainer.buildStart = async () => {} this._pluginContainer.close = async () => {} + } + + // delay build till listen since some plugins expect `configureServer` before build + override listen: DevEnvironment['listen'] = async () => { await this.build() } From bda4da727a4e98089338b76e3a390a91319b16a7 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Thu, 5 Dec 2024 14:29:47 +0900 Subject: [PATCH 3/4] fix: fix `import.meta.hot.on` --- packages/vite/misc/rolldown-runtime.js | 2 -- packages/vite/src/node/server/environments/rolldown.ts | 3 ++- playground/rolldown-dev-vue/vite.config.ts | 10 +--------- 3 files changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/vite/misc/rolldown-runtime.js b/packages/vite/misc/rolldown-runtime.js index 86b99004b9b7cd..1a2ce4e5cb1b3c 100644 --- a/packages/vite/misc/rolldown-runtime.js +++ b/packages/vite/misc/rolldown-runtime.js @@ -126,8 +126,6 @@ var rolldown_runtime = (self.rolldown_runtime = { }) } }, - // TODO: import.meta.hot.on - on: () => {}, }, }) this.executeModuleStack.push(id) diff --git a/packages/vite/src/node/server/environments/rolldown.ts b/packages/vite/src/node/server/environments/rolldown.ts index 92edbdbba621b1..9ab06e1163656e 100644 --- a/packages/vite/src/node/server/environments/rolldown.ts +++ b/packages/vite/src/node/server/environments/rolldown.ts @@ -244,7 +244,8 @@ class RolldownEnvironment extends DevEnvironment { }, handler(code) { const output = new MagicString(code) - output.replaceAll('import.meta.hot', 'module.hot') + output.replaceAll('import.meta.hot.accept', 'module.hot.accept') + output.replaceAll('import.meta.hot.on', 'self.__rolldown_hot.on') return { code: output.toString(), map: output.generateMap() } }, }, diff --git a/playground/rolldown-dev-vue/vite.config.ts b/playground/rolldown-dev-vue/vite.config.ts index 33b063489fd06e..8b42ccf255c2a9 100644 --- a/playground/rolldown-dev-vue/vite.config.ts +++ b/playground/rolldown-dev-vue/vite.config.ts @@ -8,13 +8,5 @@ export default defineConfig({ hmr: true, }, }, - plugins: [ - vue(), - { - name: 'debug', - buildEnd(err) { - console.log('[buildEnd]', err) - }, - }, - ], + plugins: [vue()], }) From b493925022aaf10acc48efc7610303842615a24b Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Thu, 5 Dec 2024 14:44:40 +0900 Subject: [PATCH 4/4] fix: hack vue hmr --- packages/vite/src/node/server/environments/rolldown.ts | 6 ++++++ playground/rolldown-dev-vue/__tests__/basic.spec.ts | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/server/environments/rolldown.ts b/packages/vite/src/node/server/environments/rolldown.ts index 9ab06e1163656e..6a63ecb87eae81 100644 --- a/packages/vite/src/node/server/environments/rolldown.ts +++ b/packages/vite/src/node/server/environments/rolldown.ts @@ -331,6 +331,12 @@ class RolldownEnvironment extends DevEnvironment { if (!this.fileModuleIds.has(ctx.file)) { return } + for (const plugin of this.plugins) { + // TODO: for now, simple hack for vue hmr + if (plugin.name === 'vite:vue') { + ;(plugin.handleHotUpdate as any)(ctx) + } + } if ( this.rolldownDevOptions.hmr || this.rolldownDevOptions.ssrModuleRunner diff --git a/playground/rolldown-dev-vue/__tests__/basic.spec.ts b/playground/rolldown-dev-vue/__tests__/basic.spec.ts index 7a47a7182ace0b..26c56f3178c7e2 100644 --- a/playground/rolldown-dev-vue/__tests__/basic.spec.ts +++ b/playground/rolldown-dev-vue/__tests__/basic.spec.ts @@ -13,6 +13,6 @@ test.runIf(!isBuild)('hmr js', async () => { editFile('./src/App.vue', (s) => s.replace('Count:', 'Count-x:')) await page.getByRole('button', { name: 'Count-x: 1' }).click() - editFile('./src/app.tsx', (s) => s.replace('Count-x:', 'Count:')) + editFile('./src/App.vue', (s) => s.replace('Count-x:', 'Count:')) await page.getByRole('button', { name: 'Count: 2' }).click() })