fix: worker match only run in js (#7500)

Author: poyoho

packages/playground/vue/Main.vue

@@ -20,6 +20,7 @@
   </Suspense>
   <ReactivityTransform :foo="time" />
   <SetupImportTemplate />
+  <WorkerTest />
 </template>
 
 <script setup lang="ts">
@@ -35,7 +36,7 @@ import ScanDep from './ScanDep.vue'
 import AsyncComponent from './AsyncComponent.vue'
 import ReactivityTransform from './ReactivityTransform.vue'
 import SetupImportTemplate from './setup-import-template/SetupImportTemplate.vue'
-
+import WorkerTest from './worker.vue'
 import { ref } from 'vue'
 
 const time = ref('loading...')

packages/playground/vue/__tests__/vue.spec.ts

@@ -242,3 +242,9 @@ describe('setup import template', () => {
     expect(await page.textContent('.setup-import-template')).toMatch('1')
   })
 })
+
+describe('vue worker', () => {
+  test('should work', async () => {
+    expect(await page.textContent('.vue-worker')).toMatch('worker load!')
+  })
+})

packages/playground/vue/worker.vue

@@ -0,0 +1,17 @@
+<template>
+  <h2>worker template error match</h2>
+  <code>
+    const worker = new Worker(new URL('./worker.js', import.meta.url))
+  </code>
+  <div class="vue-worker">{{ message }}</div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const message = ref('')
+const worker = new Worker(new URL('./workerTest.js', import.meta.url))
+worker.addEventListener('message', (ev) => {
+  message.value = ev.data
+})
+</script>

packages/playground/vue/workerTest.js

@@ -0,0 +1 @@
+self.postMessage('worker load!')

packages/playground/worker/index.html

@@ -1,3 +1,8 @@
+<p>worker template error match:</p>
+<code>
+  const worker = new Worker(new URL('./worker.js', import.meta.url))
+</code>
+
 <h2 class="format-iife">format iife:</h2>
 <div>Expected values: <span class="mode-true"></span></div>
 <button class="ping">Ping</button>

packages/vite/src/node/build.ts

@@ -19,7 +19,6 @@ import type {
 } from 'rollup'
 import type Rollup from 'rollup'
 import { buildReporterPlugin } from './plugins/reporter'
-import { buildHtmlPlugin } from './plugins/html'
 import { buildEsbuildPlugin } from './plugins/esbuild'
 import { terserPlugin } from './plugins/terser'
 import type { Terser } from 'types/terser'
@@ -310,7 +309,6 @@ export function resolveBuildPlugins(config: ResolvedConfig): {
   return {
     pre: [
       watchPackageDataPlugin(config),
-      buildHtmlPlugin(config),
       commonjsPlugin(options.commonjsOptions),
       dataURIPlugin(),
       dynamicImportVars(options.dynamicImportVarsOptions),

packages/vite/src/node/plugins/assetImportMetaUrl.ts

@@ -3,7 +3,12 @@ import MagicString from 'magic-string'
 import path from 'path'
 import { fileToUrl } from './asset'
 import type { ResolvedConfig } from '../config'
-import { multilineCommentsRE, singlelineCommentsRE } from '../utils'
+import {
+  multilineCommentsRE,
+  singlelineCommentsRE,
+  stringsRE,
+  blankReplacer
+} from '../utils'
 
 /**
  * Convert `new URL('./foo.png', import.meta.url)` to its resolved built URL
@@ -27,12 +32,18 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
         const importMetaUrlRE =
           /\bnew\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*,?\s*\)/g
         const noCommentsCode = code
-          .replace(multilineCommentsRE, (m) => ' '.repeat(m.length))
-          .replace(singlelineCommentsRE, (m) => ' '.repeat(m.length))
+          .replace(multilineCommentsRE, blankReplacer)
+          .replace(singlelineCommentsRE, blankReplacer)
+          .replace(stringsRE, (m) => `'${'\0'.repeat(m.length - 2)}'`)
+
         let s: MagicString | null = null
         let match: RegExpExecArray | null
         while ((match = importMetaUrlRE.exec(noCommentsCode))) {
-          const { 0: exp, 1: rawUrl, index } = match
+          const { 0: exp, 1: emptyUrl, index } = match
+
+          const urlStart = exp.indexOf(emptyUrl) + index
+          const urlEnd = urlStart + emptyUrl.length
+          const rawUrl = code.slice(urlStart, urlEnd)
 
           if (!s) s = new MagicString(code)
 

packages/vite/src/node/plugins/index.ts

@@ -9,7 +9,7 @@ import { importAnalysisPlugin } from './importAnalysis'
 import { cssPlugin, cssPostPlugin } from './css'
 import { assetPlugin } from './asset'
 import { clientInjectionsPlugin } from './clientInjections'
-import { htmlInlineProxyPlugin } from './html'
+import { buildHtmlPlugin, htmlInlineProxyPlugin } from './html'
 import { wasmPlugin } from './wasm'
 import { modulePreloadPolyfillPlugin } from './modulePreloadPolyfill'
 import { webWorkerPlugin } from './worker'
@@ -61,12 +61,13 @@ export async function resolvePlugins(
     ),
     wasmPlugin(config),
     webWorkerPlugin(config),
-    workerImportMetaUrlPlugin(config),
     assetPlugin(config),
     ...normalPlugins,
     definePlugin(config),
     cssPostPlugin(config),
     config.build.ssr ? ssrRequireHookPlugin(config) : null,
+    isBuild && buildHtmlPlugin(config),
+    workerImportMetaUrlPlugin(config),
     ...buildPlugins.pre,
     ...postPlugins,
     ...buildPlugins.post,

packages/vite/src/node/plugins/workerImportMetaUrl.ts

@@ -7,7 +7,8 @@ import {
   cleanUrl,
   injectQuery,
   multilineCommentsRE,
-  singlelineCommentsRE
+  singlelineCommentsRE,
+  stringsRE
 } from '../utils'
 import path from 'path'
 import { bundleWorkerEntry } from './worker'
@@ -122,12 +123,21 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
         const noCommentsCode = code
           .replace(multilineCommentsRE, blankReplacer)
           .replace(singlelineCommentsRE, blankReplacer)
+
+        const noStringCode = noCommentsCode.replace(
+          stringsRE,
+          (m) => `'${' '.repeat(m.length - 2)}'`
+        )
         let match: RegExpExecArray | null
         let s: MagicString | null = null
-        while ((match = importMetaUrlRE.exec(noCommentsCode))) {
-          const { 0: allExp, 2: exp, 3: rawUrl, index } = match
+        while ((match = importMetaUrlRE.exec(noStringCode))) {
+          const { 0: allExp, 2: exp, 3: emptyUrl, index } = match
           const urlIndex = allExp.indexOf(exp) + index
 
+          const urlStart = allExp.indexOf(emptyUrl) + index
+          const urlEnd = urlStart + emptyUrl.length
+          const rawUrl = code.slice(urlStart, urlEnd)
+
           if (options?.ssr) {
             this.error(
               `\`new URL(url, import.meta.url)\` is not supported in SSR.`,

packages/vite/src/node/utils.ts

@@ -732,3 +732,4 @@ export function parseRequest(id: string): Record<string, string> | null {
 }
 
 export const blankReplacer = (match: string) => ' '.repeat(match.length)
+export const stringsRE = /"[^"]*"|'[^']*'|`[^`]*`/g