fix(web): correctly resolve assets in new URL (#3950)

Author: sheremet-va

packages/vitest/src/node/plugins/ssrReplacer.ts

@@ -7,7 +7,7 @@ import { cleanUrl } from 'vite-node/utils'
 // import.meta.env.VITE_NAME = 'app' -> process.env.VITE_NAME = 'app'
 export function SsrReplacerPlugin(): Plugin {
   return {
-    name: 'vitest:env-replacer',
+    name: 'vitest:ssr-replacer',
     enforce: 'pre',
     transform(code, id) {
       if (!/\bimport\.meta\.env\b/.test(code) && !/\bimport\.meta\.url\b/.test(code))
@@ -26,17 +26,6 @@ export function SsrReplacerPlugin(): Plugin {
         s.overwrite(startIndex, endIndex, 'process.env')
       }
 
-      const urls = cleanCode.matchAll(/\bimport\.meta\.url\b/g)
-
-      for (const env of urls) {
-        s ||= new MagicString(code)
-
-        const startIndex = env.index!
-        const endIndex = startIndex + env[0].length
-
-        s.overwrite(startIndex, endIndex, '__vite_ssr_import_meta__.url')
-      }
-
       if (s) {
         return {
           code: s.toString(),

packages/web-worker/src/shared-worker.ts

@@ -1,7 +1,7 @@
 import { MessageChannel, type MessagePort as NodeMessagePort } from 'node:worker_threads'
 import type { InlineWorkerContext, Procedure } from './types'
 import { InlineWorkerRunner } from './runner'
-import { debug, getRunnerOptions } from './utils'
+import { debug, getFileIdFromUrl, getRunnerOptions } from './utils'
 
 interface SharedInlineWorkerContext extends Omit<InlineWorkerContext, 'onmessage' | 'postMessage' | 'self' | 'global'> {
   onconnect: Procedure | null
@@ -101,7 +101,7 @@ export function createSharedWorkerConstructor(): typeof SharedWorker {
 
       const runner = new InlineWorkerRunner(runnerOptions, context)
 
-      const id = (url instanceof URL ? url.toString() : url).replace(/^file:\/+/, '/')
+      const id = getFileIdFromUrl(url)
 
       this._vw_name = id
 

packages/web-worker/src/utils.ts

@@ -80,3 +80,11 @@ export function getRunnerOptions(): any {
     state,
   }
 }
+
+export function getFileIdFromUrl(url: URL | string) {
+  if (!(url instanceof URL))
+    url = new URL(url, self.location.origin)
+  if (url.protocol === 'http:' || url.protocol === 'https:')
+    return url.pathname
+  return url.toString().replace(/^file:\/+/, '/')
+}

packages/web-worker/src/worker.ts

@@ -1,6 +1,6 @@
 import type { CloneOption, DefineWorkerOptions, InlineWorkerContext, Procedure } from './types'
 import { InlineWorkerRunner } from './runner'
-import { createMessageEvent, debug, getRunnerOptions } from './utils'
+import { createMessageEvent, debug, getFileIdFromUrl, getRunnerOptions } from './utils'
 
 export function createWorkerConstructor(options?: DefineWorkerOptions): typeof Worker {
   const runnerOptions = getRunnerOptions()
@@ -66,7 +66,7 @@ export function createWorkerConstructor(options?: DefineWorkerOptions): typeof W
 
       const runner = new InlineWorkerRunner(runnerOptions, context)
 
-      const id = (url instanceof URL ? url.toString() : url).replace(/^file:\/+/, '/')
+      const id = getFileIdFromUrl(url)
 
       this._vw_name = id
 

test/core/test/url-ssr.test.ts

@@ -0,0 +1,19 @@
+// @vitest-environment node
+
+import { fileURLToPath, pathToFileURL } from 'node:url'
+import { dirname, resolve } from 'pathe'
+import { expect, it } from 'vitest'
+
+it('correctly resolves new assets URL paths', () => {
+  const urlCss = new URL('../src/file-css.css', import.meta.url)
+  expect(urlCss.toString()).toBe(
+    pathToFileURL(resolve(dirname(fileURLToPath(import.meta.url)), '../src/file-css.css')).toString(),
+  )
+})
+
+it('doesn\'t resolve aliases for new URL in SSR', () => {
+  const urlAlias = new URL('#/file-css.css', import.meta.url)
+  expect(urlAlias.toString()).toBe(
+    pathToFileURL(`${fileURLToPath(import.meta.url)}#/file-css.css`).toString().replace('%23', '#'),
+  )
+})

test/core/test/url-web.test.ts

@@ -0,0 +1,13 @@
+// @vitest-environment jsdom
+
+import { expect, it } from 'vitest'
+
+it('correctly resolves new assets URL paths', () => {
+  const urlCss = new URL('../src/file-css.css', import.meta.url)
+  expect(urlCss.toString()).toBe('http://localhost:3000/src/file-css.css')
+})
+
+it('correctly resolves aliased URL paths', () => {
+  const urlAlias = new URL('#/file-css.css', import.meta.url)
+  expect(urlAlias.toString()).toBe('http://localhost:3000/src/file-css.css')
+})

test/web-worker/test/init.test.ts

@@ -75,11 +75,13 @@ it('self injected into worker and its deps should be equal', async () => {
   expect.assertions(4)
   expect(await testSelfWorker(new MySelfWorker())).toBeTruthy()
   // wait for clear worker mod cache
-  await sleep(500)
+  await sleep(0)
   expect(await testSelfWorker(new MySelfWorker())).toBeTruthy()
 
+  await sleep(0)
+
   expect(await testSelfWorker(new Worker(new URL('../src/selfWorker.ts', import.meta.url)))).toBeTruthy()
   // wait for clear worker mod cache
-  await sleep(500)
+  await sleep(0)
   expect(await testSelfWorker(new Worker(new URL('../src/selfWorker.ts', import.meta.url)))).toBeTruthy()
 })