vitejs · sapphi-red · Oct 19, 2023 · Oct 18, 2023 · Oct 18, 2023 · Oct 18, 2023
diff --git a/.prettierignore b/.prettierignore
@@ -9,3 +9,4 @@ playground/tsconfig-json-load-error/has-error/tsconfig.json
 playground/html/invalid.html
 playground/html/valid.html
 playground/worker/classic-worker.js
+playground/external/public/slash@3.0.0.js
diff --git a/playground/external/index.html b/playground/external/index.html
@@ -7,9 +7,9 @@
     <script type="importmap">
       {
         "imports": {
-          "vue": "https://unpkg.com/vue@3.2.0/dist/vue.runtime.esm-browser.js",
-          "slash5": "https://unpkg.com/slash@5.0.0/index.js",
-          "slash3": "https://esm.sh/slash@3.0.0"
+          "vue": "/vue@3.2.0.js",
+          "slash5": "/slash@5.js",
+          "slash3": "/slash@3.0.0.js"
         }
       }
     </script>

diff --git a/playground/external/package.json b/playground/external/package.json
@@ -17,6 +17,7 @@
     "slash3": "npm:slash@^3.0.0",
     "slash5": "npm:slash@^5.1.0",
     "vite": "workspace:*",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue32": "npm:vue@~3.2.0"
   }
 }
diff --git a/playground/external/public/slash@3.0.0.js b/playground/external/public/slash@3.0.0.js
diff --git a/playground/external/vite.config.js b/playground/external/vite.config.js
@@ -1,5 +1,25 @@
+import fs from 'node:fs/promises'
 import { defineConfig } from 'vite'
 
+const npmDirectServeConfig = {
+  '/vue@3.2.0.js': 'vue32/dist/vue.runtime.esm-browser.js',
+  '/slash@5.js': 'slash5/index.js',
+}
+/** @type {import('vite').Connect.NextHandleFunction} */
+const serveNpmCodeDirectlyMiddleware = async (req, res, next) => {
+  for (const [url, file] of Object.entries(npmDirectServeConfig)) {
+    if (req.originalUrl === url) {
+      const code = await fs.readFile(
+        new URL(`./node_modules/${file}`, import.meta.url),
+      )
+      res.setHeader('Content-Type', 'application/javascript')
+      res.end(code)
+      return
+    }
+  }
+  next()
+}
+
 export default defineConfig({
   optimizeDeps: {
     include: ['dep-that-imports', 'dep-that-requires'],
@@ -14,4 +34,15 @@ export default defineConfig({
       esmExternals: ['vue', 'slash5'],
     },
   },
+  plugins: [
+    {
+      name: 'serve-npm-code-directly',
+      configureServer({ middlewares }) {
+        middlewares.use(serveNpmCodeDirectlyMiddleware)
+      },
+      configurePreviewServer({ middlewares }) {
+        middlewares.use(serveNpmCodeDirectlyMiddleware)
+      },
+    },
+  ],
 })
diff --git a/playground/hmr/__tests__/hmr.spec.ts b/playground/hmr/__tests__/hmr.spec.ts
@@ -631,7 +631,7 @@ if (!isBuild) {
 
           await untilBrowserLogAfter(
             () => page.goto(`${viteTestUrl}/${testDir}/`),
-            '>>> ready <<<',
+            [CONNECTED, '>>> ready <<<'],
             (logs) => {
               expect(logs).toContain('loaded:some:a0b0c0default0')
               expect(logs).toContain('some >>>>>> a0, b0, c0')
@@ -640,10 +640,11 @@ if (!isBuild) {
 
           await untilBrowserLogAfter(
             async () => {
+              const loadPromise = page.waitForEvent('load')
               editFile(file, (code) => code.replace(/([abc])0/g, '$11'))
-              await page.waitForEvent('load')
+              await loadPromise
             },
-            '>>> ready <<<',
+            [CONNECTED, '>>> ready <<<'],
             (logs) => {
               expect(logs).toContain('loaded:some:a1b1c1default0')
               expect(logs).toContain('some >>>>>> a1, b1, c1')
@@ -712,21 +713,25 @@ if (!isBuild) {
     const importCode = "import 'missing-modules'"
     const unImportCode = `// ${importCode}`
 
-    await page.goto(viteTestUrl + '/missing-import/index.html', {
-      waitUntil: 'load',
-    })
+    await untilBrowserLogAfter(
+      () =>
+        page.goto(viteTestUrl + '/missing-import/index.html', {
+          waitUntil: 'load',
+        }),
+      /connected/, // wait for HMR connection
+    )
 
     await untilBrowserLogAfter(async () => {
       const loadPromise = page.waitForEvent('load')
       editFile(file, (code) => code.replace(importCode, unImportCode))
       await loadPromise
-    }, 'missing test')
+    }, ['missing test', /connected/])
 
     await untilBrowserLogAfter(async () => {
       const loadPromise = page.waitForEvent('load')
       editFile(file, (code) => code.replace(unImportCode, importCode))
       await loadPromise
-    }, /500/)
+    }, [/500/, /connected/])
   })
 
   test('should hmr when file is deleted and restored', async () => {

diff --git a/playground/lib/__tests__/lib.spec.ts b/playground/lib/__tests__/lib.spec.ts
@@ -6,6 +6,7 @@ import {
   readFile,
   serverLogs,
   untilUpdated,
+  withRetry,
 } from '~utils'
 
 describe.runIf(isBuild)('build', () => {
@@ -84,5 +85,7 @@ describe.runIf(isBuild)('build', () => {
 })
 
 test.runIf(isServe)('dev', async () => {
-  expect(await page.textContent('.demo')).toBe('It works')
+  await withRetry(async () => {
+    expect(await page.textContent('.demo')).toBe('It works')
+  })
 })
diff --git a/playground/proxy-hmr/__tests__/proxy-hmr.spec.ts b/playground/proxy-hmr/__tests__/proxy-hmr.spec.ts
@@ -1,8 +1,19 @@
 import { test } from 'vitest'
-import { editFile, page, untilUpdated, viteTestUrl } from '~utils'
+import {
+  editFile,
+  page,
+  untilBrowserLogAfter,
+  untilUpdated,
+  viteTestUrl,
+} from '~utils'
 
 test('proxy-hmr', async () => {
-  await page.goto(viteTestUrl)
+  await untilBrowserLogAfter(
+    () => page.goto(viteTestUrl),
+    // wait for both main and sub app HMR connection
+    [/connected/, /connected/],
+  )
+
   const otherAppTextLocator = page.frameLocator('iframe').locator('.content')
   await untilUpdated(() => otherAppTextLocator.textContent(), 'other app')
   editFile('other-app/index.html', (code) =>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml