fix(scan): improve script regular matching (fixes #2942) (#2961)

packages/vite/src/node/__tests__/scan.spec.ts

@@ -0,0 +1,70 @@
+import { scriptRE, commentRE } from '../optimizer/scan'
+describe('optimizer-scan:script-test', () => {
+  const scriptContent = `import { defineComponent } from 'vue'
+      import ScriptDevelopPane from './ScriptDevelopPane.vue';
+      export default defineComponent({
+        components: {
+          ScriptDevelopPane
+        }
+      })`
+
+  test('component return value test', () => {
+    scriptRE.lastIndex = 0
+    const [, tsOpenTag, , tsContent] = scriptRE.exec(
+      `<script lang="ts">${scriptContent}</script>`
+    )
+    expect(tsOpenTag).toEqual('<script lang="ts">')
+    expect(tsContent).toEqual(scriptContent)
+
+    scriptRE.lastIndex = 0
+    const [, openTag, , content] = scriptRE.exec(
+      `<script>${scriptContent}</script>`
+    )
+    expect(openTag).toEqual('<script>')
+    expect(content).toEqual(scriptContent)
+  })
+
+  test('include comments test', () => {
+    scriptRE.lastIndex = 0
+    const ret = scriptRE.exec(
+      `<template>
+        <!--  <script >var test = null</script> -->
+      </template>`.replace(commentRE, '')
+    )
+    expect(ret).toEqual(null)
+  })
+
+  test('components with script keyword test', () => {
+    scriptRE.lastIndex = 0
+    let ret = scriptRE.exec(`<template><script-develop-pane/></template>`)
+    expect(ret).toBe(null)
+
+    scriptRE.lastIndex = 0
+    ret = scriptRE.exec(
+      `<template><script-develop-pane></script-develop-pane></template>`
+    )
+    expect(ret).toBe(null)
+
+    scriptRE.lastIndex = 0
+    ret = scriptRE.exec(
+      `<template><script-develop-pane  > content </script-develop-pane></template>`
+    )
+    expect(ret).toBe(null)
+  })
+
+  test('ordinary script tag test', () => {
+    scriptRE.lastIndex = 0
+    const [, tag, , content] = scriptRE.exec(
+      `<script  >var test = null</script>`
+    )
+    expect(tag).toEqual('<script  >')
+    expect(content).toEqual('var test = null')
+
+    scriptRE.lastIndex = 0
+    const [, tag1, , content1] = scriptRE.exec(
+      `<script>var test = null</script>`
+    )
+    expect(tag1).toEqual('<script>')
+    expect(content1).toEqual('var test = null')
+  })
+})

packages/vite/src/node/optimizer/scan.ts

@@ -134,7 +134,8 @@ function globEntries(pattern: string | string[], config: ResolvedConfig) {
 }
 
 const scriptModuleRE = /(<script\b[^>]*type\s*=\s*(?:"module"|'module')[^>]*>)(.*?)<\/script>/gims
-const scriptRE = /(<script\b[^>]*>)(.*?)<\/script>/gims
+export const scriptRE = /(<script\b(\s[^>]*>|>))(.*?)<\/script>/gims
+export const commentRE = /<!--(.|[\r\n])*?-->/
 const srcRE = /\bsrc\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s'">]+))/im
 const langRE = /\blang\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s'">]+))/im
 
@@ -196,14 +197,18 @@ function esbuildScanPlugin(
       build.onLoad(
         { filter: htmlTypesRE, namespace: 'html' },
         async ({ path }) => {
-          const raw = fs.readFileSync(path, 'utf-8')
-          const regex = path.endsWith('.html') ? scriptModuleRE : scriptRE
+          let raw = fs.readFileSync(path, 'utf-8')
+          // Avoid matching the content of the comment
+          raw = raw.replace(commentRE, '')
+          const isHtml = path.endsWith('.html')
+          const regex = isHtml ? scriptModuleRE : scriptRE
           regex.lastIndex = 0
           let js = ''
           let loader: Loader = 'js'
           let match
           while ((match = regex.exec(raw))) {
-            const [, openTag, content] = match
+            const [, openTag, htmlContent, scriptContent] = match
+            const content = isHtml ? htmlContent : scriptContent
             const srcMatch = openTag.match(srcRE)
             const langMatch = openTag.match(langRE)
             const lang =