wip: test vue plugin

hi-ogawa · Dec 5, 2024 · 3b8e8b8 · 3b8e8b8
1 parent 714079b
commit 3b8e8b8
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/playground/rolldown-dev-vue/package.json 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
@@ -0,0 +1,11 @@
+<script setup>
+import { ref } from 'vue'
+const count = ref(0)
+</script>
+
+<template>
+  <h1>Vite + Vue</h1>
+  <button type="button" @click="count++">Count: {{ count }}</button>
+</template>
+
+<!-- TODO: scoped css -->
diff --git a/playground/rolldown-dev-vue/src/main.js 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
@@ -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
-Original file line number
+Diff line change
@@ Expand Up / @@ -126,6 +126,8 @@ var rolldown_runtime = (self.rolldown_runtime = { @@
                 })
               }
             },
+            // TODO: import.meta.hot.on
+            on: () => {},
           },
         })
         this.executeModuleStack.push(id)
@@ Expand Down @@