test: remove vue plugin from preload playground (#11451)

playground/preload/__tests__/preload-disabled/preload-disabled.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest'
-import { browserLogs, isBuild, page, viteTestUrl } from '~utils'
+import { browserLogs, isBuild, page } from '~utils'
 
 test('should have no 404s', () => {
   browserLogs.forEach((msg) => {
@@ -9,12 +9,14 @@ test('should have no 404s', () => {
 
 describe.runIf(isBuild)('build', () => {
   test('dynamic import', async () => {
-    const appHtml = await page.content()
-    expect(appHtml).toMatch('This is <b>home</b> page.')
+    await page.waitForSelector('#done')
+    expect(await page.textContent('#done')).toBe('ran js')
   })
 
   test('dynamic import with comments', async () => {
-    await page.goto(viteTestUrl + '/#/hello')
+    await page.click('#hello .load')
+    await page.waitForSelector('#hello output')
+
     const html = await page.content()
     expect(html).not.toMatch(/link rel="modulepreload"/)
     expect(html).not.toMatch(/link rel="stylesheet"/)

playground/preload/__tests__/preload.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest'
-import { browserLogs, isBuild, page, viteTestUrl } from '~utils'
+import { browserLogs, isBuild, page } from '~utils'
 
 test('should have no 404s', () => {
   browserLogs.forEach((msg) => {
@@ -9,18 +9,20 @@ test('should have no 404s', () => {
 
 describe.runIf(isBuild)('build', () => {
   test('dynamic import', async () => {
-    const appHtml = await page.content()
-    expect(appHtml).toMatch('This is <b>home</b> page.')
+    await page.waitForSelector('#done')
+    expect(await page.textContent('#done')).toBe('ran js')
   })
 
   test('dynamic import with comments', async () => {
-    await page.goto(viteTestUrl + '/#/hello')
+    await page.click('#hello .load')
+    await page.waitForSelector('#hello output')
+
     const html = await page.content()
     expect(html).toMatch(
-      /link rel="modulepreload".*?href=".*?\/assets\/Hello-\w{8}\.js"/,
+      /link rel="modulepreload".*?href=".*?\/assets\/hello-\w{8}\.js"/,
     )
     expect(html).toMatch(
-      /link rel="stylesheet".*?href=".*?\/assets\/Hello-\w{8}\.css"/,
+      /link rel="stylesheet".*?href=".*?\/assets\/hello-\w{8}\.css"/,
     )
   })
 })

playground/preload/__tests__/resolve-deps/preload-resolve-deps.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest'
-import { browserLogs, isBuild, page, viteTestUrl } from '~utils'
+import { browserLogs, isBuild, page } from '~utils'
 
 test('should have no 404s', () => {
   browserLogs.forEach((msg) => {
@@ -9,19 +9,21 @@ test('should have no 404s', () => {
 
 describe.runIf(isBuild)('build', () => {
   test('dynamic import', async () => {
-    const appHtml = await page.content()
-    expect(appHtml).toMatch('This is <b>home</b> page.')
+    await page.waitForSelector('#done')
+    expect(await page.textContent('#done')).toBe('ran js')
   })
 
   test('dynamic import with comments', async () => {
-    await page.goto(viteTestUrl + '/#/hello')
+    await page.click('#hello .load')
+    await page.waitForSelector('#hello output')
+
     const html = await page.content()
     expect(html).toMatch(
-      /link rel="modulepreload".*?href="http.*?\/Hello-\w{8}\.js"/,
+      /link rel="modulepreload".*?href="http.*?\/hello-\w{8}\.js"/,
     )
     expect(html).toMatch(/link rel="modulepreload".*?href="\/preloaded.js"/)
     expect(html).toMatch(
-      /link rel="stylesheet".*?href="http.*?\/Hello-\w{8}\.css"/,
+      /link rel="stylesheet".*?href="http.*?\/hello-\w{8}\.css"/,
     )
   })
 })

playground/preload/index.html

@@ -1,10 +1,19 @@
-<div id="app"></div>
+<h1>preload</h1>
+<div id="hello">
+  <button class="load">Load hello</button>
+  <div class="msg"></div>
+</div>
+<div id="about">
+  <button class="load">Load about</button>
+  <div class="msg"></div>
+</div>
+
 <script type="module">
-  import { createApp } from 'vue'
-  import router from './router.js'
-  import App from './src/App.vue'
   import { msgFromA } from '@vitejs/test-dep-a'
   console.log(msgFromA)
 
-  createApp(App).use(router).mount('#app')
+  import './src/main.js'
+  document
+    .querySelector('h1')
+    .insertAdjacentHTML('afterEnd', '<div id="done">ran js</div>')
 </script>

playground/preload/package.json

@@ -16,12 +16,7 @@
     "debug:preload-disabled": "node --inspect-brk ../../packages/vite/bin/vite --config vite.config-preload-disabled.ts",
     "preview:preload-disabled": "vite preview --config vite.config-preload-disabled.ts"
   },
-  "dependencies": {
-    "vue": "^3.2.45",
-    "vue-router": "^4.1.6"
-  },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
     "terser": "^5.16.1",
     "@vitejs/test-dep-a": "file:./dep-a",
     "@vitejs/test-dep-including-a": "file:./dep-including-a"

playground/preload/src/about.js

@@ -0,0 +1,3 @@
+import { msg } from '@vitejs/test-dep-including-a'
+
+document.querySelector('#about .msg').textContent = msg

playground/preload/src/hello.js

@@ -0,0 +1,5 @@
+import style from './hello.module.css'
+
+const msg = document.querySelector('#hello .msg')
+msg.textContent = 'hello'
+msg.classList.add(style.h1)

playground/preload/src/hello.module.css

@@ -0,0 +1,3 @@
+.h1 {
+  color: red;
+}

playground/preload/src/main.js

@@ -0,0 +1,16 @@
+const ids = {
+  hello: async () => {
+    await import(/* a comment */ './hello.js')
+  },
+  about: async () => {
+    await import('./about.js') // lazy load
+  },
+}
+
+for (const [id, loader] of Object.entries(ids)) {
+  const loadButton = document.querySelector(`#${id} .load`)
+  loadButton.addEventListener('click', async () => {
+    await loader()
+    loadButton.insertAdjacentHTML('afterend', '<output>loaded</output>')
+  })
+}

playground/preload/vite.config-preload-disabled.ts

@@ -1,8 +1,6 @@
-import vuePlugin from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
-  plugins: [vuePlugin()],
   build: {
     outDir: 'dist/preload-disabled',
     minify: 'terser',

playground/preload/vite.config-resolve-deps.ts

@@ -1,8 +1,6 @@
-import vuePlugin from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
-  plugins: [vuePlugin()],
   build: {
     outDir: 'dist/resolve-deps',
     minify: 'terser',
@@ -16,7 +14,7 @@ export default defineConfig({
     },
     modulePreload: {
       resolveDependencies(filename, deps, { hostId, hostType }) {
-        if (filename.includes('Hello')) {
+        if (filename.includes('hello')) {
           return [...deps, 'preloaded.js']
         }
         return deps

playground/preload/vite.config.ts

@@ -1,8 +1,6 @@
-import vuePlugin from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
-  plugins: [vuePlugin()],
   build: {
     outDir: 'dist/normal',
     minify: 'terser',