From c46f91fd9ebf6d53f7a9e1c4a2cdef35e601f418 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 30 Nov 2023 13:11:27 +0800
Subject: [PATCH 01/47] chore: bump @vue/repl

---
 packages/sfc-playground/package.json | 2 +-
 packages/sfc-playground/src/main.ts  | 1 -
 pnpm-lock.yaml                       | 8 ++++----
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/sfc-playground/package.json b/packages/sfc-playground/package.json
index 769ec8d77fc..3c7c4a29368 100644
--- a/packages/sfc-playground/package.json
+++ b/packages/sfc-playground/package.json
@@ -13,7 +13,7 @@
     "vite": "^5.0.0"
   },
   "dependencies": {
-    "@vue/repl": "^2.7.0",
+    "@vue/repl": "^3.0.0",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "vue": "workspace:*"
diff --git a/packages/sfc-playground/src/main.ts b/packages/sfc-playground/src/main.ts
index 713251fd81c..2e7bc652865 100644
--- a/packages/sfc-playground/src/main.ts
+++ b/packages/sfc-playground/src/main.ts
@@ -1,6 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import '@vue/repl/style.css'
 
 // @ts-expect-error Custom window property
 window.VUE_DEVTOOLS_CONFIG = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8dab8de146d..4b83aedcad8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -354,8 +354,8 @@ importers:
   packages/sfc-playground:
     dependencies:
       '@vue/repl':
-        specifier: ^2.7.0
-        version: 2.7.0
+        specifier: ^3.0.0
+        version: 3.0.0
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
@@ -1765,8 +1765,8 @@ packages:
     engines: {node: '>= 0.12.0'}
     dev: true
 
-  /@vue/repl@2.7.0:
-    resolution: {integrity: sha512-zzyb+tVvzmOePv8Gp4sefP/7CKidx4WiJDfKPP698b9bN5jSFtmSOg4nvPoJEE1ICKeAEgdRKVneYJ8Mp7C/WA==}
+  /@vue/repl@3.0.0:
+    resolution: {integrity: sha512-tGYibiftMo5yEuIKPWVsNuuNDejjJk0JQmvKtTm12KNLFqtGD7fWoGv1qUzcN9EAxwVeDgnT9ljRgqGVgZkyEg==}
     dev: false
 
   /@zeit/schemas@2.29.0:

From 741114304f02facc79320eea123ffbfd2dd1ad3e Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 30 Nov 2023 16:38:33 +0800
Subject: [PATCH 02/47] chore(deps): update dependency puppeteer to ~21.5.2
 (#9637)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package.json   |  2 +-
 pnpm-lock.yaml | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 91db4962dab..7b6fe32016d 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,7 @@
     "prettier": "^3.1.0",
     "pretty-bytes": "^6.1.1",
     "pug": "^3.0.2",
-    "puppeteer": "~21.5.1",
+    "puppeteer": "~21.5.2",
     "rimraf": "^5.0.5",
     "rollup": "^4.1.4",
     "rollup-plugin-dts": "^6.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4b83aedcad8..c60d3a96b8f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -108,8 +108,8 @@ importers:
         specifier: ^3.0.2
         version: 3.0.2
       puppeteer:
-        specifier: ~21.5.1
-        version: 21.5.1(typescript@5.2.2)
+        specifier: ~21.5.2
+        version: 21.5.2(typescript@5.2.2)
       rimraf:
         specifier: ^5.0.5
         version: 5.0.5
@@ -4926,9 +4926,9 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /puppeteer-core@21.5.1:
-    resolution: {integrity: sha512-u6c3SZKAOaOQogaTkQvllxT/o2PP16wkbrUWINtMhfvrB4ko+xwqC1pb+vyCPMmNUh3N/CX5YGqb3DWx2fUPSQ==}
-    engines: {node: '>=16.3.0'}
+  /puppeteer-core@21.5.2:
+    resolution: {integrity: sha512-v4T0cWnujSKs+iEfmb8ccd7u4/x8oblEyKqplqKnJ582Kw8PewYAWvkH4qUWhitN3O2q9RF7dzkvjyK5HbzjLA==}
+    engines: {node: '>=16.13.2'}
     dependencies:
       '@puppeteer/browsers': 1.8.0
       chromium-bidi: 0.4.33(devtools-protocol@0.0.1203626)
@@ -4943,14 +4943,14 @@ packages:
       - utf-8-validate
     dev: true
 
-  /puppeteer@21.5.1(typescript@5.2.2):
-    resolution: {integrity: sha512-NkI06BXckVZeZUkODK+BbgGelQSu7uYEp9PaJDozxpwNRFDYoVfHQvd2G4dERoLdP6+qx4EBPwEhk4dEkQc2Kg==}
-    engines: {node: '>=16.3.0'}
+  /puppeteer@21.5.2(typescript@5.2.2):
+    resolution: {integrity: sha512-BaAGJOq8Fl6/cck6obmwaNLksuY0Bg/lIahCLhJPGXBFUD2mCffypa4A592MaWnDcye7eaHmSK9yot0pxctY8A==}
+    engines: {node: '>=16.13.2'}
     requiresBuild: true
     dependencies:
       '@puppeteer/browsers': 1.8.0
       cosmiconfig: 8.3.6(typescript@5.2.2)
-      puppeteer-core: 21.5.1
+      puppeteer-core: 21.5.2
     transitivePeerDependencies:
       - bufferutil
       - encoding

From bfc1838f31199de3f189198a3c234fa7bae91386 Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Thu, 30 Nov 2023 17:27:23 +0800
Subject: [PATCH 03/47] fix(runtime-dom): set width/height with units as
 attribute (#8781)

Technically, width / height on `<img>`, `<video>` etc must be integers and cannot contain units. When set as a DOM property, the DOM force converts strings with units to 0. However, this is such a common mistake that most browsers nowadays supports such usage, and it makes sense for Vue to at least let it be set as an attribute.
---
 packages/runtime-dom/__tests__/patchProps.spec.ts |  9 +++++++++
 packages/runtime-dom/src/patchProp.ts             | 10 ++++++++++
 2 files changed, 19 insertions(+)

diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts
index bf6362e7a0c..19554b02810 100644
--- a/packages/runtime-dom/__tests__/patchProps.spec.ts
+++ b/packages/runtime-dom/__tests__/patchProps.spec.ts
@@ -291,6 +291,15 @@ describe('runtime-dom: props patching', () => {
     expect(el.value).toBe('baz')
   })
 
+  // #8780
+  test('embedded tag with width and height', () => {
+    // Width and height of some embedded element such as img、video、source、canvas
+    // must be set as attribute
+    const el = document.createElement('img')
+    patchProp(el, 'width', null, '24px')
+    expect(el.getAttribute('width')).toBe('24px')
+  })
+
   test('translate attribute', () => {
     const el = document.createElement('div')
     patchProp(el, 'translate', null, 'no')
diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
index 38ad5b9f8b8..15f4f73edc4 100644
--- a/packages/runtime-dom/src/patchProp.ts
+++ b/packages/runtime-dom/src/patchProp.ts
@@ -8,6 +8,8 @@ import { RendererOptions } from '@vue/runtime-core'
 
 const nativeOnRE = /^on[a-z]/
 
+const embeddedTags = ['IMG', 'VIDEO', 'CANVAS', 'SOURCE']
+
 type DOMRendererOptions = RendererOptions<Node, Element>
 
 export const patchProp: DOMRendererOptions['patchProp'] = (
@@ -105,6 +107,14 @@ function shouldSetAsProp(
     return false
   }
 
+  // #8780 the width or heigth of embedded tags must be set as attribute
+  if (
+    (key === 'width' || key === 'height') &&
+    embeddedTags.includes(el.tagName)
+  ) {
+    return false
+  }
+
   // native onclick with string value, must be set as attribute
   if (nativeOnRE.test(key) && isString(value)) {
     return false

From 38aaa8c88648c54fe2616ad9c0961288092fcb44 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 30 Nov 2023 17:51:58 +0800
Subject: [PATCH 04/47] perf: optimize on* prop check

---
 packages/runtime-dom/src/patchProp.ts | 11 ++++++++---
 packages/shared/src/general.ts        |  7 +++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
index 15f4f73edc4..28753a90380 100644
--- a/packages/runtime-dom/src/patchProp.ts
+++ b/packages/runtime-dom/src/patchProp.ts
@@ -6,7 +6,12 @@ import { patchEvent } from './modules/events'
 import { isOn, isString, isFunction, isModelListener } from '@vue/shared'
 import { RendererOptions } from '@vue/runtime-core'
 
-const nativeOnRE = /^on[a-z]/
+const isNativeOn = (key: string) =>
+  key.charCodeAt(0) === 111 /* o */ &&
+  key.charCodeAt(1) === 110 /* n */ &&
+  // lowercase letter
+  key.charCodeAt(2) > 96 &&
+  key.charCodeAt(2) < 123
 
 const embeddedTags = ['IMG', 'VIDEO', 'CANVAS', 'SOURCE']
 
@@ -75,7 +80,7 @@ function shouldSetAsProp(
       return true
     }
     // or native onclick with function values
-    if (key in el && nativeOnRE.test(key) && isFunction(value)) {
+    if (key in el && isNativeOn(key) && isFunction(value)) {
       return true
     }
     return false
@@ -116,7 +121,7 @@ function shouldSetAsProp(
   }
 
   // native onclick with string value, must be set as attribute
-  if (nativeOnRE.test(key) && isString(value)) {
+  if (isNativeOn(key) && isString(value)) {
     return false
   }
 
diff --git a/packages/shared/src/general.ts b/packages/shared/src/general.ts
index 50e7eb42728..dcde4c8c6cc 100644
--- a/packages/shared/src/general.ts
+++ b/packages/shared/src/general.ts
@@ -12,8 +12,11 @@ export const NOOP = () => {}
  */
 export const NO = () => false
 
-const onRE = /^on[^a-z]/
-export const isOn = (key: string) => onRE.test(key)
+export const isOn = (key: string) =>
+  key.charCodeAt(0) === 111 /* o */ &&
+  key.charCodeAt(1) === 110 /* n */ &&
+  // uppercase letter
+  (key.charCodeAt(2) > 122 || key.charCodeAt(2) < 97)
 
 export const isModelListener = (key: string) => key.startsWith('onUpdate:')
 

From 9845f1d2a1ea8df7ae6db7ac3e012d1989fb448b Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 30 Nov 2023 17:59:27 +0800
Subject: [PATCH 05/47] chore: optimize widht/height element check

---
 packages/runtime-dom/src/patchProp.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
index 28753a90380..56deb38a57e 100644
--- a/packages/runtime-dom/src/patchProp.ts
+++ b/packages/runtime-dom/src/patchProp.ts
@@ -13,8 +13,6 @@ const isNativeOn = (key: string) =>
   key.charCodeAt(2) > 96 &&
   key.charCodeAt(2) < 123
 
-const embeddedTags = ['IMG', 'VIDEO', 'CANVAS', 'SOURCE']
-
 type DOMRendererOptions = RendererOptions<Node, Element>
 
 export const patchProp: DOMRendererOptions['patchProp'] = (
@@ -113,11 +111,11 @@ function shouldSetAsProp(
   }
 
   // #8780 the width or heigth of embedded tags must be set as attribute
-  if (
-    (key === 'width' || key === 'height') &&
-    embeddedTags.includes(el.tagName)
-  ) {
-    return false
+  if (key === 'width' || key === 'height') {
+    const tag = el.tagName
+    return (
+      tag === 'IMG' || tag === 'VIDEO' || tag === 'CANVAS' || tag === 'SOURCE'
+    )
   }
 
   // native onclick with string value, must be set as attribute

From 7cbcee3d831241a8bd3588ae92d3f27e3641e25f Mon Sep 17 00:00:00 2001
From: edison <daiwei521@126.com>
Date: Thu, 30 Nov 2023 18:03:23 +0800
Subject: [PATCH 06/47] fix(compiler-sfc): support resolving components from
 props (#8785)

---
 .../transforms/transformElement.spec.ts       | 22 +++++++++++++++++++
 .../src/transforms/transformElement.ts        |  7 ++++++
 2 files changed, 29 insertions(+)

diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index 97559369d8a..c83bdeebef2 100644
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -152,6 +152,28 @@ describe('compiler: element transform', () => {
     expect(node.tag).toBe(`Foo.Example`)
   })
 
+  test('resolve namespaced component from props bindings (inline)', () => {
+    const { root, node } = parseWithElementTransform(`<Foo.Example/>`, {
+      inline: true,
+      bindingMetadata: {
+        Foo: BindingTypes.PROPS
+      }
+    })
+    expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
+    expect(node.tag).toBe(`_unref(__props["Foo"]).Example`)
+  })
+
+  test('resolve namespaced component from props bindings (non-inline)', () => {
+    const { root, node } = parseWithElementTransform(`<Foo.Example/>`, {
+      inline: false,
+      bindingMetadata: {
+        Foo: BindingTypes.PROPS
+      }
+    })
+    expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
+    expect(node.tag).toBe('_unref($props["Foo"]).Example')
+  })
+
   test('do not resolve component from non-script-setup bindings', () => {
     const bindingMetadata = {
       Example: BindingTypes.SETUP_MAYBE_REF
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index fd61f011051..2b5f23a6177 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -385,6 +385,13 @@ function resolveSetupReference(name: string, context: TransformContext) {
         `${context.helperString(UNREF)}(${fromMaybeRef})`
       : `$setup[${JSON.stringify(fromMaybeRef)}]`
   }
+
+  const fromProps = checkType(BindingTypes.PROPS)
+  if (fromProps) {
+    return `${context.helperString(UNREF)}(${
+      context.inline ? '__props' : '$props'
+    }[${JSON.stringify(fromProps)}])`
+  }
 }
 
 export type PropsExpression = ObjectExpression | CallExpression | ExpressionNode

From 6fcec3b2c71ec86f1be54f587d4e7dfb107debb7 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 30 Nov 2023 18:33:53 +0800
Subject: [PATCH 07/47] chore: fix width/height check condition

---
 packages/runtime-dom/src/patchProp.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
index 56deb38a57e..e5883d18fca 100644
--- a/packages/runtime-dom/src/patchProp.ts
+++ b/packages/runtime-dom/src/patchProp.ts
@@ -113,8 +113,11 @@ function shouldSetAsProp(
   // #8780 the width or heigth of embedded tags must be set as attribute
   if (key === 'width' || key === 'height') {
     const tag = el.tagName
-    return (
-      tag === 'IMG' || tag === 'VIDEO' || tag === 'CANVAS' || tag === 'SOURCE'
+    return !(
+      tag === 'IMG' ||
+      tag === 'VIDEO' ||
+      tag === 'CANVAS' ||
+      tag === 'SOURCE'
     )
   }
 

From 5199a12f8855cd06f24bf355708b5a2134f63176 Mon Sep 17 00:00:00 2001
From: edison <daiwei521@126.com>
Date: Thu, 30 Nov 2023 18:35:20 +0800
Subject: [PATCH 08/47] fix(cssVars): cssVar names should be double-escaped
 when generating code for ssr (#8824)

close #7823
---
 .../__snapshots__/compileScript.spec.ts.snap       |  4 +++-
 .../compiler-sfc/__tests__/compileScript.spec.ts   |  3 +++
 packages/compiler-sfc/src/script/utils.ts          |  6 ++++--
 packages/compiler-sfc/src/style/cssVars.ts         | 14 +++++++++++---
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 073874363b8..b0076294efe 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -1003,10 +1003,12 @@ export default {
   setup(__props) {
 
         const count = ref(0)
+        const style = { color: 'red' }
         
 return (_ctx, _push, _parent, _attrs) => {
   const _cssVars = { style: {
-  \\"--xxxxxxxx-count\\": (count.value)
+  \\"--xxxxxxxx-count\\": (count.value),
+  \\"--xxxxxxxx-style\\\\\\\\.color\\": (style.color)
 }}
   _push(\`<!--[--><div\${
     _ssrRenderAttrs(_cssVars)
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 312e93fccbe..d046fbd9d34 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -778,6 +778,7 @@ describe('SFC compile <script setup>', () => {
         <script setup>
         import { ref } from 'vue'
         const count = ref(0)
+        const style = { color: 'red' }
         </script>
         <template>
           <div>{{ count }}</div>
@@ -785,6 +786,7 @@ describe('SFC compile <script setup>', () => {
         </template>
         <style>
         div { color: v-bind(count) }
+        span { color: v-bind(style.color) }
         </style>
         `,
         {
@@ -799,6 +801,7 @@ describe('SFC compile <script setup>', () => {
       expect(content).toMatch(`ssrInterpolate`)
       expect(content).not.toMatch(`useCssVars`)
       expect(content).toMatch(`"--${mockId}-count": (count.value)`)
+      expect(content).toMatch(`"--${mockId}-style\\\\.color": (style.color)`)
       assertCode(content)
     })
 
diff --git a/packages/compiler-sfc/src/script/utils.ts b/packages/compiler-sfc/src/script/utils.ts
index 3cbc270269a..bc621d25840 100644
--- a/packages/compiler-sfc/src/script/utils.ts
+++ b/packages/compiler-sfc/src/script/utils.ts
@@ -121,6 +121,8 @@ export function getEscapedPropName(key: string) {
 
 export const cssVarNameEscapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
 
-export function getEscapedCssVarName(key: string) {
-  return key.replace(cssVarNameEscapeSymbolsRE, s => `\\${s}`)
+export function getEscapedCssVarName(key: string, doubleEscape: boolean) {
+  return key.replace(cssVarNameEscapeSymbolsRE, s =>
+    doubleEscape ? `\\\\${s}` : `\\${s}`
+  )
 }
diff --git a/packages/compiler-sfc/src/style/cssVars.ts b/packages/compiler-sfc/src/style/cssVars.ts
index 9fe727bc5dc..cb5274bc287 100644
--- a/packages/compiler-sfc/src/style/cssVars.ts
+++ b/packages/compiler-sfc/src/style/cssVars.ts
@@ -22,17 +22,25 @@ export function genCssVarsFromList(
 ): string {
   return `{\n  ${vars
     .map(
-      key => `"${isSSR ? `--` : ``}${genVarName(id, key, isProd)}": (${key})`
+      key =>
+        `"${isSSR ? `--` : ``}${genVarName(id, key, isProd, isSSR)}": (${key})`
     )
     .join(',\n  ')}\n}`
 }
 
-function genVarName(id: string, raw: string, isProd: boolean): string {
+function genVarName(
+  id: string,
+  raw: string,
+  isProd: boolean,
+  isSSR = false
+): string {
   if (isProd) {
     return hash(id + raw)
   } else {
     // escape ASCII Punctuation & Symbols
-    return `${id}-${getEscapedCssVarName(raw)}`
+    // #7823 need to double-escape in SSR because the attributes are rendered
+    // into an HTML string
+    return `${id}-${getEscapedCssVarName(raw, isSSR)}`
   }
 }
 

From 4936d2e11a8d0ca3704bfe408548cb26bb3fd5e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 30 Nov 2023 18:41:21 +0800
Subject: [PATCH 09/47] fix(compiler-sfc): throw error when failing to load TS
 during type resolution (#8883)

---
 .../compiler-sfc/src/script/resolveType.ts    | 27 +++++++++++++++++--
 packages/vue/compiler-sfc/register-ts.js      |  4 +--
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/compiler-sfc/src/script/resolveType.ts b/packages/compiler-sfc/src/script/resolveType.ts
index cf96007beee..d9b4dd1cb8c 100644
--- a/packages/compiler-sfc/src/script/resolveType.ts
+++ b/packages/compiler-sfc/src/script/resolveType.ts
@@ -719,7 +719,25 @@ let loadTS: (() => typeof TS) | undefined
  * @private
  */
 export function registerTS(_loadTS: () => typeof TS) {
-  loadTS = _loadTS
+  loadTS = () => {
+    try {
+      return _loadTS()
+    } catch (err: any) {
+      if (
+        typeof err.message === 'string' &&
+        err.message.includes('Cannot find module')
+      ) {
+        throw new Error(
+          'Failed to load TypeScript, which is required for resolving imported types. ' +
+            'Please make sure "typescript" is installed as a project dependency.'
+        )
+      } else {
+        throw new Error(
+          'Failed to load TypeScript for resolving imported types.'
+        )
+      }
+    }
+  }
 }
 
 type FS = NonNullable<SFCScriptCompileOptions['fs']>
@@ -768,7 +786,12 @@ function importSourceToScope(
   scope: TypeScope,
   source: string
 ): TypeScope {
-  const fs = resolveFS(ctx)
+  let fs: FS | undefined
+  try {
+    fs = resolveFS(ctx)
+  } catch (err: any) {
+    return ctx.error(err.message, node, scope)
+  }
   if (!fs) {
     return ctx.error(
       `No fs option provided to \`compileScript\` in non-Node environment. ` +
diff --git a/packages/vue/compiler-sfc/register-ts.js b/packages/vue/compiler-sfc/register-ts.js
index 7a073b3a3f8..36de2a350d6 100644
--- a/packages/vue/compiler-sfc/register-ts.js
+++ b/packages/vue/compiler-sfc/register-ts.js
@@ -1,5 +1,3 @@
 if (typeof require !== 'undefined') {
-  try {
-    require('@vue/compiler-sfc').registerTS(() => require('typescript'))
-  } catch (e) {}
+  require('@vue/compiler-sfc').registerTS(() => require('typescript'))
 }

From da4a4fb5e8eee3c6d31f24ebd79a9d0feca56cb2 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 30 Nov 2023 19:00:00 +0800
Subject: [PATCH 10/47] perf(runtime-dom): cache modifier wrapper functions

close #8882
---
 packages/runtime-dom/src/directives/vOn.ts | 88 ++++++++++++----------
 1 file changed, 50 insertions(+), 38 deletions(-)

diff --git a/packages/runtime-dom/src/directives/vOn.ts b/packages/runtime-dom/src/directives/vOn.ts
index 06e596266cf..b1f4492e0ac 100644
--- a/packages/runtime-dom/src/directives/vOn.ts
+++ b/packages/runtime-dom/src/directives/vOn.ts
@@ -32,14 +32,20 @@ const modifierGuards: Record<
 /**
  * @private
  */
-export const withModifiers = (fn: Function, modifiers: string[]) => {
-  return (event: Event, ...args: unknown[]) => {
-    for (let i = 0; i < modifiers.length; i++) {
-      const guard = modifierGuards[modifiers[i]]
-      if (guard && guard(event, modifiers)) return
-    }
-    return fn(event, ...args)
-  }
+export const withModifiers = (
+  fn: Function & { _withMods?: Function },
+  modifiers: string[]
+) => {
+  return (
+    fn._withMods ||
+    (fn._withMods = (event: Event, ...args: unknown[]) => {
+      for (let i = 0; i < modifiers.length; i++) {
+        const guard = modifierGuards[modifiers[i]]
+        if (guard && guard(event, modifiers)) return
+      }
+      return fn(event, ...args)
+    })
+  )
 }
 
 // Kept for 2.x compat.
@@ -57,7 +63,10 @@ const keyNames: Record<string, string | string[]> = {
 /**
  * @private
  */
-export const withKeys = (fn: Function, modifiers: string[]) => {
+export const withKeys = (
+  fn: Function & { _withKeys?: Function },
+  modifiers: string[]
+) => {
   let globalKeyCodes: LegacyConfig['keyCodes']
   let instance: ComponentInternalInstance | null = null
   if (__COMPAT__) {
@@ -77,40 +86,43 @@ export const withKeys = (fn: Function, modifiers: string[]) => {
     }
   }
 
-  return (event: KeyboardEvent) => {
-    if (!('key' in event)) {
-      return
-    }
-
-    const eventKey = hyphenate(event.key)
-    if (modifiers.some(k => k === eventKey || keyNames[k] === eventKey)) {
-      return fn(event)
-    }
+  return (
+    fn._withKeys ||
+    (fn._withKeys = (event: KeyboardEvent) => {
+      if (!('key' in event)) {
+        return
+      }
 
-    if (__COMPAT__) {
-      const keyCode = String(event.keyCode)
-      if (
-        compatUtils.isCompatEnabled(
-          DeprecationTypes.V_ON_KEYCODE_MODIFIER,
-          instance
-        ) &&
-        modifiers.some(mod => mod == keyCode)
-      ) {
+      const eventKey = hyphenate(event.key)
+      if (modifiers.some(k => k === eventKey || keyNames[k] === eventKey)) {
         return fn(event)
       }
-      if (globalKeyCodes) {
-        for (const mod of modifiers) {
-          const codes = globalKeyCodes[mod]
-          if (codes) {
-            const matches = isArray(codes)
-              ? codes.some(code => String(code) === keyCode)
-              : String(codes) === keyCode
-            if (matches) {
-              return fn(event)
+
+      if (__COMPAT__) {
+        const keyCode = String(event.keyCode)
+        if (
+          compatUtils.isCompatEnabled(
+            DeprecationTypes.V_ON_KEYCODE_MODIFIER,
+            instance
+          ) &&
+          modifiers.some(mod => mod == keyCode)
+        ) {
+          return fn(event)
+        }
+        if (globalKeyCodes) {
+          for (const mod of modifiers) {
+            const codes = globalKeyCodes[mod]
+            if (codes) {
+              const matches = isArray(codes)
+                ? codes.some(code => String(code) === keyCode)
+                : String(codes) === keyCode
+              if (matches) {
+                return fn(event)
+              }
             }
           }
         }
       }
-    }
-  }
+    })
+  )
 }

From 4d94ebfe75174b340d2b794e699cad1add3600a9 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 30 Nov 2023 19:26:36 +0800
Subject: [PATCH 11/47] perf(v-on): constant handlers with modifiers should not
 be treated as dynamic

---
 .../transforms/transformElement.spec.ts       | 14 +++++++++++
 .../src/transforms/transformElement.ts        |  9 ++++++-
 .../__tests__/transforms/vOn.spec.ts          | 24 +++++++++++++++----
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index c83bdeebef2..678d01cbc7d 100644
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -1160,6 +1160,20 @@ describe('compiler: element transform', () => {
         genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION])
       )
     })
+
+    test('should not have PROPS patchflag for constant v-on handlers', () => {
+      const { node } = parseWithElementTransform(`<div @keydown="foo" />`, {
+        prefixIdentifiers: true,
+        bindingMetadata: {
+          foo: BindingTypes.SETUP_CONST
+        },
+        directiveTransforms: {
+          on: transformOn
+        }
+      })
+      // should only have hydration flag
+      expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_HYDRATION))
+    })
   })
 
   describe('dynamic component', () => {
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 2b5f23a6177..ccede37777d 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -19,7 +19,8 @@ import {
   TemplateTextChildNode,
   DirectiveArguments,
   createVNodeCall,
-  ConstantTypes
+  ConstantTypes,
+  JSChildNode
 } from '../ast'
 import {
   PatchFlags,
@@ -459,6 +460,12 @@ export function buildProps(
         hasVnodeHook = true
       }
 
+      if (isEventHandler && value.type === NodeTypes.JS_CALL_EXPRESSION) {
+        // handler wrapped with internal helper e.g. withModifiers(fn)
+        // extract the actual expression
+        value = value.arguments[0] as JSChildNode
+      }
+
       if (
         value.type === NodeTypes.JS_CACHE_EXPRESSION ||
         ((value.type === NodeTypes.SIMPLE_EXPRESSION ||
diff --git a/packages/compiler-dom/__tests__/transforms/vOn.spec.ts b/packages/compiler-dom/__tests__/transforms/vOn.spec.ts
index 79ffcdef03c..42b4cd79888 100644
--- a/packages/compiler-dom/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vOn.spec.ts
@@ -7,7 +7,8 @@ import {
   NodeTypes,
   ObjectExpression,
   transform,
-  VNodeCall
+  VNodeCall,
+  BindingTypes
 } from '@vue/compiler-core'
 import { transformOn } from '../../src/transforms/vOn'
 import { V_ON_WITH_KEYS, V_ON_WITH_MODIFIERS } from '../../src/runtimeHelpers'
@@ -25,12 +26,11 @@ function parseWithVOn(template: string, options: CompilerOptions = {}) {
     },
     ...options
   })
+  const node = (ast.children[0] as ElementNode).codegenNode as VNodeCall
   return {
     root: ast,
-    props: (
-      ((ast.children[0] as ElementNode).codegenNode as VNodeCall)
-        .props as ObjectExpression
-    ).properties
+    node,
+    props: (node.props as ObjectExpression).properties
   }
 }
 
@@ -288,4 +288,18 @@ describe('compiler-dom: transform v-on', () => {
       }
     })
   })
+
+  test('should not have PROPS patchFlag for constant v-on handlers with modifiers', () => {
+    const { node } = parseWithVOn(`<div @keydown.up="foo" />`, {
+      prefixIdentifiers: true,
+      bindingMetadata: {
+        foo: BindingTypes.SETUP_CONST
+      },
+      directiveTransforms: {
+        on: transformOn
+      }
+    })
+    // should only have hydration flag
+    expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_HYDRATION))
+  })
 })

From dd26e982338aed0883123bf38957589099ff2f54 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 30 Nov 2023 21:44:28 +0800
Subject: [PATCH 12/47] chore(playground): use CodeMirror during local dev

---
 packages/sfc-playground/src/App.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index d3b1dfa5965..0b97faba0b6 100644
--- a/packages/sfc-playground/src/App.vue
+++ b/packages/sfc-playground/src/App.vue
@@ -1,8 +1,22 @@
 <script setup lang="ts">
 import Header from './Header.vue'
 import { Repl, ReplStore, SFCOptions } from '@vue/repl'
-import Monaco from '@vue/repl/monaco-editor'
+import type Monaco from '@vue/repl/monaco-editor'
+import type CodeMirror from '@vue/repl/codemirror-editor'
 import { ref, watchEffect, onMounted } from 'vue'
+import { shallowRef } from 'vue'
+
+const EditorComponent = shallowRef<typeof Monaco | typeof CodeMirror>()
+
+if (import.meta.env.DEV) {
+  import('@vue/repl/codemirror-editor').then(
+    mod => (EditorComponent.value = mod.default)
+  )
+} else {
+  import('@vue/repl/monaco-editor').then(
+    mod => (EditorComponent.value = mod.default)
+  )
+}
 
 const setVH = () => {
   document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
@@ -97,8 +111,9 @@ onMounted(() => {
     @toggle-ssr="toggleSSR"
   />
   <Repl
+    v-if="EditorComponent"
     :theme="theme"
-    :editor="Monaco"
+    :editor="EditorComponent"
     @keydown.ctrl.s.prevent
     @keydown.meta.s.prevent
     :ssr="useSSRMode"

From ad274737015c36906d76f3189203093fa3a2e4e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Fri, 1 Dec 2023 02:33:09 +0800
Subject: [PATCH 13/47] fix(types): fix reactive collection types (#8960)

close #8904
---
 packages/dts-test/reactivity.test-d.ts        | 28 +++++++++++++++++++
 packages/reactivity/src/collectionHandlers.ts |  2 +-
 packages/reactivity/src/ref.ts                | 24 ++++++++++------
 3 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/packages/dts-test/reactivity.test-d.ts b/packages/dts-test/reactivity.test-d.ts
index 4504f9e352d..431bbafbdf4 100644
--- a/packages/dts-test/reactivity.test-d.ts
+++ b/packages/dts-test/reactivity.test-d.ts
@@ -62,3 +62,31 @@ describe('should unwrap tuple correctly', () => {
   const reactiveTuple = reactive(tuple)
   expectType<Ref<number>>(reactiveTuple[0])
 })
+
+describe('should unwrap Map correctly', () => {
+  const map = reactive(new Map<string, Ref<number>>())
+  expectType<Ref<number>>(map.get('a')!)
+
+  const map2 = reactive(new Map<string, { wrap: Ref<number> }>())
+  expectType<number>(map2.get('a')!.wrap)
+
+  const wm = reactive(new WeakMap<object, Ref<number>>())
+  expectType<Ref<number>>(wm.get({})!)
+
+  const wm2 = reactive(new WeakMap<object, { wrap: Ref<number> }>())
+  expectType<number>(wm2.get({})!.wrap)
+})
+
+describe('should unwrap Set correctly', () => {
+  const set = reactive(new Set<Ref<number>>())
+  expectType<Set<Ref<number>>>(set)
+
+  const set2 = reactive(new Set<{ wrap: Ref<number> }>())
+  expectType<Set<{ wrap: number }>>(set2)
+
+  const ws = reactive(new WeakSet<Ref<number>>())
+  expectType<WeakSet<Ref<number>>>(ws)
+
+  const ws2 = reactive(new WeakSet<{ wrap: Ref<number> }>())
+  expectType<WeakSet<{ wrap: number }>>(ws2)
+})
diff --git a/packages/reactivity/src/collectionHandlers.ts b/packages/reactivity/src/collectionHandlers.ts
index ecdcae00b7c..abf623f551c 100644
--- a/packages/reactivity/src/collectionHandlers.ts
+++ b/packages/reactivity/src/collectionHandlers.ts
@@ -3,7 +3,7 @@ import { track, trigger, ITERATE_KEY, MAP_KEY_ITERATE_KEY } from './effect'
 import { TrackOpTypes, TriggerOpTypes } from './operations'
 import { capitalize, hasOwn, hasChanged, toRawType, isMap } from '@vue/shared'
 
-export type CollectionTypes = IterableCollections | WeakCollections
+type CollectionTypes = IterableCollections | WeakCollections
 
 type IterableCollections = Map<any, any> | Set<any>
 type WeakCollections = WeakMap<any, any> | WeakSet<any>
diff --git a/packages/reactivity/src/ref.ts b/packages/reactivity/src/ref.ts
index 201766158ed..9f7ebdad822 100644
--- a/packages/reactivity/src/ref.ts
+++ b/packages/reactivity/src/ref.ts
@@ -17,7 +17,6 @@ import {
   isShallow
 } from './reactive'
 import type { ShallowReactiveMarker } from './reactive'
-import { CollectionTypes } from './collectionHandlers'
 import { createDep, Dep } from './dep'
 
 declare const RefSymbol: unique symbol
@@ -492,16 +491,23 @@ export type UnwrapRef<T> = T extends ShallowRef<infer V>
 
 export type UnwrapRefSimple<T> = T extends
   | Function
-  | CollectionTypes
   | BaseTypes
   | Ref
   | RefUnwrapBailTypes[keyof RefUnwrapBailTypes]
   | { [RawSymbol]?: true }
   ? T
-  : T extends ReadonlyArray<any>
-    ? { [K in keyof T]: UnwrapRefSimple<T[K]> }
-    : T extends object & { [ShallowReactiveMarker]?: never }
-      ? {
-          [P in keyof T]: P extends symbol ? T[P] : UnwrapRef<T[P]>
-        }
-      : T
+  : T extends Map<infer K, infer V>
+    ? Map<K, UnwrapRefSimple<V>>
+    : T extends WeakMap<infer K, infer V>
+      ? WeakMap<K, UnwrapRefSimple<V>>
+      : T extends Set<infer V>
+        ? Set<UnwrapRefSimple<V>>
+        : T extends WeakSet<infer V>
+          ? WeakSet<UnwrapRefSimple<V>>
+          : T extends ReadonlyArray<any>
+            ? { [K in keyof T]: UnwrapRefSimple<T[K]> }
+            : T extends object & { [ShallowReactiveMarker]?: never }
+              ? {
+                  [P in keyof T]: P extends symbol ? T[P] : UnwrapRef<T[P]>
+                }
+              : T

From 887e54c347ea9eac4c721b5e2288f054873d1d30 Mon Sep 17 00:00:00 2001
From: Blake Newman <blake.newman@askattest.com>
Date: Thu, 30 Nov 2023 18:37:51 +0000
Subject: [PATCH 14/47] fix(types): expose emits as props in functional
 components (#9234)

---
 packages/dts-test/functionalComponent.test-d.tsx | 2 +-
 packages/runtime-core/src/component.ts           | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/dts-test/functionalComponent.test-d.tsx b/packages/dts-test/functionalComponent.test-d.tsx
index 827e8d63fe7..22efc5849ed 100644
--- a/packages/dts-test/functionalComponent.test-d.tsx
+++ b/packages/dts-test/functionalComponent.test-d.tsx
@@ -45,7 +45,7 @@ Bar.emits = {
 Bar.emits = { baz: () => void 0 }
 
 // TSX
-expectType<JSX.Element>(<Bar foo={1} />)
+expectType<JSX.Element>(<Bar foo={1} onUpdate={() => {}} />)
 //  @ts-expect-error
 ;<Foo />
 //  @ts-expect-error
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 309a7eb0e22..348228081ff 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -50,7 +50,8 @@ import {
   ObjectEmitsOptions,
   EmitFn,
   emit,
-  normalizeEmitsOptions
+  normalizeEmitsOptions,
+  EmitsToProps
 } from './componentEmits'
 import {
   EMPTY_OBJ,
@@ -131,7 +132,7 @@ export interface FunctionalComponent<
 > extends ComponentInternalOptions {
   // use of any here is intentional so it can be a valid JSX Element constructor
   (
-    props: P,
+    props: P & EmitsToProps<E>,
     ctx: Omit<SetupContext<E, IfAny<S, {}, SlotsType<S>>>, 'expose'>
   ): any
   props?: ComponentPropsOptions<P>

From eaeab78915cee08d61e07152daffbf21ead95fcd Mon Sep 17 00:00:00 2001
From: Abhay Chauhan <60472462+abhay-111@users.noreply.github.com>
Date: Fri, 1 Dec 2023 00:13:56 +0530
Subject: [PATCH 15/47] chore: improve comment readability (#8598) [ci skip]

---
 scripts/dev.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/dev.js b/scripts/dev.js
index ec5f9c674cd..c784d96d3b1 100644
--- a/scripts/dev.js
+++ b/scripts/dev.js
@@ -2,7 +2,7 @@
 
 // Using esbuild for faster dev builds.
 // We are still using Rollup for production builds because it generates
-// smaller files w/ better tree-shaking.
+// smaller files and provides better tree-shaking.
 
 import esbuild from 'esbuild'
 import { resolve, relative, dirname } from 'node:path'

From cdb2df707b9f85d9ea8835611814a4992ac512b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E6=9E=9C=E5=B1=B1=E5=A4=A7=E5=9C=A3?=
 <316783812@qq.com>
Date: Fri, 1 Dec 2023 02:45:03 +0800
Subject: [PATCH 16/47] chore(dx): improve color contrast in dark mode for
 custom formatter (#8704)

---
 packages/runtime-core/src/customFormatter.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/runtime-core/src/customFormatter.ts b/packages/runtime-core/src/customFormatter.ts
index 768240feb62..b30a876d922 100644
--- a/packages/runtime-core/src/customFormatter.ts
+++ b/packages/runtime-core/src/customFormatter.ts
@@ -11,9 +11,9 @@ export function initCustomFormatter() {
   }
 
   const vueStyle = { style: 'color:#3ba776' }
-  const numberStyle = { style: 'color:#0b1bc9' }
-  const stringStyle = { style: 'color:#b62e24' }
-  const keywordStyle = { style: 'color:#9d288c' }
+  const numberStyle = { style: 'color:#1677ff' }
+  const stringStyle = { style: 'color:#f5222d' }
+  const keywordStyle = { style: 'color:#eb2f96' }
 
   // custom formatter for Chrome
   // https://www.mattzeunert.com/2016/02/19/custom-chrome-devtools-object-formatters.html

From 8d74ca0e6fa2738ca6854b7e879ff59419f948c7 Mon Sep 17 00:00:00 2001
From: edison <daiwei521@126.com>
Date: Fri, 1 Dec 2023 02:52:26 +0800
Subject: [PATCH 17/47] fix(compiler-sfc): generate more treeshaking friendly
 code (#9507)

close #9500
---
 .../__snapshots__/defineModel.spec.ts.snap           |  6 +++---
 .../__snapshots__/defineProps.spec.ts.snap           |  8 ++++----
 .../definePropsDestructure.spec.ts.snap              |  6 +++---
 .../__tests__/compileScript/defineModel.spec.ts      |  4 ++--
 .../compileScript/definePropsDestructure.spec.ts     |  7 ++++---
 packages/compiler-sfc/src/script/defineEmits.ts      |  4 +++-
 packages/compiler-sfc/src/script/defineProps.ts      | 12 +++++++-----
 7 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap
index 297ee62724c..27c358c5a94 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap
@@ -27,7 +27,7 @@ exports[`defineModel() > w/ array props 1`] = `
 "import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
 
 export default {
-  props: _mergeModels(['foo', 'bar'], {
+  props: /*#__PURE__*/_mergeModels(['foo', 'bar'], {
     \\"count\\": {},
   }),
   emits: [\\"update:count\\"],
@@ -47,10 +47,10 @@ exports[`defineModel() > w/ defineProps and defineEmits 1`] = `
 "import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
 
 export default {
-  props: _mergeModels({ foo: String }, {
+  props: /*#__PURE__*/_mergeModels({ foo: String }, {
     \\"modelValue\\": { default: 0 },
   }),
-  emits: _mergeModels(['change'], [\\"update:modelValue\\"]),
+  emits: /*#__PURE__*/_mergeModels(['change'], [\\"update:modelValue\\"]),
   setup(__props, { expose: __expose }) {
   __expose();
 
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap
index 158b5c8f555..c5f50be5d36 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap
@@ -332,7 +332,7 @@ exports[`defineProps > withDefaults (dynamic) 1`] = `
 import { defaults } from './foo'
     
 export default /*#__PURE__*/_defineComponent({
-  props: _mergeDefaults({
+  props: /*#__PURE__*/_mergeDefaults({
     foo: { type: String, required: false },
     bar: { type: Number, required: false },
     baz: { type: Boolean, required: true }
@@ -353,7 +353,7 @@ exports[`defineProps > withDefaults (dynamic) w/ production mode 1`] = `
 import { defaults } from './foo'
     
 export default /*#__PURE__*/_defineComponent({
-  props: _mergeDefaults({
+  props: /*#__PURE__*/_mergeDefaults({
     foo: { type: Function },
     bar: { type: Boolean },
     baz: { type: [Boolean, Function] },
@@ -375,7 +375,7 @@ exports[`defineProps > withDefaults (reference) 1`] = `
 import { defaults } from './foo'
     
 export default /*#__PURE__*/_defineComponent({
-  props: _mergeDefaults({
+  props: /*#__PURE__*/_mergeDefaults({
     foo: { type: String, required: false },
     bar: { type: Number, required: false },
     baz: { type: Boolean, required: true }
@@ -462,7 +462,7 @@ exports[`defineProps > withDefaults w/ dynamic object method 1`] = `
 "import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
-  props: _mergeDefaults({
+  props: /*#__PURE__*/_mergeDefaults({
     foo: { type: Function, required: false }
   }, {
       ['fo' + 'o']() { return 'foo' }
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap
index c31005c40c0..5aa7d3e871f 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap
@@ -62,7 +62,7 @@ exports[`sfc reactive props destructure > default values w/ array runtime declar
 "import { mergeDefaults as _mergeDefaults } from 'vue'
 
 export default {
-  props: _mergeDefaults(['foo', 'bar', 'baz'], {
+  props: /*#__PURE__*/_mergeDefaults(['foo', 'bar', 'baz'], {
   foo: 1,
   bar: () => ({}),
   func: () => {}, __skip_func: true
@@ -81,7 +81,7 @@ exports[`sfc reactive props destructure > default values w/ object runtime decla
 "import { mergeDefaults as _mergeDefaults } from 'vue'
 
 export default {
-  props: _mergeDefaults({ foo: Number, bar: Object, func: Function, ext: null }, {
+  props: /*#__PURE__*/_mergeDefaults({ foo: Number, bar: Object, func: Function, ext: null }, {
   foo: 1,
   bar: () => ({}),
   func: () => {}, __skip_func: true,
@@ -101,7 +101,7 @@ exports[`sfc reactive props destructure > default values w/ runtime declaration
 "import { mergeDefaults as _mergeDefaults } from 'vue'
 
 export default {
-  props: _mergeDefaults(['foo', 'foo:bar'], {
+  props: /*#__PURE__*/_mergeDefaults(['foo', 'foo:bar'], {
   foo: 1,
   \\"foo:bar\\": 'foo-bar'
 }),
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts
index 10fab947c13..46890109cd1 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts
@@ -48,7 +48,7 @@ describe('defineModel()', () => {
       { defineModel: true }
     )
     assertCode(content)
-    expect(content).toMatch(`props: _mergeModels({ foo: String }`)
+    expect(content).toMatch(`props: /*#__PURE__*/_mergeModels({ foo: String }`)
     expect(content).toMatch(`"modelValue": { default: 0 }`)
     expect(content).toMatch(`const count = _useModel(__props, "modelValue")`)
     expect(content).not.toMatch('defineModel')
@@ -70,7 +70,7 @@ describe('defineModel()', () => {
       { defineModel: true }
     )
     assertCode(content)
-    expect(content).toMatch(`props: _mergeModels(['foo', 'bar'], {
+    expect(content).toMatch(`props: /*#__PURE__*/_mergeModels(['foo', 'bar'], {
     "count": {},
   })`)
     expect(content).toMatch(`const count = _useModel(__props, "count")`)
diff --git a/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts b/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts
index a41f3131bef..89cc31340af 100644
--- a/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts
@@ -78,7 +78,8 @@ describe('sfc reactive props destructure', () => {
     // literals can be used as-is, non-literals are always returned from a
     // function
     // functions need to be marked with a skip marker
-    expect(content).toMatch(`props: _mergeDefaults(['foo', 'bar', 'baz'], {
+    expect(content)
+      .toMatch(`props: /*#__PURE__*/_mergeDefaults(['foo', 'bar', 'baz'], {
   foo: 1,
   bar: () => ({}),
   func: () => {}, __skip_func: true
@@ -98,7 +99,7 @@ describe('sfc reactive props destructure', () => {
     // safely infer whether runtime type is Function (e.g. if the runtime decl
     // is imported, or spreads another object)
     expect(content)
-      .toMatch(`props: _mergeDefaults({ foo: Number, bar: Object, func: Function, ext: null }, {
+      .toMatch(`props: /*#__PURE__*/_mergeDefaults({ foo: Number, bar: Object, func: Function, ext: null }, {
   foo: 1,
   bar: () => ({}),
   func: () => {}, __skip_func: true,
@@ -122,7 +123,7 @@ describe('sfc reactive props destructure', () => {
     })
 
     expect(content).toMatch(`
-  props: _mergeDefaults(['foo', 'foo:bar'], {
+  props: /*#__PURE__*/_mergeDefaults(['foo', 'foo:bar'], {
   foo: 1,
   "foo:bar": 'foo-bar'
 }),`)
diff --git a/packages/compiler-sfc/src/script/defineEmits.ts b/packages/compiler-sfc/src/script/defineEmits.ts
index 8bd4cdfe543..44a3f2c8df3 100644
--- a/packages/compiler-sfc/src/script/defineEmits.ts
+++ b/packages/compiler-sfc/src/script/defineEmits.ts
@@ -58,7 +58,9 @@ export function genRuntimeEmits(ctx: ScriptCompileContext): string | undefined {
       .map(n => JSON.stringify(`update:${n}`))
       .join(', ')}]`
     emitsDecl = emitsDecl
-      ? `${ctx.helper('mergeModels')}(${emitsDecl}, ${modelEmitsDecl})`
+      ? `/*#__PURE__*/${ctx.helper(
+          'mergeModels'
+        )}(${emitsDecl}, ${modelEmitsDecl})`
       : modelEmitsDecl
   }
   return emitsDecl
diff --git a/packages/compiler-sfc/src/script/defineProps.ts b/packages/compiler-sfc/src/script/defineProps.ts
index 9de15b92b76..0d35cdd776c 100644
--- a/packages/compiler-sfc/src/script/defineProps.ts
+++ b/packages/compiler-sfc/src/script/defineProps.ts
@@ -144,7 +144,7 @@ export function genRuntimeProps(ctx: ScriptCompileContext): string | undefined {
           )
       }
       if (defaults.length) {
-        propsDecls = `${ctx.helper(
+        propsDecls = `/*#__PURE__*/${ctx.helper(
           `mergeDefaults`
         )}(${propsDecls}, {\n  ${defaults.join(',\n  ')}\n})`
       }
@@ -156,7 +156,9 @@ export function genRuntimeProps(ctx: ScriptCompileContext): string | undefined {
   const modelsDecls = genModelProps(ctx)
 
   if (propsDecls && modelsDecls) {
-    return `${ctx.helper('mergeModels')}(${propsDecls}, ${modelsDecls})`
+    return `/*#__PURE__*/${ctx.helper(
+      'mergeModels'
+    )}(${propsDecls}, ${modelsDecls})`
   } else {
     return modelsDecls || propsDecls
   }
@@ -184,9 +186,9 @@ function genRuntimePropsFromTypes(ctx: ScriptCompileContext) {
     ${propStrings.join(',\n    ')}\n  }`
 
   if (ctx.propsRuntimeDefaults && !hasStaticDefaults) {
-    propsDecls = `${ctx.helper('mergeDefaults')}(${propsDecls}, ${ctx.getString(
-      ctx.propsRuntimeDefaults
-    )})`
+    propsDecls = `/*#__PURE__*/${ctx.helper(
+      'mergeDefaults'
+    )}(${propsDecls}, ${ctx.getString(ctx.propsRuntimeDefaults)})`
   }
 
   return propsDecls

From 30d5d93a92b2154406ec04f8aca6b217fa01177c Mon Sep 17 00:00:00 2001
From: edison <daiwei521@126.com>
Date: Fri, 1 Dec 2023 15:54:40 +0800
Subject: [PATCH 18/47] fix(ssr): avoid computed being accidentally cached
 before server render (#9688)

close #5300
---
 .../server-renderer/__tests__/render.spec.ts  | 47 ++++++++++++++++++-
 .../__tests__/ssrComputed.spec.ts             |  1 -
 packages/server-renderer/src/render.ts        |  5 +-
 3 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/packages/server-renderer/__tests__/render.spec.ts b/packages/server-renderer/__tests__/render.spec.ts
index 0abaebf088e..1899c767085 100644
--- a/packages/server-renderer/__tests__/render.spec.ts
+++ b/packages/server-renderer/__tests__/render.spec.ts
@@ -17,7 +17,10 @@ import {
   renderSlot,
   onErrorCaptured,
   onServerPrefetch,
-  getCurrentInstance
+  getCurrentInstance,
+  reactive,
+  computed,
+  createSSRApp
 } from 'vue'
 import { escapeHtml } from '@vue/shared'
 import { renderToString } from '../src/renderToString'
@@ -1140,5 +1143,47 @@ function testRender(type: string, render: typeof renderToString) {
       expect(renderError).toBe(null)
       expect((capturedError as unknown as Error).message).toBe('An error')
     })
+
+    test('computed reactivity during SSR with onServerPrefetch', async () => {
+      const store = {
+        // initial state could be hydrated
+        state: reactive({ items: null as null | string[] }),
+
+        // pretend to fetch some data from an api
+        async fetchData() {
+          this.state.items = ['hello', 'world']
+        }
+      }
+
+      const getterSpy = vi.fn()
+
+      const App = defineComponent(() => {
+        const msg = computed(() => {
+          getterSpy()
+          return store.state.items?.join(' ')
+        })
+
+        // If msg value is falsy then we are either in ssr context or on the client
+        // and the initial state was not modified/hydrated.
+        // In both cases we need to fetch data.
+        onServerPrefetch(() => store.fetchData())
+
+        // simulate the read from a composable (e.g. filtering a list of results)
+        msg.value
+
+        return () => h('div', null, msg.value)
+      })
+
+      const app = createSSRApp(App)
+
+      // in real world serve this html and append store state for hydration on client
+      const html = await renderToString(app)
+
+      expect(html).toMatch('hello world')
+
+      // should only be called twice since access should be cached
+      // during the render phase
+      expect(getterSpy).toHaveBeenCalledTimes(2)
+    })
   })
 }
diff --git a/packages/server-renderer/__tests__/ssrComputed.spec.ts b/packages/server-renderer/__tests__/ssrComputed.spec.ts
index 5c5850e006d..52b45a63636 100644
--- a/packages/server-renderer/__tests__/ssrComputed.spec.ts
+++ b/packages/server-renderer/__tests__/ssrComputed.spec.ts
@@ -33,7 +33,6 @@ test('computed reactivity during SSR', async () => {
     // In both cases we need to fetch data.
     if (!msg.value) await store.fetchData()
 
-    expect(msg.value).toBe('hello world')
     return () => h('div', null, msg.value + msg.value + msg.value)
   })
 
diff --git a/packages/server-renderer/src/render.ts b/packages/server-renderer/src/render.ts
index a1f327b4320..011d0840386 100644
--- a/packages/server-renderer/src/render.ts
+++ b/packages/server-renderer/src/render.ts
@@ -144,7 +144,10 @@ function renderComponentSubTree(
     // perf: enable caching of computed getters during render
     // since there cannot be state mutations during render.
     for (const e of instance.scope.effects) {
-      if (e.computed) e.computed._cacheable = true
+      if (e.computed) {
+        e.computed._dirty = true
+        e.computed._cacheable = true
+      }
     }
 
     const ssrRender = instance.ssrRender || comp.ssrRender

From 634519720a21fb5a6871454e1cadad7053a568b8 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 1 Dec 2023 16:45:53 +0800
Subject: [PATCH 19/47] fix(compiler-sfc): deindent pug/jade templates

close #3231
close #3842
close #7723
---
 .../__tests__/compileTemplate.spec.ts         | 27 ++++++++++
 packages/compiler-sfc/__tests__/parse.spec.ts | 20 ++++++++
 packages/compiler-sfc/src/parse.ts            | 51 +++++++++++++++++--
 3 files changed, 93 insertions(+), 5 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
index b471b67c9ca..9026a7e9055 100644
--- a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
@@ -60,6 +60,33 @@ body
   expect(result.errors.length).toBe(0)
 })
 
+test('preprocess pug with indents and blank lines', () => {
+  const template = parse(
+    `
+<template lang="pug">
+  body
+    h1 The next line contains four spaces.
+
+    div.container
+      p The next line is empty.
+    p This is the last line.
+</template>
+`,
+    { filename: 'example.vue', sourceMap: true }
+  ).descriptor.template as SFCTemplateBlock
+
+  const result = compile({
+    filename: 'example.vue',
+    source: template.content,
+    preprocessLang: template.lang
+  })
+
+  expect(result.errors.length).toBe(0)
+  expect(result.source).toBe(
+    '<body><h1>The next line contains four spaces.</h1><div class="container"><p>The next line is empty.</p></div><p>This is the last line.</p></body>'
+  )
+})
+
 test('warn missing preprocessor', () => {
   const template = parse(`<template lang="unknownLang">hi</template>\n`, {
     filename: 'example.vue',
diff --git a/packages/compiler-sfc/__tests__/parse.spec.ts b/packages/compiler-sfc/__tests__/parse.spec.ts
index c7a17ab1739..ae362da02fe 100644
--- a/packages/compiler-sfc/__tests__/parse.spec.ts
+++ b/packages/compiler-sfc/__tests__/parse.spec.ts
@@ -34,6 +34,26 @@ describe('compiler:sfc', () => {
       })
     })
 
+    test('template block with lang + indent', () => {
+      // Padding determines how many blank lines will there be before the style block
+      const padding = Math.round(Math.random() * 10)
+      const template = parse(
+        `${'\n'.repeat(padding)}<template lang="pug">
+  h1 foo
+    div bar
+    span baz
+</template>\n`
+      ).descriptor.template!
+
+      expect(template.map).not.toBeUndefined()
+
+      const consumer = new SourceMapConsumer(template.map!)
+      consumer.eachMapping(mapping => {
+        expect(mapping.originalLine - mapping.generatedLine).toBe(padding)
+        expect(mapping.originalColumn - mapping.generatedColumn).toBe(2)
+      })
+    })
+
     test('custom block', () => {
       const padding = Math.round(Math.random() * 10)
       const custom = parse(
diff --git a/packages/compiler-sfc/src/parse.ts b/packages/compiler-sfc/src/parse.ts
index da8cf6d8669..60ee4b654d5 100644
--- a/packages/compiler-sfc/src/parse.ts
+++ b/packages/compiler-sfc/src/parse.ts
@@ -253,19 +253,31 @@ export function parse(
     }
   }
 
+  // dedent pug/jade templates
+  let templateColumnOffset = 0
+  if (
+    descriptor.template &&
+    (descriptor.template.lang === 'pug' || descriptor.template.lang === 'jade')
+  ) {
+    ;[descriptor.template.content, templateColumnOffset] = dedent(
+      descriptor.template.content
+    )
+  }
+
   if (sourceMap) {
-    const genMap = (block: SFCBlock | null) => {
+    const genMap = (block: SFCBlock | null, columnOffset = 0) => {
       if (block && !block.src) {
         block.map = generateSourceMap(
           filename,
           source,
           block.content,
           sourceRoot,
-          !pad || block.type === 'template' ? block.loc.start.line - 1 : 0
+          !pad || block.type === 'template' ? block.loc.start.line - 1 : 0,
+          columnOffset
         )
       }
     }
-    genMap(descriptor.template)
+    genMap(descriptor.template, templateColumnOffset)
     genMap(descriptor.script)
     descriptor.styles.forEach(genMap)
     descriptor.customBlocks.forEach(genMap)
@@ -369,7 +381,8 @@ function generateSourceMap(
   source: string,
   generated: string,
   sourceRoot: string,
-  lineOffset: number
+  lineOffset: number,
+  columnOffset: number
 ): RawSourceMap {
   const map = new SourceMapGenerator({
     file: filename.replace(/\\/g, '/'),
@@ -386,7 +399,7 @@ function generateSourceMap(
             source: filename,
             original: {
               line: originalLine,
-              column: i
+              column: i + columnOffset
             },
             generated: {
               line: generatedLine,
@@ -466,3 +479,31 @@ export function hmrShouldReload(
 
   return false
 }
+
+/**
+ * Dedent a string.
+ *
+ * This removes any whitespace that is common to all lines in the string from
+ * each line in the string.
+ */
+function dedent(s: string): [string, number] {
+  const lines = s.split('\n')
+  const minIndent = lines.reduce(function (minIndent, line) {
+    if (line.trim() === '') {
+      return minIndent
+    }
+    const indent = line.match(/^\s*/)?.[0]?.length || 0
+    return Math.min(indent, minIndent)
+  }, Infinity)
+  if (minIndent === 0) {
+    return [s, minIndent]
+  }
+  return [
+    lines
+      .map(function (line) {
+        return line.slice(minIndent)
+      })
+      .join('\n'),
+    minIndent
+  ]
+}

From eb5e307c0be62002e62c4c800d0dfacb39b0d4ca Mon Sep 17 00:00:00 2001
From: edison <daiwei521@126.com>
Date: Fri, 1 Dec 2023 21:21:12 +0800
Subject: [PATCH 20/47] fix(compiler-sfc): support inferring generic types
 (#8511)

close #8482
---
 .../compileScript/resolveType.spec.ts         |  82 +++++++++++++
 .../compiler-sfc/src/script/resolveType.ts    | 115 ++++++++++++++----
 2 files changed, 173 insertions(+), 24 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts b/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
index 5f421708af0..b67423e0a89 100644
--- a/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
@@ -455,6 +455,88 @@ describe('resolveType', () => {
     })
   })
 
+  describe('generics', () => {
+    test('generic with type literal', () => {
+      expect(
+        resolve(`
+        type Props<T> = T
+        defineProps<Props<{ foo: string }>>()
+      `).props
+      ).toStrictEqual({
+        foo: ['String']
+      })
+    })
+
+    test('generic used in intersection', () => {
+      expect(
+        resolve(`
+        type Foo = { foo: string; }
+        type Bar = { bar: number; }
+        type Props<T,U> = T & U & { baz: boolean }
+        defineProps<Props<Foo, Bar>>()
+      `).props
+      ).toStrictEqual({
+        foo: ['String'],
+        bar: ['Number'],
+        baz: ['Boolean']
+      })
+    })
+
+    test('generic type /w generic type alias', () => {
+      expect(
+        resolve(`
+        type Aliased<T> = Readonly<Partial<T>>
+        type Props<T> = Aliased<T>
+        type Foo = { foo: string; }
+        defineProps<Props<Foo>>()
+      `).props
+      ).toStrictEqual({
+        foo: ['String']
+      })
+    })
+
+    test('generic type /w aliased type literal', () => {
+      expect(
+        resolve(`
+        type Aliased<T> = { foo: T }
+        defineProps<Aliased<string>>()
+      `).props
+      ).toStrictEqual({
+        foo: ['String']
+      })
+    })
+
+    test('generic type /w interface', () => {
+      expect(
+        resolve(`
+        interface Props<T> {
+          foo: T
+        }
+        type Foo = string
+        defineProps<Props<Foo>>()
+      `).props
+      ).toStrictEqual({
+        foo: ['String']
+      })
+    })
+
+    test('generic from external-file', () => {
+      const files = {
+        '/foo.ts': 'export type P<T> = { foo: T }'
+      }
+      const { props } = resolve(
+        `
+        import { P } from './foo'
+        defineProps<P<string>>()
+      `,
+        files
+      )
+      expect(props).toStrictEqual({
+        foo: ['String']
+      })
+    })
+  })
+
   describe('external type imports', () => {
     test('relative ts', () => {
       const files = {
diff --git a/packages/compiler-sfc/src/script/resolveType.ts b/packages/compiler-sfc/src/script/resolveType.ts
index d9b4dd1cb8c..c5f7681a6aa 100644
--- a/packages/compiler-sfc/src/script/resolveType.ts
+++ b/packages/compiler-sfc/src/script/resolveType.ts
@@ -118,7 +118,8 @@ interface ResolvedElements {
 export function resolveTypeElements(
   ctx: TypeResolveContext,
   node: Node & MaybeWithScope & { _resolvedElements?: ResolvedElements },
-  scope?: TypeScope
+  scope?: TypeScope,
+  typeParameters?: Record<string, Node>
 ): ResolvedElements {
   if (node._resolvedElements) {
     return node._resolvedElements
@@ -126,30 +127,37 @@ export function resolveTypeElements(
   return (node._resolvedElements = innerResolveTypeElements(
     ctx,
     node,
-    node._ownerScope || scope || ctxToScope(ctx)
+    node._ownerScope || scope || ctxToScope(ctx),
+    typeParameters
   ))
 }
 
 function innerResolveTypeElements(
   ctx: TypeResolveContext,
   node: Node,
-  scope: TypeScope
+  scope: TypeScope,
+  typeParameters?: Record<string, Node>
 ): ResolvedElements {
   switch (node.type) {
     case 'TSTypeLiteral':
-      return typeElementsToMap(ctx, node.members, scope)
+      return typeElementsToMap(ctx, node.members, scope, typeParameters)
     case 'TSInterfaceDeclaration':
-      return resolveInterfaceMembers(ctx, node, scope)
+      return resolveInterfaceMembers(ctx, node, scope, typeParameters)
     case 'TSTypeAliasDeclaration':
     case 'TSParenthesizedType':
-      return resolveTypeElements(ctx, node.typeAnnotation, scope)
+      return resolveTypeElements(
+        ctx,
+        node.typeAnnotation,
+        scope,
+        typeParameters
+      )
     case 'TSFunctionType': {
       return { props: {}, calls: [node] }
     }
     case 'TSUnionType':
     case 'TSIntersectionType':
       return mergeElements(
-        node.types.map(t => resolveTypeElements(ctx, t, scope)),
+        node.types.map(t => resolveTypeElements(ctx, t, scope, typeParameters)),
         node.type
       )
     case 'TSMappedType':
@@ -171,20 +179,57 @@ function innerResolveTypeElements(
         scope.imports[typeName]?.source === 'vue'
       ) {
         return resolveExtractPropTypes(
-          resolveTypeElements(ctx, node.typeParameters.params[0], scope),
+          resolveTypeElements(
+            ctx,
+            node.typeParameters.params[0],
+            scope,
+            typeParameters
+          ),
           scope
         )
       }
       const resolved = resolveTypeReference(ctx, node, scope)
       if (resolved) {
-        return resolveTypeElements(ctx, resolved, resolved._ownerScope)
+        const typeParams: Record<string, Node> = Object.create(null)
+        if (
+          (resolved.type === 'TSTypeAliasDeclaration' ||
+            resolved.type === 'TSInterfaceDeclaration') &&
+          resolved.typeParameters &&
+          node.typeParameters
+        ) {
+          resolved.typeParameters.params.forEach((p, i) => {
+            let param = typeParameters && typeParameters[p.name]
+            if (!param) param = node.typeParameters!.params[i]
+            typeParams[p.name] = param
+          })
+        }
+        return resolveTypeElements(
+          ctx,
+          resolved,
+          resolved._ownerScope,
+          typeParams
+        )
       } else {
         if (typeof typeName === 'string') {
+          if (typeParameters && typeParameters[typeName]) {
+            return resolveTypeElements(
+              ctx,
+              typeParameters[typeName],
+              scope,
+              typeParameters
+            )
+          }
           if (
             // @ts-ignore
             SupportedBuiltinsSet.has(typeName)
           ) {
-            return resolveBuiltin(ctx, node, typeName as any, scope)
+            return resolveBuiltin(
+              ctx,
+              node,
+              typeName as any,
+              scope,
+              typeParameters
+            )
           } else if (typeName === 'ReturnType' && node.typeParameters) {
             // limited support, only reference types
             const ret = resolveReturnType(
@@ -243,11 +288,17 @@ function innerResolveTypeElements(
 function typeElementsToMap(
   ctx: TypeResolveContext,
   elements: TSTypeElement[],
-  scope = ctxToScope(ctx)
+  scope = ctxToScope(ctx),
+  typeParameters?: Record<string, Node>
 ): ResolvedElements {
   const res: ResolvedElements = { props: {} }
   for (const e of elements) {
     if (e.type === 'TSPropertySignature' || e.type === 'TSMethodSignature') {
+      // capture generic parameters on node's scope
+      if (typeParameters) {
+        scope = createChildScope(scope)
+        Object.assign(scope.types, typeParameters)
+      }
       ;(e as MaybeWithScope)._ownerScope = scope
       const name = getId(e.key)
       if (name && !e.computed) {
@@ -323,9 +374,15 @@ function createProperty(
 function resolveInterfaceMembers(
   ctx: TypeResolveContext,
   node: TSInterfaceDeclaration & MaybeWithScope,
-  scope: TypeScope
+  scope: TypeScope,
+  typeParameters?: Record<string, Node>
 ): ResolvedElements {
-  const base = typeElementsToMap(ctx, node.body.body, node._ownerScope)
+  const base = typeElementsToMap(
+    ctx,
+    node.body.body,
+    node._ownerScope,
+    typeParameters
+  )
   if (node.extends) {
     for (const ext of node.extends) {
       if (
@@ -543,9 +600,15 @@ function resolveBuiltin(
   ctx: TypeResolveContext,
   node: TSTypeReference | TSExpressionWithTypeArguments,
   name: GetSetType<typeof SupportedBuiltinsSet>,
-  scope: TypeScope
+  scope: TypeScope,
+  typeParameters?: Record<string, Node>
 ): ResolvedElements {
-  const t = resolveTypeElements(ctx, node.typeParameters!.params[0], scope)
+  const t = resolveTypeElements(
+    ctx,
+    node.typeParameters!.params[0],
+    scope,
+    typeParameters
+  )
   switch (name) {
     case 'Partial': {
       const res: ResolvedElements = { props: {}, calls: t.calls }
@@ -1103,14 +1166,7 @@ function moduleDeclToScope(
     return node._resolvedChildScope
   }
 
-  const scope = new TypeScope(
-    parentScope.filename,
-    parentScope.source,
-    parentScope.offset,
-    Object.create(parentScope.imports),
-    Object.create(parentScope.types),
-    Object.create(parentScope.declares)
-  )
+  const scope = createChildScope(parentScope)
 
   if (node.body.type === 'TSModuleDeclaration') {
     const decl = node.body as TSModuleDeclaration & WithScope
@@ -1124,6 +1180,17 @@ function moduleDeclToScope(
   return (node._resolvedChildScope = scope)
 }
 
+function createChildScope(parentScope: TypeScope) {
+  return new TypeScope(
+    parentScope.filename,
+    parentScope.source,
+    parentScope.offset,
+    Object.create(parentScope.imports),
+    Object.create(parentScope.types),
+    Object.create(parentScope.declares)
+  )
+}
+
 const importExportRE = /^Import|^Export/
 
 function recordTypes(
@@ -1262,7 +1329,7 @@ function recordType(
       if (overwriteId || node.id) types[overwriteId || getId(node.id!)] = node
       break
     case 'TSTypeAliasDeclaration':
-      types[node.id.name] = node.typeAnnotation
+      types[node.id.name] = node.typeParameters ? node : node.typeAnnotation
       break
     case 'TSDeclareFunction':
       if (node.id) declares[node.id.name] = node

From 9ea2b868be765ca8b6a766004a3b6dfff03b76d3 Mon Sep 17 00:00:00 2001
From: Reii <48681136+wehuss@users.noreply.github.com>
Date: Fri, 1 Dec 2023 21:28:48 +0800
Subject: [PATCH 21/47] chore(template-explorer): fix overflow screen problem
 (#7282) [ci skip]

---
 packages/template-explorer/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/template-explorer/style.css b/packages/template-explorer/style.css
index 01a3e8b550b..795dfd5f6a5 100644
--- a/packages/template-explorer/style.css
+++ b/packages/template-explorer/style.css
@@ -1,5 +1,6 @@
 body {
   margin: 0;
+  overflow: hidden;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --bg: #1D1F21;
   --border: #333;

From 43c3cfdec5ae5d70fa2a21e857abc2d73f1a0d07 Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Sun, 3 Dec 2023 23:59:01 +0000
Subject: [PATCH 22/47] fix(types): improve return type withKeys and
 withModifiers (#9734)

---
 packages/dts-test/defineComponent.test-d.tsx | 10 +++++++++-
 packages/runtime-dom/src/directives/vOn.ts   | 18 ++++++++++--------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
index b3f735ddad9..9c989c23b24 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages/dts-test/defineComponent.test-d.tsx
@@ -11,7 +11,9 @@ import {
   h,
   SlotsType,
   Slots,
-  VNode
+  VNode,
+  withKeys,
+  withModifiers
 } from 'vue'
 import { describe, expectType, IsUnion } from './utils'
 
@@ -1497,6 +1499,12 @@ describe('should work when props type is incompatible with setup returned type '
   expectType<SizeType>(CompA.$props.size)
 })
 
+describe('withKeys and withModifiers as pro', () => {
+  const onKeydown = withKeys(e => {}, [''])
+  const onClick = withModifiers(e => {}, [''])
+  ;<input onKeydown={onKeydown} onClick={onClick} />
+})
+
 import {
   DefineComponent,
   ComponentOptionsMixin,
diff --git a/packages/runtime-dom/src/directives/vOn.ts b/packages/runtime-dom/src/directives/vOn.ts
index b1f4492e0ac..8054efb9ea5 100644
--- a/packages/runtime-dom/src/directives/vOn.ts
+++ b/packages/runtime-dom/src/directives/vOn.ts
@@ -32,19 +32,21 @@ const modifierGuards: Record<
 /**
  * @private
  */
-export const withModifiers = (
-  fn: Function & { _withMods?: Function },
+export const withModifiers = <
+  T extends (event: Event, ...args: unknown[]) => any
+>(
+  fn: T & { _withMods?: T },
   modifiers: string[]
 ) => {
   return (
     fn._withMods ||
-    (fn._withMods = (event: Event, ...args: unknown[]) => {
+    (fn._withMods = ((event, ...args) => {
       for (let i = 0; i < modifiers.length; i++) {
         const guard = modifierGuards[modifiers[i]]
         if (guard && guard(event, modifiers)) return
       }
       return fn(event, ...args)
-    })
+    }) as T)
   )
 }
 
@@ -63,8 +65,8 @@ const keyNames: Record<string, string | string[]> = {
 /**
  * @private
  */
-export const withKeys = (
-  fn: Function & { _withKeys?: Function },
+export const withKeys = <T extends (event: KeyboardEvent) => any>(
+  fn: T & { _withKeys?: T },
   modifiers: string[]
 ) => {
   let globalKeyCodes: LegacyConfig['keyCodes']
@@ -88,7 +90,7 @@ export const withKeys = (
 
   return (
     fn._withKeys ||
-    (fn._withKeys = (event: KeyboardEvent) => {
+    (fn._withKeys = (event => {
       if (!('key' in event)) {
         return
       }
@@ -123,6 +125,6 @@ export const withKeys = (
           }
         }
       }
-    })
+    }) as T)
   )
 }

From f12db7fb564a534cef2e5805cc9f54afe5d72fbf Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 4 Dec 2023 15:43:29 +0800
Subject: [PATCH 23/47] fix(compiler-sfc): avoid passing forEach index to
 genMap

---
 packages/compiler-sfc/src/parse.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-sfc/src/parse.ts b/packages/compiler-sfc/src/parse.ts
index 60ee4b654d5..1c75450213d 100644
--- a/packages/compiler-sfc/src/parse.ts
+++ b/packages/compiler-sfc/src/parse.ts
@@ -279,8 +279,8 @@ export function parse(
     }
     genMap(descriptor.template, templateColumnOffset)
     genMap(descriptor.script)
-    descriptor.styles.forEach(genMap)
-    descriptor.customBlocks.forEach(genMap)
+    descriptor.styles.forEach(s => genMap(s))
+    descriptor.customBlocks.forEach(s => genMap(s))
   }
 
   // parse CSS vars

From 65f3fe273127a8b68e1222fbb306d28d85f01757 Mon Sep 17 00:00:00 2001
From: edison <daiwei521@126.com>
Date: Mon, 4 Dec 2023 16:41:55 +0800
Subject: [PATCH 24/47] fix(runtime-core): Suspense get anchor properly in
 Transition (#9309)

close #8105
---
 .../runtime-core/src/components/Suspense.ts   | 10 ++-
 packages/vue/__tests__/e2e/Transition.spec.ts | 66 +++++++++++++++++++
 2 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/packages/runtime-core/src/components/Suspense.ts b/packages/runtime-core/src/components/Suspense.ts
index ddf21dd2ed4..5e5521b09be 100644
--- a/packages/runtime-core/src/components/Suspense.ts
+++ b/packages/runtime-core/src/components/Suspense.ts
@@ -504,7 +504,12 @@ function createSuspenseBoundary(
         if (delayEnter) {
           activeBranch!.transition!.afterLeave = () => {
             if (pendingId === suspense.pendingId) {
-              move(pendingBranch!, container, anchor, MoveType.ENTER)
+              move(
+                pendingBranch!,
+                container,
+                next(activeBranch!),
+                MoveType.ENTER
+              )
               queuePostFlushCb(effects)
             }
           }
@@ -577,7 +582,6 @@ function createSuspenseBoundary(
       // invoke @fallback event
       triggerEvent(vnode, 'onFallback')
 
-      const anchor = next(activeBranch!)
       const mountFallback = () => {
         if (!suspense.isInFallback) {
           return
@@ -587,7 +591,7 @@ function createSuspenseBoundary(
           null,
           fallbackVNode,
           container,
-          anchor,
+          next(activeBranch!),
           parentComponent,
           null, // fallback tree will not have suspense context
           isSVG,
diff --git a/packages/vue/__tests__/e2e/Transition.spec.ts b/packages/vue/__tests__/e2e/Transition.spec.ts
index 38fdf53cf4f..58797d82e73 100644
--- a/packages/vue/__tests__/e2e/Transition.spec.ts
+++ b/packages/vue/__tests__/e2e/Transition.spec.ts
@@ -1586,6 +1586,72 @@ describe('e2e: Transition', () => {
       expect(barMountSpy).toBeCalledTimes(1)
       expect(barMountSpy).toHaveBeenNthCalledWith(1, true, false, true)
     })
+
+    // #8105
+    test(
+      'trigger again when transition is not finished',
+      async () => {
+        await page().evaluate(duration => {
+          const { createApp, shallowRef, h } = (window as any).Vue
+          const One = {
+            async setup() {
+              return () => h('div', { class: 'test' }, 'one')
+            }
+          }
+          const Two = {
+            async setup() {
+              return () => h('div', { class: 'test' }, 'two')
+            }
+          }
+          createApp({
+            template: `
+            <div id="container">
+              <transition name="test" mode="out-in" duration="${duration}">
+                <Suspense>
+                  <component :is="view"/>
+                </Suspense>
+              </transition>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+            setup: () => {
+              const view = shallowRef(One)
+              const click = () => {
+                view.value = view.value === One ? Two : One
+              }
+              return { view, click }
+            }
+          }).mount('#app')
+        }, duration)
+
+        await nextFrame()
+        expect(await html('#container')).toBe(
+          '<div class="test test-enter-active test-enter-to">one</div>'
+        )
+
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div class="test">one</div>')
+
+        // trigger twice
+        classWhenTransitionStart()
+        classWhenTransitionStart()
+        await nextFrame()
+        expect(await html('#container')).toBe(
+          '<div class="test test-leave-active test-leave-to">one</div>'
+        )
+
+        await transitionFinish()
+        await nextFrame()
+        expect(await html('#container')).toBe(
+          '<div class="test test-enter-active test-enter-to">one</div>'
+        )
+
+        await transitionFinish()
+        await nextFrame()
+        expect(await html('#container')).toBe('<div class="test">one</div>')
+      },
+      E2E_TIMEOUT
+    )
   })
 
   describe('transition with v-show', () => {

From f4ec0b3bcb2f3949ef4aeafe2372b2b6a7acd18f Mon Sep 17 00:00:00 2001
From: xiaoming young <zzffyoung@qq.com>
Date: Mon, 4 Dec 2023 16:42:24 +0800
Subject: [PATCH 25/47] chore: fix typos in CHANGELOG.md (#9746) [ci skip]

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 062c610322d..5ecbd7ef2e7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,7 +41,7 @@
 * **compiler-sfc:** fix dynamic directive arguments usage check for slots ([#9495](https://github.com/vuejs/core/issues/9495)) ([b39fa1f](https://github.com/vuejs/core/commit/b39fa1f8157647859331ce439c42ae016a49b415)), closes [#9493](https://github.com/vuejs/core/issues/9493)
 * **deps:** update dependency @vue/repl to ^2.6.2 ([#9536](https://github.com/vuejs/core/issues/9536)) ([5cef325](https://github.com/vuejs/core/commit/5cef325f41e3b38657c72fa1a38dedeee1c7a60a))
 * **deps:** update dependency @vue/repl to ^2.6.3 ([#9540](https://github.com/vuejs/core/issues/9540)) ([176d590](https://github.com/vuejs/core/commit/176d59058c9aecffe9da4d4311e98496684f06d4))
-* **hydration:** fix tagName access eeror on comment/text node hydration mismatch ([dd8a0cf](https://github.com/vuejs/core/commit/dd8a0cf5dcde13d2cbd899262a0e07f16e14e489)), closes [#9531](https://github.com/vuejs/core/issues/9531)
+* **hydration:** fix tagName access error on comment/text node hydration mismatch ([dd8a0cf](https://github.com/vuejs/core/commit/dd8a0cf5dcde13d2cbd899262a0e07f16e14e489)), closes [#9531](https://github.com/vuejs/core/issues/9531)
 * **types:** avoid exposing lru-cache types in generated dts ([462aeb3](https://github.com/vuejs/core/commit/462aeb3b600765e219ded2ee9a0ed1e74df61de0)), closes [#9521](https://github.com/vuejs/core/issues/9521)
 * **warn:** avoid warning on empty children with Suspense ([#3962](https://github.com/vuejs/core/issues/3962)) ([405f345](https://github.com/vuejs/core/commit/405f34587a63a5f1e3d147b9848219ea98acc22d))
 

From f2f5f763e2f732af62ae9325d6439b4359dc4b4b Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 4 Dec 2023 16:42:40 +0800
Subject: [PATCH 26/47] chore(deps): update all non-major dependencies (#9744)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package.json   |  4 ++--
 pnpm-lock.yaml | 38 +++++++++++++++++++-------------------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 7b6fe32016d..424f92cd4cb 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "@rollup/plugin-replace": "^5.0.4",
     "@rollup/plugin-terser": "^0.4.4",
     "@types/hash-sum": "^1.0.2",
-    "@types/node": "^20.10.0",
+    "@types/node": "^20.10.3",
     "@typescript-eslint/parser": "^6.13.0",
     "@vitest/coverage-istanbul": "^0.34.6",
     "@vue/consolidate": "0.17.3",
@@ -102,7 +102,7 @@
     "terser": "^5.22.0",
     "todomvc-app-css": "^2.4.3",
     "tslib": "^2.6.2",
-    "tsx": "^4.5.0",
+    "tsx": "^4.6.2",
     "typescript": "^5.2.2",
     "vite": "^5.0.0",
     "vitest": "^0.34.6"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c60d3a96b8f..065c69d618b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,8 +36,8 @@ importers:
         specifier: ^1.0.2
         version: 1.0.2
       '@types/node':
-        specifier: ^20.10.0
-        version: 20.10.0
+        specifier: ^20.10.3
+        version: 20.10.3
       '@typescript-eslint/parser':
         specifier: ^6.13.0
         version: 6.13.0(eslint@8.54.0)(typescript@5.2.2)
@@ -144,14 +144,14 @@ importers:
         specifier: ^2.6.2
         version: 2.6.2
       tsx:
-        specifier: ^4.5.0
-        version: 4.5.0
+        specifier: ^4.6.2
+        version: 4.6.2
       typescript:
         specifier: ^5.2.2
         version: 5.2.2
       vite:
         specifier: ^5.0.0
-        version: 5.0.0(@types/node@20.10.0)(terser@5.22.0)
+        version: 5.0.0(@types/node@20.10.3)(terser@5.22.0)
       vitest:
         specifier: ^0.34.6
         version: 0.34.6(jsdom@22.1.0)(terser@5.22.0)
@@ -371,7 +371,7 @@ importers:
         version: 4.4.0(vite@5.0.0)(vue@packages+vue)
       vite:
         specifier: ^5.0.0
-        version: 5.0.0(@types/node@20.10.0)(terser@5.22.0)
+        version: 5.0.0(@types/node@20.10.3)(terser@5.22.0)
 
   packages/shared: {}
 
@@ -1539,8 +1539,8 @@ packages:
     resolution: {integrity: sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==}
     dev: true
 
-  /@types/node@20.10.0:
-    resolution: {integrity: sha512-D0WfRmU9TQ8I9PFx9Yc+EBHw+vSpIub4IDvQivcp26PtPrdMGAq5SDcpXEo/epqa/DXotVpekHiLNTg3iaKXBQ==}
+  /@types/node@20.10.3:
+    resolution: {integrity: sha512-XJavIpZqiXID5Yxnxv3RUDKTN5b81ddNC3ecsA0SoFXz/QU8OGBwZGMomiq0zw+uuqbL/krztv/DINAQ/EV4gg==}
     dependencies:
       undici-types: 5.26.5
     dev: true
@@ -1561,7 +1561,7 @@ packages:
     resolution: {integrity: sha512-Km7XAtUIduROw7QPgvcft0lIupeG8a8rdKL8RiSyKvlE7dYY31fEn41HVuQsRFDuROA8tA4K2UVL+WdfFmErBA==}
     requiresBuild: true
     dependencies:
-      '@types/node': 20.10.0
+      '@types/node': 20.10.3
     dev: true
     optional: true
 
@@ -1701,7 +1701,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.0.0(@types/node@20.10.0)(terser@5.22.0)
+      vite: 5.0.0(@types/node@20.10.3)(terser@5.22.0)
       vue: link:packages/vue
     dev: true
 
@@ -5783,8 +5783,8 @@ packages:
       typescript: 5.2.2
     dev: true
 
-  /tsx@4.5.0:
-    resolution: {integrity: sha512-hgxdziy9KLaHh9KE+a6tIZFP6kb0MLq/1D0sJVifbGP4QVEYhy6+2FNn7MyCm1pMc63p9CW/L1OzdqTNPxs6rg==}
+  /tsx@4.6.2:
+    resolution: {integrity: sha512-QPpBdJo+ZDtqZgAnq86iY/PD2KYCUPSUGIunHdGwyII99GKH+f3z3FZ8XNFLSGQIA4I365ui8wnQpl8OKLqcsg==}
     engines: {node: '>=18.0.0'}
     hasBin: true
     dependencies:
@@ -5966,7 +5966,7 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /vite-node@0.34.6(@types/node@20.10.0)(terser@5.22.0):
+  /vite-node@0.34.6(@types/node@20.10.3)(terser@5.22.0):
     resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -5976,7 +5976,7 @@ packages:
       mlly: 1.4.2
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 5.0.0(@types/node@20.10.0)(terser@5.22.0)
+      vite: 5.0.0(@types/node@20.10.3)(terser@5.22.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -5988,7 +5988,7 @@ packages:
       - terser
     dev: true
 
-  /vite@5.0.0(@types/node@20.10.0)(terser@5.22.0):
+  /vite@5.0.0(@types/node@20.10.3)(terser@5.22.0):
     resolution: {integrity: sha512-ESJVM59mdyGpsiNAeHQOR/0fqNoOyWPYesFto8FFZugfmhdHx8Fzd8sF3Q/xkVhZsyOxHfdM7ieiVAorI9RjFw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -6016,7 +6016,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 20.10.0
+      '@types/node': 20.10.3
       esbuild: 0.19.5
       postcss: 8.4.31
       rollup: 4.4.1
@@ -6058,7 +6058,7 @@ packages:
     dependencies:
       '@types/chai': 4.3.9
       '@types/chai-subset': 1.3.4
-      '@types/node': 20.10.0
+      '@types/node': 20.10.3
       '@vitest/expect': 0.34.6
       '@vitest/runner': 0.34.6
       '@vitest/snapshot': 0.34.6
@@ -6078,8 +6078,8 @@ packages:
       strip-literal: 1.3.0
       tinybench: 2.5.1
       tinypool: 0.7.0
-      vite: 5.0.0(@types/node@20.10.0)(terser@5.22.0)
-      vite-node: 0.34.6(@types/node@20.10.0)(terser@5.22.0)
+      vite: 5.0.0(@types/node@20.10.3)(terser@5.22.0)
+      vite-node: 0.34.6(@types/node@20.10.3)(terser@5.22.0)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less

From ec715854ca12520b2afc9e9b3981cbae05ae5206 Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Mon, 4 Dec 2023 08:43:30 +0000
Subject: [PATCH 27/47] fix(app): prevent template from being cached between
 apps with different options (#9724)

close #9618
---
 packages/vue/src/index.ts | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 8215be7476e..f926f140a5e 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -4,14 +4,32 @@ import { initDev } from './dev'
 import { compile, CompilerOptions, CompilerError } from '@vue/compiler-dom'
 import { registerRuntimeCompiler, RenderFunction, warn } from '@vue/runtime-dom'
 import * as runtimeDom from '@vue/runtime-dom'
-import { isString, NOOP, generateCodeFrame, extend } from '@vue/shared'
+import {
+  isString,
+  NOOP,
+  generateCodeFrame,
+  extend,
+  EMPTY_OBJ
+} from '@vue/shared'
 import { InternalRenderFunction } from 'packages/runtime-core/src/component'
 
 if (__DEV__) {
   initDev()
 }
 
-const compileCache: Record<string, RenderFunction> = Object.create(null)
+const compileCache = new WeakMap<
+  CompilerOptions,
+  Record<string, RenderFunction>
+>()
+
+function getCache(options?: CompilerOptions) {
+  let c = compileCache.get(options ?? EMPTY_OBJ)
+  if (!c) {
+    c = Object.create(null) as Record<string, RenderFunction>
+    compileCache.set(options ?? EMPTY_OBJ, c)
+  }
+  return c
+}
 
 function compileToFunction(
   template: string | HTMLElement,
@@ -27,7 +45,8 @@ function compileToFunction(
   }
 
   const key = template
-  const cached = compileCache[key]
+  const cache = getCache(options)
+  const cached = cache[key]
   if (cached) {
     return cached
   }
@@ -84,7 +103,7 @@ function compileToFunction(
   // mark the function as runtime compiled
   ;(render as InternalRenderFunction)._rc = true
 
-  return (compileCache[key] = render)
+  return (cache[key] = render)
 }
 
 registerRuntimeCompiler(compileToFunction)

From bf7269ac47ec093478f1aa34b018be767d104d27 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 4 Dec 2023 16:43:47 +0800
Subject: [PATCH 28/47] chore(deps): update compiler (#9745)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package.json                               |   4 +-
 packages/compiler-core/package.json        |   4 +-
 packages/compiler-sfc/package.json         |   6 +-
 packages/reactivity-transform/package.json |   6 +-
 packages/vue-compat/package.json           |   2 +-
 pnpm-lock.yaml                             | 199 +++++++++++----------
 6 files changed, 119 insertions(+), 102 deletions(-)

diff --git a/package.json b/package.json
index 424f92cd4cb..b3d17509af6 100644
--- a/package.json
+++ b/package.json
@@ -57,8 +57,8 @@
     "node": ">=18.12.0"
   },
   "devDependencies": {
-    "@babel/parser": "^7.23.4",
-    "@babel/types": "^7.23.4",
+    "@babel/parser": "^7.23.5",
+    "@babel/types": "^7.23.5",
     "@rollup/plugin-alias": "^5.0.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.0.1",
diff --git a/packages/compiler-core/package.json b/packages/compiler-core/package.json
index bfb35cc94fb..d6d13681b42 100644
--- a/packages/compiler-core/package.json
+++ b/packages/compiler-core/package.json
@@ -32,12 +32,12 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-core#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.4",
+    "@babel/parser": "^7.23.5",
     "@vue/shared": "workspace:*",
     "estree-walker": "^2.0.2",
     "source-map-js": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/types": "^7.23.4"
+    "@babel/types": "^7.23.5"
   }
 }
diff --git a/packages/compiler-sfc/package.json b/packages/compiler-sfc/package.json
index 134dfb4b7b9..d3f126a233d 100644
--- a/packages/compiler-sfc/package.json
+++ b/packages/compiler-sfc/package.json
@@ -32,7 +32,7 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.4",
+    "@babel/parser": "^7.23.5",
     "@vue/compiler-core": "workspace:*",
     "@vue/compiler-dom": "workspace:*",
     "@vue/compiler-ssr": "workspace:*",
@@ -40,11 +40,11 @@
     "@vue/shared": "workspace:*",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.30.5",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.32",
     "source-map-js": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/types": "^7.23.4",
+    "@babel/types": "^7.23.5",
     "@vue/consolidate": "^0.17.3",
     "hash-sum": "^2.0.0",
     "lru-cache": "^10.1.0",
diff --git a/packages/reactivity-transform/package.json b/packages/reactivity-transform/package.json
index c68bd5aca22..77f2b1cf01a 100644
--- a/packages/reactivity-transform/package.json
+++ b/packages/reactivity-transform/package.json
@@ -28,14 +28,14 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/dev/packages/reactivity-transform#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.4",
+    "@babel/parser": "^7.23.5",
     "@vue/compiler-core": "workspace:*",
     "@vue/shared": "workspace:*",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.30.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/types": "^7.23.4"
+    "@babel/core": "^7.23.5",
+    "@babel/types": "^7.23.5"
   }
 }
diff --git a/packages/vue-compat/package.json b/packages/vue-compat/package.json
index 5ed6a5b57cd..3701f94b106 100644
--- a/packages/vue-compat/package.json
+++ b/packages/vue-compat/package.json
@@ -38,7 +38,7 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/vue-compat#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.4",
+    "@babel/parser": "^7.23.5",
     "estree-walker": "^2.0.2",
     "source-map-js": "^1.0.2"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 065c69d618b..67072a042fe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,11 +9,11 @@ importers:
   .:
     devDependencies:
       '@babel/parser':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: ^7.23.5
+        version: 7.23.5
       '@babel/types':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: ^7.23.5
+        version: 7.23.5
       '@rollup/plugin-alias':
         specifier: ^5.0.1
         version: 5.0.1(rollup@4.1.4)
@@ -159,8 +159,8 @@ importers:
   packages/compiler-core:
     dependencies:
       '@babel/parser':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: ^7.23.5
+        version: 7.23.5
       '@vue/shared':
         specifier: workspace:*
         version: link:../shared
@@ -172,8 +172,8 @@ importers:
         version: 1.0.2
     devDependencies:
       '@babel/types':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: ^7.23.5
+        version: 7.23.5
 
   packages/compiler-dom:
     dependencies:
@@ -187,8 +187,8 @@ importers:
   packages/compiler-sfc:
     dependencies:
       '@babel/parser':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: ^7.23.5
+        version: 7.23.5
       '@vue/compiler-core':
         specifier: workspace:*
         version: link:../compiler-core
@@ -211,15 +211,15 @@ importers:
         specifier: ^0.30.5
         version: 0.30.5
       postcss:
-        specifier: ^8.4.31
-        version: 8.4.31
+        specifier: ^8.4.32
+        version: 8.4.32
       source-map-js:
         specifier: ^1.0.2
         version: 1.0.2
     devDependencies:
       '@babel/types':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: ^7.23.5
+        version: 7.23.5
       '@vue/consolidate':
         specifier: ^0.17.3
         version: 0.17.3
@@ -237,7 +237,7 @@ importers:
         version: 9.0.3
       postcss-modules:
         specifier: ^4.3.1
-        version: 4.3.1(postcss@8.4.31)
+        version: 4.3.1(postcss@8.4.32)
       postcss-selector-parser:
         specifier: ^6.0.13
         version: 6.0.13
@@ -287,8 +287,8 @@ importers:
   packages/reactivity-transform:
     dependencies:
       '@babel/parser':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: ^7.23.5
+        version: 7.23.5
       '@vue/compiler-core':
         specifier: workspace:*
         version: link:../compiler-core
@@ -303,11 +303,11 @@ importers:
         version: 0.30.5
     devDependencies:
       '@babel/core':
-        specifier: ^7.23.3
-        version: 7.23.3
+        specifier: ^7.23.5
+        version: 7.23.5
       '@babel/types':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: ^7.23.5
+        version: 7.23.5
 
   packages/runtime-core:
     dependencies:
@@ -408,8 +408,8 @@ importers:
   packages/vue-compat:
     dependencies:
       '@babel/parser':
-        specifier: ^7.23.4
-        version: 7.23.4
+        specifier: ^7.23.5
+        version: 7.23.5
       estree-walker:
         specifier: ^2.0.2
         version: 2.0.2
@@ -444,25 +444,33 @@ packages:
       chalk: 2.4.2
     dev: true
 
+  /@babel/code-frame@7.23.5:
+    resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.23.4
+      chalk: 2.4.2
+    dev: true
+
   /@babel/compat-data@7.23.2:
     resolution: {integrity: sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ==}
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/core@7.23.3:
-    resolution: {integrity: sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew==}
+  /@babel/core@7.23.5:
+    resolution: {integrity: sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@ampproject/remapping': 2.2.1
-      '@babel/code-frame': 7.22.13
-      '@babel/generator': 7.23.3
+      '@babel/code-frame': 7.23.5
+      '@babel/generator': 7.23.5
       '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.3)
-      '@babel/helpers': 7.23.2
-      '@babel/parser': 7.23.4
+      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5)
+      '@babel/helpers': 7.23.5
+      '@babel/parser': 7.23.5
       '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.3
-      '@babel/types': 7.23.4
+      '@babel/traverse': 7.23.5
+      '@babel/types': 7.23.5
       convert-source-map: 2.0.0
       debug: 4.3.4
       gensync: 1.0.0-beta.2
@@ -472,11 +480,11 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/generator@7.23.3:
-    resolution: {integrity: sha512-keeZWAV4LU3tW0qRi19HRpabC/ilM0HRBBzf9/k8FFiG4KVpiv0FIy4hHfLfFQZNhziCTPTmd59zoyv6DNISzg==}
+  /@babel/generator@7.23.5:
+    resolution: {integrity: sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.4
+      '@babel/types': 7.23.5
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.20
       jsesc: 2.5.2
@@ -503,30 +511,30 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.22.15
-      '@babel/types': 7.23.4
+      '@babel/types': 7.23.5
     dev: true
 
   /@babel/helper-hoist-variables@7.22.5:
     resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.4
+      '@babel/types': 7.23.5
     dev: true
 
   /@babel/helper-module-imports@7.22.15:
     resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.4
+      '@babel/types': 7.23.5
     dev: true
 
-  /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.3):
+  /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.5):
     resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.23.3
+      '@babel/core': 7.23.5
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-module-imports': 7.22.15
       '@babel/helper-simple-access': 7.22.5
@@ -538,14 +546,14 @@ packages:
     resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.4
+      '@babel/types': 7.23.5
     dev: true
 
   /@babel/helper-split-export-declaration@7.22.6:
     resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.4
+      '@babel/types': 7.23.5
     dev: true
 
   /@babel/helper-string-parser@7.23.4:
@@ -562,13 +570,13 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/helpers@7.23.2:
-    resolution: {integrity: sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==}
+  /@babel/helpers@7.23.5:
+    resolution: {integrity: sha512-oO7us8FzTEsG3U6ag9MfdF1iA/7Z6dz+MtFhifZk8C8o453rGJFFWUP1t+ULM9TUIAzC9uxXEiXjOiVMyd7QPg==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.3
-      '@babel/types': 7.23.4
+      '@babel/traverse': 7.23.5
+      '@babel/types': 7.23.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -583,42 +591,51 @@ packages:
       js-tokens: 4.0.0
     dev: true
 
-  /@babel/parser@7.23.4:
-    resolution: {integrity: sha512-vf3Xna6UEprW+7t6EtOmFpHNAuxw3xqPZghy+brsnusscJRW5BMUzzHZc5ICjULee81WeUV2jjakG09MDglJXQ==}
+  /@babel/highlight@7.23.4:
+    resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.22.20
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+    dev: true
+
+  /@babel/parser@7.23.5:
+    resolution: {integrity: sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.23.4
+      '@babel/types': 7.23.5
 
   /@babel/template@7.22.15:
     resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.22.13
-      '@babel/parser': 7.23.4
-      '@babel/types': 7.23.4
+      '@babel/code-frame': 7.23.5
+      '@babel/parser': 7.23.5
+      '@babel/types': 7.23.5
     dev: true
 
-  /@babel/traverse@7.23.3:
-    resolution: {integrity: sha512-+K0yF1/9yR0oHdE0StHuEj3uTPzwwbrLGfNOndVJVV2TqA5+j3oljJUb4nmB954FLGjNem976+B+eDuLIjesiQ==}
+  /@babel/traverse@7.23.5:
+    resolution: {integrity: sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.22.13
-      '@babel/generator': 7.23.3
+      '@babel/code-frame': 7.23.5
+      '@babel/generator': 7.23.5
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.23.4
-      '@babel/types': 7.23.4
+      '@babel/parser': 7.23.5
+      '@babel/types': 7.23.5
       debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/types@7.23.4:
-    resolution: {integrity: sha512-7uIFwVYpoplT5jp/kVv6EF93VaJ8H+Yn5IczYiaAi98ajzjfoZfslet/e0sLh+wVBjb2qqIut1b0S26VSafsSQ==}
+  /@babel/types@7.23.5:
+    resolution: {integrity: sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-string-parser': 7.23.4
@@ -1995,7 +2012,7 @@ packages:
     resolution: {integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==}
     engines: {node: '>= 10.0.0'}
     dependencies:
-      '@babel/types': 7.23.4
+      '@babel/types': 7.23.5
     dev: true
 
   /balanced-match@1.0.2:
@@ -2316,8 +2333,8 @@ packages:
   /constantinople@4.0.1:
     resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
     dependencies:
-      '@babel/parser': 7.23.4
-      '@babel/types': 7.23.4
+      '@babel/parser': 7.23.5
+      '@babel/types': 7.23.5
     dev: true
 
   /content-disposition@0.5.2:
@@ -3532,13 +3549,13 @@ packages:
     resolution: {integrity: sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==}
     dev: true
 
-  /icss-utils@5.1.0(postcss@8.4.31):
+  /icss-utils@5.1.0(postcss@8.4.32):
     resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.31
+      postcss: 8.4.32
     dev: true
 
   /ieee754@1.2.1:
@@ -3835,8 +3852,8 @@ packages:
     resolution: {integrity: sha512-EAMEJBsYuyyztxMxW3g7ugGPkrZsV57v0Hmv3mm1uQsmB+QnZuepg731CRaIgeUVSdmsTngOkSnauNF8p7FIhA==}
     engines: {node: '>=10'}
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/parser': 7.23.4
+      '@babel/core': 7.23.5
+      '@babel/parser': 7.23.5
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 7.5.4
@@ -4310,8 +4327,8 @@ packages:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
     dev: true
 
-  /nanoid@3.3.6:
-    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
+  /nanoid@3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
@@ -4678,48 +4695,48 @@ packages:
       pathe: 1.1.1
     dev: true
 
-  /postcss-modules-extract-imports@3.0.0(postcss@8.4.31):
+  /postcss-modules-extract-imports@3.0.0(postcss@8.4.32):
     resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.31
+      postcss: 8.4.32
     dev: true
 
-  /postcss-modules-local-by-default@4.0.3(postcss@8.4.31):
+  /postcss-modules-local-by-default@4.0.3(postcss@8.4.32):
     resolution: {integrity: sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.31)
-      postcss: 8.4.31
+      icss-utils: 5.1.0(postcss@8.4.32)
+      postcss: 8.4.32
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-modules-scope@3.0.0(postcss@8.4.31):
+  /postcss-modules-scope@3.0.0(postcss@8.4.32):
     resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.31
+      postcss: 8.4.32
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /postcss-modules-values@4.0.0(postcss@8.4.31):
+  /postcss-modules-values@4.0.0(postcss@8.4.32):
     resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.31)
-      postcss: 8.4.31
+      icss-utils: 5.1.0(postcss@8.4.32)
+      postcss: 8.4.32
     dev: true
 
-  /postcss-modules@4.3.1(postcss@8.4.31):
+  /postcss-modules@4.3.1(postcss@8.4.32):
     resolution: {integrity: sha512-ItUhSUxBBdNamkT3KzIZwYNNRFKmkJrofvC2nWab3CPKhYBQ1f27XXh1PAPE27Psx58jeelPsxWB/+og+KEH0Q==}
     peerDependencies:
       postcss: ^8.0.0
@@ -4727,11 +4744,11 @@ packages:
       generic-names: 4.0.0
       icss-replace-symbols: 1.1.0
       lodash.camelcase: 4.3.0
-      postcss: 8.4.31
-      postcss-modules-extract-imports: 3.0.0(postcss@8.4.31)
-      postcss-modules-local-by-default: 4.0.3(postcss@8.4.31)
-      postcss-modules-scope: 3.0.0(postcss@8.4.31)
-      postcss-modules-values: 4.0.0(postcss@8.4.31)
+      postcss: 8.4.32
+      postcss-modules-extract-imports: 3.0.0(postcss@8.4.32)
+      postcss-modules-local-by-default: 4.0.3(postcss@8.4.32)
+      postcss-modules-scope: 3.0.0(postcss@8.4.32)
+      postcss-modules-values: 4.0.0(postcss@8.4.32)
       string-hash: 1.1.3
     dev: true
 
@@ -4747,11 +4764,11 @@ packages:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
 
-  /postcss@8.4.31:
-    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+  /postcss@8.4.32:
+    resolution: {integrity: sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
-      nanoid: 3.3.6
+      nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
@@ -6018,7 +6035,7 @@ packages:
     dependencies:
       '@types/node': 20.10.3
       esbuild: 0.19.5
-      postcss: 8.4.31
+      postcss: 8.4.32
       rollup: 4.4.1
       terser: 5.22.0
     optionalDependencies:
@@ -6195,8 +6212,8 @@ packages:
     resolution: {integrity: sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==}
     engines: {node: '>= 10.0.0'}
     dependencies:
-      '@babel/parser': 7.23.4
-      '@babel/types': 7.23.4
+      '@babel/parser': 7.23.5
+      '@babel/types': 7.23.5
       assert-never: 1.2.1
       babel-walk: 3.0.0-canary-5
     dev: true

From c3e2c556b532656b50b8ab5cd2d9eabc26622d63 Mon Sep 17 00:00:00 2001
From: yangxiuxiu <79584569+RicardoErii@users.noreply.github.com>
Date: Mon, 4 Dec 2023 16:53:21 +0800
Subject: [PATCH 29/47] fix(compiler-sfc): fix :where and :is selector in
 scoped mode with multiple selectors (#9735)

close #9707
---
 .../compiler-sfc/__tests__/compileStyle.spec.ts | 17 +++++++++++++++++
 packages/compiler-sfc/src/style/pluginScoped.ts | 16 ++++++++++++----
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
index 66fc201f547..624cbaa043f 100644
--- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
@@ -144,6 +144,23 @@ describe('SFC scoped CSS', () => {
     `)
   })
 
+  test(':is() and :where() with multiple selectors', () => {
+    expect(compileScoped(`:is(.foo) { color: red; }`)).toMatchInlineSnapshot(`
+      ":is(.foo[data-v-test]) { color: red;
+      }"
+    `)
+    expect(compileScoped(`:where(.foo, .bar) { color: red; }`))
+      .toMatchInlineSnapshot(`
+      ":where(.foo[data-v-test], .bar[data-v-test]) { color: red;
+      }"
+    `)
+    expect(compileScoped(`:is(.foo, .bar) div { color: red; }`))
+      .toMatchInlineSnapshot(`
+      ":is(.foo, .bar) div[data-v-test] { color: red;
+      }"
+    `)
+  })
+
   test('media query', () => {
     expect(compileScoped(`@media print { .foo { color: red }}`))
       .toMatchInlineSnapshot(`
diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts
index 5394b77743f..f71c304f502 100644
--- a/packages/compiler-sfc/src/style/pluginScoped.ts
+++ b/packages/compiler-sfc/src/style/pluginScoped.ts
@@ -170,15 +170,23 @@ function rewriteSelector(
       }
     }
 
-    if (n.type !== 'pseudo' && n.type !== 'combinator') {
+    if (
+      (n.type !== 'pseudo' && n.type !== 'combinator') ||
+      (n.type === 'pseudo' && (n.value === ':is' || n.value === ':where'))
+    ) {
       node = n
     }
+  })
 
-    if (n.type === 'pseudo' && (n.value === ':is' || n.value === ':where')) {
-      rewriteSelector(id, n.nodes[0], selectorRoot, slotted)
+  if (node) {
+    const { type, value } = node as selectorParser.Node
+    if (type === 'pseudo' && (value === ':is' || value === ':where')) {
+      ;(node as selectorParser.Pseudo).nodes.forEach(value =>
+        rewriteSelector(id, value, selectorRoot, slotted)
+      )
       shouldInject = false
     }
-  })
+  }
 
   if (node) {
     ;(node as selectorParser.Node).spaces.after = ''

From d5a88ef9d7ab1ac98dc0a493cec6358656e351fc Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 4 Dec 2023 21:42:18 +0800
Subject: [PATCH 30/47] release: v3.3.10

---
 CHANGELOG.md                               | 31 ++++++++++++++++++++++
 package.json                               |  2 +-
 packages/compiler-core/package.json        |  2 +-
 packages/compiler-dom/package.json         |  2 +-
 packages/compiler-sfc/package.json         |  2 +-
 packages/compiler-ssr/package.json         |  2 +-
 packages/reactivity-transform/package.json |  2 +-
 packages/reactivity/package.json           |  2 +-
 packages/runtime-core/package.json         |  2 +-
 packages/runtime-dom/package.json          |  2 +-
 packages/server-renderer/package.json      |  2 +-
 packages/shared/package.json               |  2 +-
 packages/vue-compat/package.json           |  2 +-
 packages/vue/package.json                  |  2 +-
 14 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ecbd7ef2e7..7ee10277894 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,34 @@
+## [3.3.10](https://github.com/vuejs/core/compare/v3.3.9...v3.3.10) (2023-12-04)
+
+
+### Bug Fixes
+
+* **app:** prevent template from being cached between apps with different options ([#9724](https://github.com/vuejs/core/issues/9724)) ([ec71585](https://github.com/vuejs/core/commit/ec715854ca12520b2afc9e9b3981cbae05ae5206)), closes [#9618](https://github.com/vuejs/core/issues/9618)
+* **compiler-sfc:** avoid passing forEach index to genMap ([f12db7f](https://github.com/vuejs/core/commit/f12db7fb564a534cef2e5805cc9f54afe5d72fbf))
+* **compiler-sfc:** deindent pug/jade templates ([6345197](https://github.com/vuejs/core/commit/634519720a21fb5a6871454e1cadad7053a568b8)), closes [#3231](https://github.com/vuejs/core/issues/3231) [#3842](https://github.com/vuejs/core/issues/3842) [#7723](https://github.com/vuejs/core/issues/7723)
+* **compiler-sfc:** fix :where and :is selector in scoped mode with multiple selectors ([#9735](https://github.com/vuejs/core/issues/9735)) ([c3e2c55](https://github.com/vuejs/core/commit/c3e2c556b532656b50b8ab5cd2d9eabc26622d63)), closes [#9707](https://github.com/vuejs/core/issues/9707)
+* **compiler-sfc:** generate more treeshaking friendly code ([#9507](https://github.com/vuejs/core/issues/9507)) ([8d74ca0](https://github.com/vuejs/core/commit/8d74ca0e6fa2738ca6854b7e879ff59419f948c7)), closes [#9500](https://github.com/vuejs/core/issues/9500)
+* **compiler-sfc:** support inferring generic types ([#8511](https://github.com/vuejs/core/issues/8511)) ([eb5e307](https://github.com/vuejs/core/commit/eb5e307c0be62002e62c4c800d0dfacb39b0d4ca)), closes [#8482](https://github.com/vuejs/core/issues/8482)
+* **compiler-sfc:** support resolving components from props ([#8785](https://github.com/vuejs/core/issues/8785)) ([7cbcee3](https://github.com/vuejs/core/commit/7cbcee3d831241a8bd3588ae92d3f27e3641e25f))
+* **compiler-sfc:** throw error when failing to load TS during type resolution ([#8883](https://github.com/vuejs/core/issues/8883)) ([4936d2e](https://github.com/vuejs/core/commit/4936d2e11a8d0ca3704bfe408548cb26bb3fd5e9))
+* **cssVars:** cssVar names should be double-escaped when generating code for ssr ([#8824](https://github.com/vuejs/core/issues/8824)) ([5199a12](https://github.com/vuejs/core/commit/5199a12f8855cd06f24bf355708b5a2134f63176)), closes [#7823](https://github.com/vuejs/core/issues/7823)
+* **deps:** update compiler to ^7.23.4 ([#9681](https://github.com/vuejs/core/issues/9681)) ([31f6ebc](https://github.com/vuejs/core/commit/31f6ebc4df84490ed29fb75e7bf4259200eb51f0))
+* **runtime-core:** Suspense get anchor properly in Transition ([#9309](https://github.com/vuejs/core/issues/9309)) ([65f3fe2](https://github.com/vuejs/core/commit/65f3fe273127a8b68e1222fbb306d28d85f01757)), closes [#8105](https://github.com/vuejs/core/issues/8105)
+* **runtime-dom:** set width/height with units as attribute ([#8781](https://github.com/vuejs/core/issues/8781)) ([bfc1838](https://github.com/vuejs/core/commit/bfc1838f31199de3f189198a3c234fa7bae91386))
+* **ssr:** avoid computed being accidentally cached before server render ([#9688](https://github.com/vuejs/core/issues/9688)) ([30d5d93](https://github.com/vuejs/core/commit/30d5d93a92b2154406ec04f8aca6b217fa01177c)), closes [#5300](https://github.com/vuejs/core/issues/5300)
+* **types:** expose emits as props in functional components ([#9234](https://github.com/vuejs/core/issues/9234)) ([887e54c](https://github.com/vuejs/core/commit/887e54c347ea9eac4c721b5e2288f054873d1d30))
+* **types:** fix reactive collection types ([#8960](https://github.com/vuejs/core/issues/8960)) ([ad27473](https://github.com/vuejs/core/commit/ad274737015c36906d76f3189203093fa3a2e4e7)), closes [#8904](https://github.com/vuejs/core/issues/8904)
+* **types:** improve return type withKeys and withModifiers ([#9734](https://github.com/vuejs/core/issues/9734)) ([43c3cfd](https://github.com/vuejs/core/commit/43c3cfdec5ae5d70fa2a21e857abc2d73f1a0d07))
+
+
+### Performance Improvements
+
+* optimize on* prop check ([38aaa8c](https://github.com/vuejs/core/commit/38aaa8c88648c54fe2616ad9c0961288092fcb44))
+* **runtime-dom:** cache modifier wrapper functions ([da4a4fb](https://github.com/vuejs/core/commit/da4a4fb5e8eee3c6d31f24ebd79a9d0feca56cb2)), closes [#8882](https://github.com/vuejs/core/issues/8882)
+* **v-on:** constant handlers with modifiers should not be treated as dynamic ([4d94ebf](https://github.com/vuejs/core/commit/4d94ebfe75174b340d2b794e699cad1add3600a9))
+
+
+
 ## [3.3.9](https://github.com/vuejs/core/compare/v3.3.8...v3.3.9) (2023-11-25)
 
 
diff --git a/package.json b/package.json
index b3d17509af6..1afd51ffde4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "3.3.9",
+  "version": "3.3.10",
   "packageManager": "pnpm@8.11.0",
   "type": "module",
   "scripts": {
diff --git a/packages/compiler-core/package.json b/packages/compiler-core/package.json
index d6d13681b42..91a66d19945 100644
--- a/packages/compiler-core/package.json
+++ b/packages/compiler-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-core",
-  "version": "3.3.9",
+  "version": "3.3.10",
   "description": "@vue/compiler-core",
   "main": "index.js",
   "module": "dist/compiler-core.esm-bundler.js",
diff --git a/packages/compiler-dom/package.json b/packages/compiler-dom/package.json
index e6f61001070..4c30caf9b2a 100644
--- a/packages/compiler-dom/package.json
+++ b/packages/compiler-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-dom",
-  "version": "3.3.9",
+  "version": "3.3.10",
   "description": "@vue/compiler-dom",
   "main": "index.js",
   "module": "dist/compiler-dom.esm-bundler.js",
diff --git a/packages/compiler-sfc/package.json b/packages/compiler-sfc/package.json
index d3f126a233d..25e2e82fd8f 100644
--- a/packages/compiler-sfc/package.json
+++ b/packages/compiler-sfc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.3.9",
+  "version": "3.3.10",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "module": "dist/compiler-sfc.esm-browser.js",
diff --git a/packages/compiler-ssr/package.json b/packages/compiler-ssr/package.json
index 59eda541b55..465c415e2dd 100644
--- a/packages/compiler-ssr/package.json
+++ b/packages/compiler-ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-ssr",
-  "version": "3.3.9",
+  "version": "3.3.10",
   "description": "@vue/compiler-ssr",
   "main": "dist/compiler-ssr.cjs.js",
   "types": "dist/compiler-ssr.d.ts",
diff --git a/packages/reactivity-transform/package.json b/packages/reactivity-transform/package.json
index 77f2b1cf01a..5c7f5e5e0bf 100644
--- a/packages/reactivity-transform/package.json
+++ b/packages/reactivity-transform/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/reactivity-transform",
-  "version": "3.3.9",
+  "version": "3.3.10",
   "description": "@vue/reactivity-transform",
   "main": "dist/reactivity-transform.cjs.js",
   "files": [
diff --git a/packages/reactivity/package.json b/packages/reactivity/package.json
index 4e297a6318b..4bdece2e5d8 100644
--- a/packages/reactivity/package.json
+++ b/packages/reactivity/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/reactivity",
-  "version": "3.3.9",
+  "version": "3.3.10",
   "description": "@vue/reactivity",
   "main": "index.js",
   "module": "dist/reactivity.esm-bundler.js",
diff --git a/packages/runtime-core/package.json b/packages/runtime-core/package.json
index 8e8df1e0727..8fc7be25d97 100644
--- a/packages/runtime-core/package.json
+++ b/packages/runtime-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-core",
-  "version": "3.3.9",
+  "version": "3.3.10",
   "description": "@vue/runtime-core",
   "main": "index.js",
   "module": "dist/runtime-core.esm-bundler.js",
diff --git a/packages/runtime-dom/package.json b/packages/runtime-dom/package.json
index d2278411517..b3f4fd0ef65 100644
--- a/packages/runtime-dom/package.json
+++ b/packages/runtime-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-dom",
-  "version": "3.3.9",
+  "version": "3.3.10",
   "description": "@vue/runtime-dom",
   "main": "index.js",
   "module": "dist/runtime-dom.esm-bundler.js",
diff --git a/packages/server-renderer/package.json b/packages/server-renderer/package.json
index f9f4aec9222..8677443ae9e 100644
--- a/packages/server-renderer/package.json
+++ b/packages/server-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/server-renderer",
-  "version": "3.3.9",
+  "version": "3.3.10",
   "description": "@vue/server-renderer",
   "main": "index.js",
   "module": "dist/server-renderer.esm-bundler.js",
diff --git a/packages/shared/package.json b/packages/shared/package.json
index ce4c40d6580..34d64b60b98 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/shared",
-  "version": "3.3.9",
+  "version": "3.3.10",
   "description": "internal utils shared across @vue packages",
   "main": "index.js",
   "module": "dist/shared.esm-bundler.js",
diff --git a/packages/vue-compat/package.json b/packages/vue-compat/package.json
index 3701f94b106..0a2a0927335 100644
--- a/packages/vue-compat/package.json
+++ b/packages/vue-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compat",
-  "version": "3.3.9",
+  "version": "3.3.10",
   "description": "Vue 3 compatibility build for Vue 2",
   "main": "index.js",
   "module": "dist/vue.runtime.esm-bundler.js",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index edb21ad6f8c..25832725835 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue",
-  "version": "3.3.9",
+  "version": "3.3.10",
   "description": "The progressive JavaScript framework for building modern web UI.",
   "main": "index.js",
   "module": "dist/vue.runtime.esm-bundler.js",

From 53aaa1eb2876baf9de16b2f2c77b2c5fd5173900 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 4 Dec 2023 23:06:56 +0800
Subject: [PATCH 31/47] fix(parser): fix interpolation parsing in v-pre

ref: https://github.com/vuejs/docs/issues/2586
---
 .../compiler-core/__tests__/parse.spec.ts     | 29 +++++++++++++++++++
 packages/compiler-core/src/parser.ts          |  4 +--
 packages/compiler-core/src/tokenizer.ts       |  4 ++-
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/packages/compiler-core/__tests__/parse.spec.ts b/packages/compiler-core/__tests__/parse.spec.ts
index 9d84e80c2a6..7c6b9f463d8 100644
--- a/packages/compiler-core/__tests__/parse.spec.ts
+++ b/packages/compiler-core/__tests__/parse.spec.ts
@@ -1733,6 +1733,35 @@ describe('compiler: parse', () => {
       })
     })
 
+    // https://github.com/vuejs/docs/issues/2586
+    test('v-pre with half-open interpolation', () => {
+      const ast = baseParse(
+        `<div v-pre>
+          <span>{{ number </span>
+          <span>}}</span>
+        </div>
+        `
+      )
+      expect((ast.children[0] as ElementNode).children).toMatchObject([
+        {
+          type: NodeTypes.ELEMENT,
+          children: [{ type: NodeTypes.TEXT, content: `{{ number ` }]
+        },
+        {
+          type: NodeTypes.ELEMENT,
+          children: [{ type: NodeTypes.TEXT, content: `}}` }]
+        }
+      ])
+
+      const ast2 = baseParse(`<div v-pre><span>{{ number </span></div>`)
+      expect((ast2.children[0] as ElementNode).children).toMatchObject([
+        {
+          type: NodeTypes.ELEMENT,
+          children: [{ type: NodeTypes.TEXT, content: `{{ number ` }]
+        }
+      ])
+    })
+
     test('self-closing v-pre', () => {
       const ast = baseParse(
         `<div v-pre/>\n<div :id="foo"><Comp/>{{ bar }}</div>`
diff --git a/packages/compiler-core/src/parser.ts b/packages/compiler-core/src/parser.ts
index f1d712b3643..2250719f570 100644
--- a/packages/compiler-core/src/parser.ts
+++ b/packages/compiler-core/src/parser.ts
@@ -236,7 +236,7 @@ const tokenizer = new Tokenizer(stack, {
         loc: getLoc(start)
       }
       if (name === 'pre') {
-        inVPre = true
+        inVPre = tokenizer.inVPre = true
         currentVPreBoundary = currentOpenTag
         // convert dirs before this one to attributes
         const props = currentOpenTag!.props
@@ -652,7 +652,7 @@ function onCloseTag(el: ElementNode, end: number, isImplied = false) {
     inPre--
   }
   if (currentVPreBoundary === el) {
-    inVPre = false
+    inVPre = tokenizer.inVPre = false
     currentVPreBoundary = null
   }
   if (
diff --git a/packages/compiler-core/src/tokenizer.ts b/packages/compiler-core/src/tokenizer.ts
index ca122f30982..8adb1b47b4d 100644
--- a/packages/compiler-core/src/tokenizer.ts
+++ b/packages/compiler-core/src/tokenizer.ts
@@ -242,6 +242,8 @@ export default class Tokenizer {
   public inRCDATA = false
   /** For disabling RCDATA tags handling */
   public inXML = false
+  /** For disabling interpolation parsing in v-pre */
+  public inVPre = false
   /** Record newline positions for fast line / column calculation */
   private newlines: number[] = []
 
@@ -314,7 +316,7 @@ export default class Tokenizer {
       this.sectionStart = this.index
     } else if (!__BROWSER__ && c === CharCodes.Amp) {
       this.startEntity()
-    } else if (c === this.delimiterOpen[0]) {
+    } else if (!this.inVPre && c === this.delimiterOpen[0]) {
       this.state = State.InterpolationOpen
       this.delimiterIndex = 0
       this.stateInterpolationOpen(c)

From c0d396b785cb500f1d5919e08efd473c077c43c5 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 4 Dec 2023 23:24:43 +0800
Subject: [PATCH 32/47] release: v3.4.0-alpha.4

---
 CHANGELOG.md                          | 89 +++++++++++++++++++++++++++
 package.json                          |  2 +-
 packages/compiler-core/package.json   |  2 +-
 packages/compiler-dom/package.json    |  2 +-
 packages/compiler-sfc/package.json    |  2 +-
 packages/compiler-ssr/package.json    |  2 +-
 packages/reactivity/package.json      |  2 +-
 packages/runtime-core/package.json    |  2 +-
 packages/runtime-dom/package.json     |  2 +-
 packages/server-renderer/package.json |  2 +-
 packages/shared/package.json          |  2 +-
 packages/vue-compat/package.json      |  2 +-
 packages/vue/package.json             |  2 +-
 13 files changed, 101 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 53b685c392c..c8598e84614 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,92 @@
+# [3.4.0-alpha.4](https://github.com/vuejs/core/compare/v3.3.10...v3.4.0-alpha.4) (2023-12-04)
+
+
+### Bug Fixes
+
+* **compiler-core:** fix referencing typo ([#9708](https://github.com/vuejs/core/issues/9708)) ([3071de4](https://github.com/vuejs/core/commit/3071de44bc4bf669ab6b48fd8db8d728c30fdb0c))
+* **parser:** fix interpolation parsing in v-pre ([53aaa1e](https://github.com/vuejs/core/commit/53aaa1eb2876baf9de16b2f2c77b2c5fd5173900))
+* **parser:** properly set initial inXML state based on root ns ([47ea285](https://github.com/vuejs/core/commit/47ea285be3dcb66a83a593346995b5900d6c5478))
+* **parser:** should reset inRCDATA state ([ef97e8b](https://github.com/vuejs/core/commit/ef97e8b07d8350106c940f23679444b698832067))
+
+
+### Features
+
+* **compiler-core:** support accessing Error as global in template expressions ([#7018](https://github.com/vuejs/core/issues/7018)) ([bcca475](https://github.com/vuejs/core/commit/bcca475dbc58d76434cd8120b94929758cee2825))
+* **compiler-sfc:** analyze import usage in template via AST ([#9729](https://github.com/vuejs/core/issues/9729)) ([e8bbc94](https://github.com/vuejs/core/commit/e8bbc946cba6bf74c9da56f938b67d2a04c340ba)), closes [#8897](https://github.com/vuejs/core/issues/8897) [nuxt/nuxt#22416](https://github.com/nuxt/nuxt/issues/22416)
+* **compiler-sfc:** bump postcss-modules to v6 ([2a507e3](https://github.com/vuejs/core/commit/2a507e32f0e2ef73813705a568b8633f68bda7a9))
+* **compiler:** lift vnode hooks deprecation warning to error ([8abc754](https://github.com/vuejs/core/commit/8abc754d5d86d9dfd5a7927b846f1a743f352364))
+* use enum to replace const enum ([#9261](https://github.com/vuejs/core/issues/9261)) ([fff7b86](https://github.com/vuejs/core/commit/fff7b864f4292d0430ba2bda7098ad43876b0210)), closes [#1228](https://github.com/vuejs/core/issues/1228)
+
+
+
+# [3.4.0-alpha.3](https://github.com/vuejs/core/compare/v3.4.0-alpha.2...v3.4.0-alpha.3) (2023-11-28)
+
+
+### Bug Fixes
+
+* **parser:** directive arg should be undefined on shorthands with no arg ([e49dffc](https://github.com/vuejs/core/commit/e49dffc9ece86bddf094b9ad4ad15eb4856d6277))
+
+
+### Features
+
+* **dx:** link errors to docs in prod build ([#9165](https://github.com/vuejs/core/issues/9165)) ([9f8ba98](https://github.com/vuejs/core/commit/9f8ba9821fe166f77e63fa940e9e7e13ec3344fa))
+
+
+
+# [3.4.0-alpha.2](https://github.com/vuejs/core/compare/v3.3.9...v3.4.0-alpha.2) (2023-11-27)
+
+
+### Bug Fixes
+
+* avoid confusing breakage in @vitejs/plugin-vue ([ceec69c](https://github.com/vuejs/core/commit/ceec69c8ccb96c433a4a506ad2e85e276998bade))
+* **compiler-core:** fix line/column tracking when fast forwarding ([2e65ea4](https://github.com/vuejs/core/commit/2e65ea481f74db8649df8110a031cbdc98f98c84))
+* **compiler-sfc:** fix ast reuse for ssr ([fb619cf](https://github.com/vuejs/core/commit/fb619cf9a440239f0ba88e327d10001a6a3c8171))
+* **compiler-sfc:** support `:is` and `:where` selector in scoped css rewrite ([#8929](https://github.com/vuejs/core/issues/8929)) ([c6083dc](https://github.com/vuejs/core/commit/c6083dcad31f3e9292c687fada9e32f287e2317f))
+* **compiler-sfc:** use correct compiler when re-parsing in ssr mode ([678378a](https://github.com/vuejs/core/commit/678378afd559481badb486b243722b6287862e09))
+
+
+* feat!: remove reactivity transform (#9321) ([79b8a09](https://github.com/vuejs/core/commit/79b8a0905bf363bf82edd2096fef10c3db6d9c3c)), closes [#9321](https://github.com/vuejs/core/issues/9321)
+
+
+### Features
+
+* **compiler-core:** support specifying root namespace when parsing ([40f72d5](https://github.com/vuejs/core/commit/40f72d5e50b389cb11b7ca13461aa2a75ddacdb4))
+* **compiler-core:** support v-bind shorthand for key and value with the same name ([#9451](https://github.com/vuejs/core/issues/9451)) ([26399aa](https://github.com/vuejs/core/commit/26399aa6fac1596b294ffeba06bb498d86f5508c))
+* **compiler:** improve parsing tolerance for language-tools ([41ff68e](https://github.com/vuejs/core/commit/41ff68ea579d933333392146625560359acb728a))
+* **reactivity:** expose last result for computed getter ([#9497](https://github.com/vuejs/core/issues/9497)) ([48b47a1](https://github.com/vuejs/core/commit/48b47a1ab63577e2dbd91947eea544e3ef185b85))
+
+
+### Performance Improvements
+
+* avoid sfc source map unnecessary serialization and parsing ([f15d2f6](https://github.com/vuejs/core/commit/f15d2f6cf69c0c39f8dfb5c33122790c68bf92e2))
+* **codegen:** optimize line / column calculation during codegen ([3be53d9](https://github.com/vuejs/core/commit/3be53d9b974dae1a10eb795cade71ae765e17574))
+* **codegen:** optimize source map generation ([c11002f](https://github.com/vuejs/core/commit/c11002f16afd243a2b15b546816e73882eea9e4d))
+* **compiler-sfc:** remove magic-string trim on script ([e8e3ec6](https://github.com/vuejs/core/commit/e8e3ec6ca7392e43975c75b56eaaa711d5ea9410))
+* **compiler-sfc:** use faster source map addMapping ([50cde7c](https://github.com/vuejs/core/commit/50cde7cfbcc49022ba88f5f69fa9b930b483c282))
+* optimize away isBuiltInType ([66c0ed0](https://github.com/vuejs/core/commit/66c0ed0a3c1c6f37dafc6b1c52b75c6bf60e3136))
+* optimize makeMap ([ae6fba9](https://github.com/vuejs/core/commit/ae6fba94954bac6430902f77b0d1113a98a75b18))
+* optimize position cloning ([2073236](https://github.com/vuejs/core/commit/20732366b9b3530d33b842cf1fc985919afb9317))
+
+
+### BREAKING CHANGES
+
+* Reactivity Transform was marked deprecated in 3.3 and is now removed in 3.4. This change does not require a major due to the feature being experimental. Users who wish to continue using the feature can do so via the external plugin at https://vue-macros.dev/features/reactivity-transform.html
+
+
+
+# [3.4.0-alpha.1](https://github.com/vuejs/core/compare/v3.3.7...v3.4.0-alpha.1) (2023-10-28)
+
+
+### Features
+
+* **compiler-core:** export error message ([#8729](https://github.com/vuejs/core/issues/8729)) ([f7e80ee](https://github.com/vuejs/core/commit/f7e80ee4a065a9eaba98720abf415d9e87756cbd))
+* **compiler-sfc:** expose resolve type-based props and emits ([#8874](https://github.com/vuejs/core/issues/8874)) ([9e77580](https://github.com/vuejs/core/commit/9e77580c0c2f0d977bd0031a1d43cc334769d433))
+* export runtime error strings ([#9301](https://github.com/vuejs/core/issues/9301)) ([feb2f2e](https://github.com/vuejs/core/commit/feb2f2edce2d91218a5e9a52c81e322e4033296b))
+* **reactivity:** more efficient reactivity system ([#5912](https://github.com/vuejs/core/issues/5912)) ([16e06ca](https://github.com/vuejs/core/commit/16e06ca08f5a1e2af3fc7fb35de153dbe0c3087d)), closes [#311](https://github.com/vuejs/core/issues/311) [#1811](https://github.com/vuejs/core/issues/1811) [#6018](https://github.com/vuejs/core/issues/6018) [#7160](https://github.com/vuejs/core/issues/7160) [#8714](https://github.com/vuejs/core/issues/8714) [#9149](https://github.com/vuejs/core/issues/9149) [#9419](https://github.com/vuejs/core/issues/9419) [#9464](https://github.com/vuejs/core/issues/9464)
+* **runtime-core:** add `once` option to watch ([#9034](https://github.com/vuejs/core/issues/9034)) ([a645e7a](https://github.com/vuejs/core/commit/a645e7aa51006516ba668b3a4365d296eb92ee7d))
+
+
+
 ## [3.3.10](https://github.com/vuejs/core/compare/v3.3.9...v3.3.10) (2023-12-04)
 
 
diff --git a/package.json b/package.json
index 27327e2243d..1f4d5e99486 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "3.4.0-alpha.3",
+  "version": "3.4.0-alpha.4",
   "packageManager": "pnpm@8.11.0",
   "type": "module",
   "scripts": {
diff --git a/packages/compiler-core/package.json b/packages/compiler-core/package.json
index 511dd4a234f..4a4e4cafb82 100644
--- a/packages/compiler-core/package.json
+++ b/packages/compiler-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-core",
-  "version": "3.4.0-alpha.3",
+  "version": "3.4.0-alpha.4",
   "description": "@vue/compiler-core",
   "main": "index.js",
   "module": "dist/compiler-core.esm-bundler.js",
diff --git a/packages/compiler-dom/package.json b/packages/compiler-dom/package.json
index 76a96bf24db..5b31c849694 100644
--- a/packages/compiler-dom/package.json
+++ b/packages/compiler-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-dom",
-  "version": "3.4.0-alpha.3",
+  "version": "3.4.0-alpha.4",
   "description": "@vue/compiler-dom",
   "main": "index.js",
   "module": "dist/compiler-dom.esm-bundler.js",
diff --git a/packages/compiler-sfc/package.json b/packages/compiler-sfc/package.json
index 82fe7a57a91..376d3027209 100644
--- a/packages/compiler-sfc/package.json
+++ b/packages/compiler-sfc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.4.0-alpha.3",
+  "version": "3.4.0-alpha.4",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "module": "dist/compiler-sfc.esm-browser.js",
diff --git a/packages/compiler-ssr/package.json b/packages/compiler-ssr/package.json
index 1bc8b909428..28d1edbd0bb 100644
--- a/packages/compiler-ssr/package.json
+++ b/packages/compiler-ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-ssr",
-  "version": "3.4.0-alpha.3",
+  "version": "3.4.0-alpha.4",
   "description": "@vue/compiler-ssr",
   "main": "dist/compiler-ssr.cjs.js",
   "types": "dist/compiler-ssr.d.ts",
diff --git a/packages/reactivity/package.json b/packages/reactivity/package.json
index 1a082aea5ee..a5bf7857f22 100644
--- a/packages/reactivity/package.json
+++ b/packages/reactivity/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/reactivity",
-  "version": "3.4.0-alpha.3",
+  "version": "3.4.0-alpha.4",
   "description": "@vue/reactivity",
   "main": "index.js",
   "module": "dist/reactivity.esm-bundler.js",
diff --git a/packages/runtime-core/package.json b/packages/runtime-core/package.json
index 2a9478120d5..662e028e88e 100644
--- a/packages/runtime-core/package.json
+++ b/packages/runtime-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-core",
-  "version": "3.4.0-alpha.3",
+  "version": "3.4.0-alpha.4",
   "description": "@vue/runtime-core",
   "main": "index.js",
   "module": "dist/runtime-core.esm-bundler.js",
diff --git a/packages/runtime-dom/package.json b/packages/runtime-dom/package.json
index e1167854d2e..da0bce7659c 100644
--- a/packages/runtime-dom/package.json
+++ b/packages/runtime-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-dom",
-  "version": "3.4.0-alpha.3",
+  "version": "3.4.0-alpha.4",
   "description": "@vue/runtime-dom",
   "main": "index.js",
   "module": "dist/runtime-dom.esm-bundler.js",
diff --git a/packages/server-renderer/package.json b/packages/server-renderer/package.json
index 72b8409d2db..5bda0292f54 100644
--- a/packages/server-renderer/package.json
+++ b/packages/server-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/server-renderer",
-  "version": "3.4.0-alpha.3",
+  "version": "3.4.0-alpha.4",
   "description": "@vue/server-renderer",
   "main": "index.js",
   "module": "dist/server-renderer.esm-bundler.js",
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 184e769ae5d..32303e5caa0 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/shared",
-  "version": "3.4.0-alpha.3",
+  "version": "3.4.0-alpha.4",
   "description": "internal utils shared across @vue packages",
   "main": "index.js",
   "module": "dist/shared.esm-bundler.js",
diff --git a/packages/vue-compat/package.json b/packages/vue-compat/package.json
index f407a599184..3904c55ab21 100644
--- a/packages/vue-compat/package.json
+++ b/packages/vue-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compat",
-  "version": "3.4.0-alpha.3",
+  "version": "3.4.0-alpha.4",
   "description": "Vue 3 compatibility build for Vue 2",
   "main": "index.js",
   "module": "dist/vue.runtime.esm-bundler.js",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index cfd9e2839f9..331542647ad 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue",
-  "version": "3.4.0-alpha.3",
+  "version": "3.4.0-alpha.4",
   "description": "The progressive JavaScript framework for building modern web UI.",
   "main": "index.js",
   "module": "dist/vue.runtime.esm-bundler.js",

From 243f504dc5900905baf397bb0643d473a4b98d94 Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Mon, 4 Dec 2023 19:08:21 +0000
Subject: [PATCH 33/47] chore(playground): expose esm-browser files (#9725)

---
 package.json                           | 3 ++-
 packages/sfc-playground/vite.config.ts | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1afd51ffde4..bb35de3930b 100644
--- a/package.json
+++ b/package.json
@@ -32,9 +32,10 @@
     "dev-sfc-run": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev vue -ipf esm-browser-runtime\" \"dev server-renderer -if esm-bundler\" dev-sfc-serve",
     "serve": "serve",
     "open": "open http://localhost:3000/packages/template-explorer/local.html",
-    "build-sfc-playground": "run-s build-all-cjs build-runtime-esm build-ssr-esm build-sfc-playground-self",
+    "build-sfc-playground": "run-s build-all-cjs build-runtime-esm build-browser-esm build-ssr-esm build-sfc-playground-self",
     "build-all-cjs": "node scripts/build.js vue runtime compiler reactivity reactivity-transform shared -af cjs",
     "build-runtime-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime",
+    "build-browser-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler && node scripts/build.js vue -f esm-browser",
     "build-ssr-esm": "node scripts/build.js compiler-sfc server-renderer -f esm-browser",
     "build-sfc-playground-self": "cd packages/sfc-playground && npm run build",
     "preinstall": "npx only-allow pnpm",
diff --git a/packages/sfc-playground/vite.config.ts b/packages/sfc-playground/vite.config.ts
index d4546da99c0..8df331baf39 100644
--- a/packages/sfc-playground/vite.config.ts
+++ b/packages/sfc-playground/vite.config.ts
@@ -48,6 +48,8 @@ function copyVuePlugin(): Plugin {
         })
       }
 
+      copyFile(`../vue/dist/vue.esm-browser.js`)
+      copyFile(`../vue/dist/vue.esm-browser.prod.js`)
       copyFile(`../vue/dist/vue.runtime.esm-browser.js`)
       copyFile(`../vue/dist/vue.runtime.esm-browser.prod.js`)
       copyFile(`../server-renderer/dist/server-renderer.esm-browser.js`)

From e2f2b75b6230c5c49198559f1d613ea8b4fd4af5 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Tue, 5 Dec 2023 10:47:38 +0800
Subject: [PATCH 34/47] chore(deps): bump vitest to 1.0

---
 package.json                                  |   2 +-
 .../__snapshots__/codegen.spec.ts.snap        |  28 +--
 .../__snapshots__/compile.spec.ts.snap        |  44 ++--
 .../__snapshots__/parse.spec.ts.snap          | 132 ++++++------
 .../__snapshots__/scopeId.spec.ts.snap        |  34 +--
 .../compiler-core/__tests__/codegen.spec.ts   |  18 +-
 .../__snapshots__/hoistStatic.spec.ts.snap    | 142 ++++++------
 .../transformExpressions.spec.ts.snap         |  16 +-
 .../__snapshots__/transformText.spec.ts.snap  |  32 +--
 .../__snapshots__/vFor.spec.ts.snap           |  40 ++--
 .../transforms/__snapshots__/vIf.spec.ts.snap |  54 ++---
 .../__snapshots__/vMemo.spec.ts.snap          |  42 ++--
 .../__snapshots__/vModel.spec.ts.snap         |  52 ++---
 .../__snapshots__/vOnce.spec.ts.snap          |  20 +-
 .../__snapshots__/vSlot.spec.ts.snap          |  84 ++++----
 .../__snapshots__/index.spec.ts.snap          |  12 +-
 .../__snapshots__/Transition.spec.ts.snap     |  16 +-
 .../stringifyStatic.spec.ts.snap              |  26 +--
 .../__snapshots__/vModel.spec.ts.snap         |  84 ++++----
 .../__snapshots__/vShow.spec.ts.snap          |   2 +-
 .../__snapshots__/compileScript.spec.ts.snap  |  88 ++++----
 .../compileTemplate.spec.ts.snap              |  24 +--
 .../__snapshots__/cssVars.spec.ts.snap        |  32 +--
 .../templateTransformAssetUrl.spec.ts.snap    |  68 +++---
 .../templateTransformSrcset.spec.ts.snap      | 204 +++++++++---------
 .../__snapshots__/defineEmits.spec.ts.snap    |  32 +--
 .../__snapshots__/defineModel.spec.ts.snap    |  92 ++++----
 .../__snapshots__/defineProps.spec.ts.snap    |  58 ++---
 .../definePropsDestructure.spec.ts.snap       |  24 +--
 .../compiler-sfc/__tests__/cssVars.spec.ts    |   2 +-
 .../__tests__/ssrComponent.spec.ts            | 124 +++++------
 .../compiler-ssr/__tests__/ssrElement.spec.ts |  84 ++++----
 .../__tests__/ssrFallthroughAttrs.spec.ts     |   6 +-
 .../__tests__/ssrInjectCssVars.spec.ts        |  22 +-
 .../compiler-ssr/__tests__/ssrPortal.spec.ts  |   6 +-
 .../compiler-ssr/__tests__/ssrScopeId.spec.ts |  44 ++--
 .../__tests__/ssrSlotOutlet.spec.ts           |  42 ++--
 .../__tests__/ssrSuspense.spec.ts             |  12 +-
 .../compiler-ssr/__tests__/ssrText.spec.ts    |   8 +-
 .../__tests__/ssrTransition.spec.ts           |  20 +-
 .../__tests__/ssrTransitionGroup.spec.ts      |  16 +-
 .../compiler-ssr/__tests__/ssrVFor.spec.ts    |  14 +-
 .../compiler-ssr/__tests__/ssrVIf.spec.ts     |  16 +-
 .../compiler-ssr/__tests__/ssrVModel.spec.ts  | 106 ++++-----
 .../compiler-ssr/__tests__/ssrVShow.spec.ts   |  50 ++---
 .../runtime-core/__tests__/hydration.spec.ts  |   8 +-
 .../__snapshots__/codeframe.spec.ts.snap      |  34 +--
 .../shared/__tests__/toDisplayString.spec.ts  |  54 ++---
 .../__tests__/componentFunctional.spec.ts     |   2 +-
 pnpm-lock.yaml                                | 129 ++++++-----
 50 files changed, 1146 insertions(+), 1155 deletions(-)

diff --git a/package.json b/package.json
index bb35de3930b..0dfa0df4825 100644
--- a/package.json
+++ b/package.json
@@ -106,6 +106,6 @@
     "tsx": "^4.6.2",
     "typescript": "^5.2.2",
     "vite": "^5.0.0",
-    "vitest": "^0.34.6"
+    "vitest": "^1.0.0"
   }
 }
diff --git a/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap
index 032d17e2646..2bdb4afa4c0 100644
--- a/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap
@@ -48,12 +48,12 @@ exports[`compiler: codegen > Element (callExpression + objectExpression + Templa
 "
 return function render(_ctx, _cache) {
   with (_ctx) {
-    return _createElementVNode(\\"div\\", {
-      id: \\"foo\\",
+    return _createElementVNode("div", {
+      id: "foo",
       [prop]: bar,
       [foo + bar]: bar
     }, [
-      _createElementVNode(\\"p\\", { \\"some-key\\": \\"foo\\" })
+      _createElementVNode("p", { "some-key": "foo" })
     ], 16)
   }
 }"
@@ -63,12 +63,12 @@ exports[`compiler: codegen > assets + temps 1`] = `
 "
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const _component_Foo = _resolveComponent(\\"Foo\\")
-    const _component_bar_baz = _resolveComponent(\\"bar-baz\\")
-    const _component_barbaz = _resolveComponent(\\"barbaz\\")
-    const _component_Qux = _resolveComponent(\\"Qux\\", true)
-    const _directive_my_dir_0 = _resolveDirective(\\"my_dir_0\\")
-    const _directive_my_dir_1 = _resolveDirective(\\"my_dir_1\\")
+    const _component_Foo = _resolveComponent("Foo")
+    const _component_bar_baz = _resolveComponent("bar-baz")
+    const _component_barbaz = _resolveComponent("barbaz")
+    const _component_Qux = _resolveComponent("Qux", true)
+    const _directive_my_dir_0 = _resolveDirective("my_dir_0")
+    const _directive_my_dir_1 = _resolveDirective("my_dir_1")
     let _temp0, _temp1, _temp2
 
     return null
@@ -80,7 +80,7 @@ exports[`compiler: codegen > comment 1`] = `
 "
 return function render(_ctx, _cache) {
   with (_ctx) {
-    return _createCommentVNode(\\"foo\\")
+    return _createCommentVNode("foo")
   }
 }"
 `;
@@ -135,7 +135,7 @@ return function render(_ctx, _cache) {
 exports[`compiler: codegen > hoists 1`] = `
 "
 const _hoisted_1 = hello
-const _hoisted_2 = { id: \\"foo\\" }
+const _hoisted_2 = { id: "foo" }
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -165,7 +165,7 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: codegen > module mode preamble 1`] = `
-"import { createVNode as _createVNode, resolveDirective as _resolveDirective } from \\"vue\\"
+"import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue"
 
 export function render(_ctx, _cache) {
   return null
@@ -173,7 +173,7 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`compiler: codegen > module mode preamble w/ optimizeImports: true 1`] = `
-"import { createVNode, resolveDirective } from \\"vue\\"
+"import { createVNode, resolveDirective } from "vue"
 
 // Binding optimization for webpack code-split
 const _createVNode = createVNode, _resolveDirective = resolveDirective
@@ -187,7 +187,7 @@ exports[`compiler: codegen > static text 1`] = `
 "
 return function render(_ctx, _cache) {
   with (_ctx) {
-    return \\"hello\\"
+    return "hello"
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
index e8b2efba79e..625485719cb 100644
--- a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
@@ -7,19 +7,19 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, normalizeClass: _normalizeClass } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", {
-      id: \\"foo\\",
+    return (_openBlock(), _createElementBlock("div", {
+      id: "foo",
       class: _normalizeClass(bar.baz)
     }, [
-      _createTextVNode(_toDisplayString(world.burn()) + \\" \\", 1 /* TEXT */),
+      _createTextVNode(_toDisplayString(world.burn()) + " ", 1 /* TEXT */),
       ok
-        ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
+        ? (_openBlock(), _createElementBlock("div", { key: 0 }, "yes"))
         : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
-            _createTextVNode(\\"no\\")
+            _createTextVNode("no")
           ], 64 /* STABLE_FRAGMENT */)),
       (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (value, index) => {
-        return (_openBlock(), _createElementBlock(\\"div\\", null, [
-          _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
+        return (_openBlock(), _createElementBlock("div", null, [
+          _createElementVNode("span", null, _toDisplayString(value + index), 1 /* TEXT */)
         ]))
       }), 256 /* UNKEYED_FRAGMENT */))
     ], 2 /* CLASS */))
@@ -31,19 +31,19 @@ exports[`compiler: integration tests > function mode w/ prefixIdentifiers: true
 "const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, normalizeClass: _normalizeClass } = Vue
 
 return function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", {
-    id: \\"foo\\",
+  return (_openBlock(), _createElementBlock("div", {
+    id: "foo",
     class: _normalizeClass(_ctx.bar.baz)
   }, [
-    _createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
+    _createTextVNode(_toDisplayString(_ctx.world.burn()) + " ", 1 /* TEXT */),
     (_ctx.ok)
-      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
+      ? (_openBlock(), _createElementBlock("div", { key: 0 }, "yes"))
       : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
-          _createTextVNode(\\"no\\")
+          _createTextVNode("no")
         ], 64 /* STABLE_FRAGMENT */)),
     (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
-      return (_openBlock(), _createElementBlock(\\"div\\", null, [
-        _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
+      return (_openBlock(), _createElementBlock("div", null, [
+        _createElementVNode("span", null, _toDisplayString(value + index), 1 /* TEXT */)
       ]))
     }), 256 /* UNKEYED_FRAGMENT */))
   ], 2 /* CLASS */))
@@ -51,22 +51,22 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: integration tests > module mode 1`] = `
-"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, renderList as _renderList, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, renderList as _renderList, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", {
-    id: \\"foo\\",
+  return (_openBlock(), _createElementBlock("div", {
+    id: "foo",
     class: _normalizeClass(_ctx.bar.baz)
   }, [
-    _createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
+    _createTextVNode(_toDisplayString(_ctx.world.burn()) + " ", 1 /* TEXT */),
     (_ctx.ok)
-      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
+      ? (_openBlock(), _createElementBlock("div", { key: 0 }, "yes"))
       : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
-          _createTextVNode(\\"no\\")
+          _createTextVNode("no")
         ], 64 /* STABLE_FRAGMENT */)),
     (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
-      return (_openBlock(), _createElementBlock(\\"div\\", null, [
-        _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
+      return (_openBlock(), _createElementBlock("div", null, [
+        _createElementVNode("span", null, _toDisplayString(value + index), 1 /* TEXT */)
       ]))
     }), 256 /* UNKEYED_FRAGMENT */))
   ], 2 /* CLASS */))
diff --git a/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap
index e4728a46104..5217a15023d 100644
--- a/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap
@@ -390,7 +390,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
               "line": 1,
               "offset": 33,
             },
-            "source": "<div id=\\"\\" id=\\"\\"></div>",
+            "source": "<div id="" id=""></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -406,7 +406,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                   "line": 1,
                   "offset": 20,
                 },
-                "source": "id=\\"\\"",
+                "source": "id=""",
                 "start": {
                   "column": 16,
                   "line": 1,
@@ -423,7 +423,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                     "line": 1,
                     "offset": 20,
                   },
-                  "source": "\\"\\"",
+                  "source": """",
                   "start": {
                     "column": 19,
                     "line": 1,
@@ -440,7 +440,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                   "line": 1,
                   "offset": 26,
                 },
-                "source": "id=\\"\\"",
+                "source": "id=""",
                 "start": {
                   "column": 22,
                   "line": 1,
@@ -457,7 +457,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                     "line": 1,
                     "offset": 26,
                   },
-                  "source": "\\"\\"",
+                  "source": """",
                   "start": {
                     "column": 25,
                     "line": 1,
@@ -481,7 +481,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
           "line": 1,
           "offset": 44,
         },
-        "source": "<template><div id=\\"\\" id=\\"\\"></div></template>",
+        "source": "<template><div id="" id=""></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -507,7 +507,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
       "line": 1,
       "offset": 44,
     },
-    "source": "<template><div id=\\"\\" id=\\"\\"></div></template>",
+    "source": "<template><div id="" id=""></div></template>",
     "start": {
       "column": 1,
       "line": 1,
@@ -535,7 +535,7 @@ exports[`compiler: parse > Errors > END_TAG_WITH_ATTRIBUTES > <template><div></d
               "line": 1,
               "offset": 27,
             },
-            "source": "<div></div id=\\"\\">",
+            "source": "<div></div id="">",
             "start": {
               "column": 11,
               "line": 1,
@@ -557,7 +557,7 @@ exports[`compiler: parse > Errors > END_TAG_WITH_ATTRIBUTES > <template><div></d
           "line": 1,
           "offset": 38,
         },
-        "source": "<template><div></div id=\\"\\"></template>",
+        "source": "<template><div></div id=""></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -583,7 +583,7 @@ exports[`compiler: parse > Errors > END_TAG_WITH_ATTRIBUTES > <template><div></d
       "line": 1,
       "offset": 38,
     },
-    "source": "<template><div></div id=\\"\\"></template>",
+    "source": "<template><div></div id=""></template>",
     "start": {
       "column": 1,
       "line": 1,
@@ -1976,7 +1976,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc 1`] = `
               "line": 1,
               "offset": 22,
             },
-            "source": "<div id=\\"abc",
+            "source": "<div id="abc",
             "start": {
               "column": 11,
               "line": 1,
@@ -1992,7 +1992,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc 1`] = `
                   "line": 1,
                   "offset": 22,
                 },
-                "source": "id=\\"abc",
+                "source": "id="abc",
                 "start": {
                   "column": 16,
                   "line": 1,
@@ -2009,7 +2009,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc 1`] = `
                     "line": 1,
                     "offset": 22,
                   },
-                  "source": "\\"abc",
+                  "source": ""abc",
                   "start": {
                     "column": 19,
                     "line": 1,
@@ -2033,7 +2033,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc 1`] = `
           "line": 1,
           "offset": 22,
         },
-        "source": "<template><div id=\\"abc",
+        "source": "<template><div id="abc",
         "start": {
           "column": 1,
           "line": 1,
@@ -2059,7 +2059,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc 1`] = `
       "line": 1,
       "offset": 22,
     },
-    "source": "<template><div id=\\"abc",
+    "source": "<template><div id="abc",
     "start": {
       "column": 1,
       "line": 1,
@@ -2087,7 +2087,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc" 1`] = `
               "line": 1,
               "offset": 23,
             },
-            "source": "<div id=\\"abc\\"",
+            "source": "<div id="abc"",
             "start": {
               "column": 11,
               "line": 1,
@@ -2103,7 +2103,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc" 1`] = `
                   "line": 1,
                   "offset": 23,
                 },
-                "source": "id=\\"abc\\"",
+                "source": "id="abc"",
                 "start": {
                   "column": 16,
                   "line": 1,
@@ -2120,7 +2120,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc" 1`] = `
                     "line": 1,
                     "offset": 23,
                   },
-                  "source": "\\"abc\\"",
+                  "source": ""abc"",
                   "start": {
                     "column": 19,
                     "line": 1,
@@ -2144,7 +2144,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc" 1`] = `
           "line": 1,
           "offset": 23,
         },
-        "source": "<template><div id=\\"abc\\"",
+        "source": "<template><div id="abc"",
         "start": {
           "column": 1,
           "line": 1,
@@ -2170,7 +2170,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc" 1`] = `
       "line": 1,
       "offset": 23,
     },
-    "source": "<template><div id=\\"abc\\"",
+    "source": "<template><div id="abc"",
     "start": {
       "column": 1,
       "line": 1,
@@ -2198,7 +2198,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
               "line": 1,
               "offset": 24,
             },
-            "source": "<div id=\\"abc\\"/",
+            "source": "<div id="abc"/",
             "start": {
               "column": 11,
               "line": 1,
@@ -2214,7 +2214,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
                   "line": 1,
                   "offset": 23,
                 },
-                "source": "id=\\"abc\\"",
+                "source": "id="abc"",
                 "start": {
                   "column": 16,
                   "line": 1,
@@ -2231,7 +2231,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
                     "line": 1,
                     "offset": 23,
                   },
-                  "source": "\\"abc\\"",
+                  "source": ""abc"",
                   "start": {
                     "column": 19,
                     "line": 1,
@@ -2255,7 +2255,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
           "line": 1,
           "offset": 24,
         },
-        "source": "<template><div id=\\"abc\\"/",
+        "source": "<template><div id="abc"/",
         "start": {
           "column": 1,
           "line": 1,
@@ -2281,7 +2281,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
       "line": 1,
       "offset": 24,
     },
-    "source": "<template><div id=\\"abc\\"/",
+    "source": "<template><div id="abc"/",
     "start": {
       "column": 1,
       "line": 1,
@@ -3928,8 +3928,8 @@ exports[`compiler: parse > Errors > MISSING_WHITESPACE_BETWEEN_ATTRIBUTES > <tem
               "line": 2,
               "offset": 43,
             },
-            "source": "<div id=\\"foo\\"
-class=\\"bar\\"></div>",
+            "source": "<div id="foo"
+class="bar"></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -3945,7 +3945,7 @@ class=\\"bar\\"></div>",
                   "line": 1,
                   "offset": 23,
                 },
-                "source": "id=\\"foo\\"",
+                "source": "id="foo"",
                 "start": {
                   "column": 16,
                   "line": 1,
@@ -3962,7 +3962,7 @@ class=\\"bar\\"></div>",
                     "line": 1,
                     "offset": 23,
                   },
-                  "source": "\\"foo\\"",
+                  "source": ""foo"",
                   "start": {
                     "column": 19,
                     "line": 1,
@@ -3979,7 +3979,7 @@ class=\\"bar\\"></div>",
                   "line": 2,
                   "offset": 36,
                 },
-                "source": "class=\\"bar\\"",
+                "source": "class="bar"",
                 "start": {
                   "column": 1,
                   "line": 2,
@@ -3996,7 +3996,7 @@ class=\\"bar\\"></div>",
                     "line": 2,
                     "offset": 36,
                   },
-                  "source": "\\"bar\\"",
+                  "source": ""bar"",
                   "start": {
                     "column": 7,
                     "line": 2,
@@ -4020,8 +4020,8 @@ class=\\"bar\\"></div>",
           "line": 2,
           "offset": 54,
         },
-        "source": "<template><div id=\\"foo\\"
-class=\\"bar\\"></div></template>",
+        "source": "<template><div id="foo"
+class="bar"></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -4047,8 +4047,8 @@ class=\\"bar\\"></div></template>",
       "line": 2,
       "offset": 54,
     },
-    "source": "<template><div id=\\"foo\\"
-class=\\"bar\\"></div></template>",
+    "source": "<template><div id="foo"
+class="bar"></div></template>",
     "start": {
       "column": 1,
       "line": 1,
@@ -4076,7 +4076,7 @@ exports[`compiler: parse > Errors > MISSING_WHITESPACE_BETWEEN_ATTRIBUTES > <tem
               "line": 1,
               "offset": 41,
             },
-            "source": "<div id=\\"foo\\"class=\\"bar\\"></div>",
+            "source": "<div id="foo"class="bar"></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -4092,7 +4092,7 @@ exports[`compiler: parse > Errors > MISSING_WHITESPACE_BETWEEN_ATTRIBUTES > <tem
                   "line": 1,
                   "offset": 23,
                 },
-                "source": "id=\\"foo\\"",
+                "source": "id="foo"",
                 "start": {
                   "column": 16,
                   "line": 1,
@@ -4109,7 +4109,7 @@ exports[`compiler: parse > Errors > MISSING_WHITESPACE_BETWEEN_ATTRIBUTES > <tem
                     "line": 1,
                     "offset": 23,
                   },
-                  "source": "\\"foo\\"",
+                  "source": ""foo"",
                   "start": {
                     "column": 19,
                     "line": 1,
@@ -4126,7 +4126,7 @@ exports[`compiler: parse > Errors > MISSING_WHITESPACE_BETWEEN_ATTRIBUTES > <tem
                   "line": 1,
                   "offset": 34,
                 },
-                "source": "class=\\"bar\\"",
+                "source": "class="bar"",
                 "start": {
                   "column": 24,
                   "line": 1,
@@ -4143,7 +4143,7 @@ exports[`compiler: parse > Errors > MISSING_WHITESPACE_BETWEEN_ATTRIBUTES > <tem
                     "line": 1,
                     "offset": 34,
                   },
-                  "source": "\\"bar\\"",
+                  "source": ""bar"",
                   "start": {
                     "column": 30,
                     "line": 1,
@@ -4167,7 +4167,7 @@ exports[`compiler: parse > Errors > MISSING_WHITESPACE_BETWEEN_ATTRIBUTES > <tem
           "line": 1,
           "offset": 52,
         },
-        "source": "<template><div id=\\"foo\\"class=\\"bar\\"></div></template>",
+        "source": "<template><div id="foo"class="bar"></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -4193,7 +4193,7 @@ exports[`compiler: parse > Errors > MISSING_WHITESPACE_BETWEEN_ATTRIBUTES > <tem
       "line": 1,
       "offset": 52,
     },
-    "source": "<template><div id=\\"foo\\"class=\\"bar\\"></div></template>",
+    "source": "<template><div id="foo"class="bar"></div></template>",
     "start": {
       "column": 1,
       "line": 1,
@@ -4571,7 +4571,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
               "line": 1,
               "offset": 29,
             },
-            "source": "<div a\\"bc=''></div>",
+            "source": "<div a"bc=''></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -4587,14 +4587,14 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
                   "line": 1,
                   "offset": 22,
                 },
-                "source": "a\\"bc=''",
+                "source": "a"bc=''",
                 "start": {
                   "column": 16,
                   "line": 1,
                   "offset": 15,
                 },
               },
-              "name": "a\\"bc",
+              "name": "a"bc",
               "type": 6,
               "value": {
                 "content": "",
@@ -4628,7 +4628,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
           "line": 1,
           "offset": 40,
         },
-        "source": "<template><div a\\"bc=''></div></template>",
+        "source": "<template><div a"bc=''></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -4654,7 +4654,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
       "line": 1,
       "offset": 40,
     },
-    "source": "<template><div a\\"bc=''></div></template>",
+    "source": "<template><div a"bc=''></div></template>",
     "start": {
       "column": 1,
       "line": 1,
@@ -4904,7 +4904,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
               "line": 1,
               "offset": 30,
             },
-            "source": "<div foo=bar\\"></div>",
+            "source": "<div foo=bar"></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -4920,7 +4920,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
                   "line": 1,
                   "offset": 23,
                 },
-                "source": "foo=bar\\"",
+                "source": "foo=bar"",
                 "start": {
                   "column": 16,
                   "line": 1,
@@ -4930,14 +4930,14 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
               "name": "foo",
               "type": 6,
               "value": {
-                "content": "bar\\"",
+                "content": "bar"",
                 "loc": {
                   "end": {
                     "column": 24,
                     "line": 1,
                     "offset": 23,
                   },
-                  "source": "bar\\"",
+                  "source": "bar"",
                   "start": {
                     "column": 20,
                     "line": 1,
@@ -4961,7 +4961,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
           "line": 1,
           "offset": 41,
         },
-        "source": "<template><div foo=bar\\"></div></template>",
+        "source": "<template><div foo=bar"></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -4987,7 +4987,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
       "line": 1,
       "offset": 41,
     },
-    "source": "<template><div foo=bar\\"></div></template>",
+    "source": "<template><div foo=bar"></div></template>",
     "start": {
       "column": 1,
       "line": 1,
@@ -6747,7 +6747,7 @@ exports[`compiler: parse > self closing multiple tag 1`] = `
           "line": 1,
           "offset": 36,
         },
-        "source": "<div :class=\\"{ some: condition }\\" />",
+        "source": "<div :class="{ some: condition }" />",
         "start": {
           "column": 1,
           "line": 1,
@@ -6801,7 +6801,7 @@ exports[`compiler: parse > self closing multiple tag 1`] = `
               "line": 1,
               "offset": 33,
             },
-            "source": ":class=\\"{ some: condition }\\"",
+            "source": ":class="{ some: condition }"",
             "start": {
               "column": 6,
               "line": 1,
@@ -6827,7 +6827,7 @@ exports[`compiler: parse > self closing multiple tag 1`] = `
           "line": 2,
           "offset": 73,
         },
-        "source": "<p v-bind:style=\\"{ color: 'red' }\\"/>",
+        "source": "<p v-bind:style="{ color: 'red' }"/>",
         "start": {
           "column": 1,
           "line": 2,
@@ -6881,7 +6881,7 @@ exports[`compiler: parse > self closing multiple tag 1`] = `
               "line": 2,
               "offset": 71,
             },
-            "source": "v-bind:style=\\"{ color: 'red' }\\"",
+            "source": "v-bind:style="{ color: 'red' }"",
             "start": {
               "column": 4,
               "line": 2,
@@ -6910,8 +6910,8 @@ exports[`compiler: parse > self closing multiple tag 1`] = `
       "line": 2,
       "offset": 73,
     },
-    "source": "<div :class=\\"{ some: condition }\\" />
-<p v-bind:style=\\"{ color: 'red' }\\"/>",
+    "source": "<div :class="{ some: condition }" />
+<p v-bind:style="{ color: 'red' }"/>",
     "start": {
       "column": 1,
       "line": 1,
@@ -6939,7 +6939,7 @@ exports[`compiler: parse > valid html 1`] = `
               "line": 2,
               "offset": 73,
             },
-            "source": "<p v-bind:style=\\"{ color: 'red' }\\"/>",
+            "source": "<p v-bind:style="{ color: 'red' }"/>",
             "start": {
               "column": 3,
               "line": 2,
@@ -6993,7 +6993,7 @@ exports[`compiler: parse > valid html 1`] = `
                   "line": 2,
                   "offset": 71,
                 },
-                "source": "v-bind:style=\\"{ color: 'red' }\\"",
+                "source": "v-bind:style="{ color: 'red' }"",
                 "start": {
                   "column": 6,
                   "line": 2,
@@ -7035,8 +7035,8 @@ exports[`compiler: parse > valid html 1`] = `
           "line": 4,
           "offset": 123,
         },
-        "source": "<div :class=\\"{ some: condition }\\">
-  <p v-bind:style=\\"{ color: 'red' }\\"/>
+        "source": "<div :class="{ some: condition }">
+  <p v-bind:style="{ color: 'red' }"/>
   <!-- a comment with <html> inside it -->
 </div>",
         "start": {
@@ -7092,7 +7092,7 @@ exports[`compiler: parse > valid html 1`] = `
               "line": 1,
               "offset": 33,
             },
-            "source": ":class=\\"{ some: condition }\\"",
+            "source": ":class="{ some: condition }"",
             "start": {
               "column": 6,
               "line": 1,
@@ -7121,8 +7121,8 @@ exports[`compiler: parse > valid html 1`] = `
       "line": 4,
       "offset": 123,
     },
-    "source": "<div :class=\\"{ some: condition }\\">
-  <p v-bind:style=\\"{ color: 'red' }\\"/>
+    "source": "<div :class="{ some: condition }">
+  <p v-bind:style="{ color: 'red' }"/>
   <!-- a comment with <html> inside it -->
 </div>",
     "start": {
diff --git a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
index b8cbf4a8773..445d3fd13ed 100644
--- a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
@@ -1,14 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`scopeId compiler support > should push scopeId for hoisted nodes 1`] = `
-"import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue"
 
-const _withScopeId = n => (_pushScopeId(\\"test\\"),n=n(),_popScopeId(),n)
-const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */))
-const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */))
+const _withScopeId = n => (_pushScopeId("test"),n=n(),_popScopeId(),n)
+const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "hello", -1 /* HOISTED */))
+const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "world", -1 /* HOISTED */))
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+  return (_openBlock(), _createElementBlock("div", null, [
     _hoisted_1,
     _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
     _hoisted_2
@@ -17,14 +17,14 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`scopeId compiler support > should wrap default slot 1`] = `
-"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  const _component_Child = _resolveComponent(\\"Child\\")
+  const _component_Child = _resolveComponent("Child")
 
   return (_openBlock(), _createBlock(_component_Child, null, {
     default: _withCtx(() => [
-      _createElementVNode(\\"div\\")
+      _createElementVNode("div")
     ]),
     _: 1 /* STABLE */
   }))
@@ -32,26 +32,26 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`scopeId compiler support > should wrap dynamic slots 1`] = `
-"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  const _component_Child = _resolveComponent(\\"Child\\")
+  const _component_Child = _resolveComponent("Child")
 
   return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
     (_ctx.ok)
       ? {
-          name: \\"foo\\",
+          name: "foo",
           fn: _withCtx(() => [
-            _createElementVNode(\\"div\\")
+            _createElementVNode("div")
           ]),
-          key: \\"0\\"
+          key: "0"
         }
       : undefined,
     _renderList(_ctx.list, (i) => {
       return {
         name: i,
         fn: _withCtx(() => [
-          _createElementVNode(\\"div\\")
+          _createElementVNode("div")
         ])
       }
     })
@@ -60,17 +60,17 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`scopeId compiler support > should wrap named slots 1`] = `
-"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  const _component_Child = _resolveComponent(\\"Child\\")
+  const _component_Child = _resolveComponent("Child")
 
   return (_openBlock(), _createBlock(_component_Child, null, {
     foo: _withCtx(({ msg }) => [
       _createTextVNode(_toDisplayString(msg), 1 /* TEXT */)
     ]),
     bar: _withCtx(() => [
-      _createElementVNode(\\"div\\")
+      _createElementVNode("div")
     ]),
     _: 1 /* STABLE */
   }))
diff --git a/packages/compiler-core/__tests__/codegen.spec.ts b/packages/compiler-core/__tests__/codegen.spec.ts
index 802df84b35b..cfb4162e073 100644
--- a/packages/compiler-core/__tests__/codegen.spec.ts
+++ b/packages/compiler-core/__tests__/codegen.spec.ts
@@ -631,7 +631,7 @@ describe('compiler: codegen', () => {
 
     test('tag only', () => {
       expect(genCode(createVNodeCall(null, `"div"`))).toMatchInlineSnapshot(`
-        "return _createElementVNode(\\"div\\")
+        "return _createElementVNode("div")
          "
       `)
       expect(genCode(createVNodeCall(null, FRAGMENT))).toMatchInlineSnapshot(`
@@ -643,7 +643,7 @@ describe('compiler: codegen', () => {
     test('with props', () => {
       expect(genCode(createVNodeCall(null, `"div"`, mockProps)))
         .toMatchInlineSnapshot(`
-          "return _createElementVNode(\\"div\\", { foo: \\"bar\\" })
+          "return _createElementVNode("div", { foo: "bar" })
            "
         `)
     })
@@ -651,7 +651,7 @@ describe('compiler: codegen', () => {
     test('with children, no props', () => {
       expect(genCode(createVNodeCall(null, `"div"`, undefined, mockChildren)))
         .toMatchInlineSnapshot(`
-          "return _createElementVNode(\\"div\\", null, children)
+          "return _createElementVNode("div", null, children)
            "
         `)
     })
@@ -659,7 +659,7 @@ describe('compiler: codegen', () => {
     test('with children + props', () => {
       expect(genCode(createVNodeCall(null, `"div"`, mockProps, mockChildren)))
         .toMatchInlineSnapshot(`
-          "return _createElementVNode(\\"div\\", { foo: \\"bar\\" }, children)
+          "return _createElementVNode("div", { foo: "bar" }, children)
            "
         `)
     })
@@ -667,7 +667,7 @@ describe('compiler: codegen', () => {
     test('with patchFlag and no children/props', () => {
       expect(genCode(createVNodeCall(null, `"div"`, undefined, undefined, '1')))
         .toMatchInlineSnapshot(`
-          "return _createElementVNode(\\"div\\", null, null, 1)
+          "return _createElementVNode("div", null, null, 1)
            "
         `)
     })
@@ -687,7 +687,7 @@ describe('compiler: codegen', () => {
           )
         )
       ).toMatchInlineSnapshot(`
-        "return (_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
+        "return (_openBlock(), _createElementBlock("div", { foo: "bar" }, children))
          "
       `)
     })
@@ -708,7 +708,7 @@ describe('compiler: codegen', () => {
           )
         )
       ).toMatchInlineSnapshot(`
-        "return (_openBlock(true), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
+        "return (_openBlock(true), _createElementBlock("div", { foo: "bar" }, children))
          "
       `)
     })
@@ -727,7 +727,7 @@ describe('compiler: codegen', () => {
           )
         )
       ).toMatchInlineSnapshot(`
-        "return _withDirectives(_createElementVNode(\\"div\\", { foo: \\"bar\\" }, children), [
+        "return _withDirectives(_createElementVNode("div", { foo: "bar" }, children), [
               [foo, bar]
             ])
          "
@@ -749,7 +749,7 @@ describe('compiler: codegen', () => {
           )
         )
       ).toMatchInlineSnapshot(`
-        "return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children)), [
+        "return _withDirectives((_openBlock(), _createElementBlock("div", { foo: "bar" }, children)), [
               [foo, bar]
             ])
          "
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
index e67694a9bf9..ef3e2b8f4d6 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`compiler: hoistStatic transform > hoist element with static key 1`] = `
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", { key: \\"foo\\" }, null, -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", { key: "foo" }, null, -1 /* HOISTED */)
 const _hoisted_2 = [
   _hoisted_1
 ]
@@ -13,7 +13,7 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
+    return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
   }
 }"
 `;
@@ -22,9 +22,9 @@ exports[`compiler: hoistStatic transform > hoist nested static tree 1`] = `
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"p\\", null, [
-  /*#__PURE__*/_createElementVNode(\\"span\\"),
-  /*#__PURE__*/_createElementVNode(\\"span\\")
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("p", null, [
+  /*#__PURE__*/_createElementVNode("span"),
+  /*#__PURE__*/_createElementVNode("span")
 ], -1 /* HOISTED */)
 const _hoisted_2 = [
   _hoisted_1
@@ -34,7 +34,7 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
+    return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
   }
 }"
 `;
@@ -43,8 +43,8 @@ exports[`compiler: hoistStatic transform > hoist nested static tree with comment
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [
-  /*#__PURE__*/_createCommentVNode(\\"comment\\")
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, [
+  /*#__PURE__*/_createCommentVNode("comment")
 ], -1 /* HOISTED */)
 const _hoisted_2 = [
   _hoisted_1
@@ -54,7 +54,7 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
+    return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
   }
 }"
 `;
@@ -63,8 +63,8 @@ exports[`compiler: hoistStatic transform > hoist siblings with common non-hoista
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
-const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, null, -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)
+const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, null, -1 /* HOISTED */)
 const _hoisted_3 = [
   _hoisted_1,
   _hoisted_2
@@ -74,7 +74,7 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_3))
+    return (_openBlock(), _createElementBlock("div", null, _hoisted_3))
   }
 }"
 `;
@@ -83,7 +83,7 @@ exports[`compiler: hoistStatic transform > hoist simple element 1`] = `
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"inline\\" }, \\"hello\\", -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", { class: "inline" }, "hello", -1 /* HOISTED */)
 const _hoisted_2 = [
   _hoisted_1
 ]
@@ -92,7 +92,7 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
+    return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
   }
 }"
 `;
@@ -101,16 +101,16 @@ exports[`compiler: hoistStatic transform > hoist static props for elements with
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = { id: \\"foo\\" }
+const _hoisted_1 = { id: "foo" }
 
 return function render(_ctx, _cache) {
   with (_ctx) {
     const { resolveDirective: _resolveDirective, createElementVNode: _createElementVNode, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    const _directive_foo = _resolveDirective(\\"foo\\")
+    const _directive_foo = _resolveDirective("foo")
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _withDirectives(_createElementVNode(\\"div\\", _hoisted_1, null, 512 /* NEED_PATCH */), [
+    return (_openBlock(), _createElementBlock("div", null, [
+      _withDirectives(_createElementVNode("div", _hoisted_1, null, 512 /* NEED_PATCH */), [
         [_directive_foo]
       ])
     ]))
@@ -122,14 +122,14 @@ exports[`compiler: hoistStatic transform > hoist static props for elements with
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = { id: \\"foo\\" }
+const _hoisted_1 = { id: "foo" }
 
 return function render(_ctx, _cache) {
   with (_ctx) {
     const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _createElementVNode(\\"div\\", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */)
+    return (_openBlock(), _createElementBlock("div", null, [
+      _createElementVNode("div", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */)
     ]))
   }
 }"
@@ -139,16 +139,16 @@ exports[`compiler: hoistStatic transform > hoist static props for elements with
 "const _Vue = Vue
 const { createVNode: _createVNode, createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = { id: \\"foo\\" }
+const _hoisted_1 = { id: "foo" }
 
 return function render(_ctx, _cache) {
   with (_ctx) {
     const { resolveComponent: _resolveComponent, createVNode: _createVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    const _component_Comp = _resolveComponent(\\"Comp\\")
+    const _component_Comp = _resolveComponent("Comp")
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _createElementVNode(\\"div\\", _hoisted_1, [
+    return (_openBlock(), _createElementBlock("div", null, [
+      _createElementVNode("div", _hoisted_1, [
         _createVNode(_component_Comp)
       ])
     ]))
@@ -168,8 +168,8 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _createElementVNode(\\"span\\", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */)
+    return (_openBlock(), _createElementBlock("div", null, [
+      _createElementVNode("span", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */)
     ]))
   }
 }"
@@ -179,7 +179,7 @@ exports[`compiler: hoistStatic transform > prefixIdentifiers > hoist nested stat
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, \\"foo \\" + /*#__PURE__*/_toDisplayString(1) + \\" \\" + /*#__PURE__*/_toDisplayString(true), -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", null, "foo " + /*#__PURE__*/_toDisplayString(1) + " " + /*#__PURE__*/_toDisplayString(true), -1 /* HOISTED */)
 const _hoisted_2 = [
   _hoisted_1
 ]
@@ -188,7 +188,7 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
+    return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
   }
 }"
 `;
@@ -197,7 +197,7 @@ exports[`compiler: hoistStatic transform > prefixIdentifiers > hoist nested stat
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */)
 const _hoisted_2 = [
   _hoisted_1
 ]
@@ -206,7 +206,7 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
+    return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
   }
 }"
 `;
@@ -215,7 +215,7 @@ exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"path\\", { d: \\"M2,3H5.5L12\\" }, null, -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("path", { d: "M2,3H5.5L12" }, null, -1 /* HOISTED */)
 const _hoisted_2 = [
   _hoisted_1
 ]
@@ -224,10 +224,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { createElementVNode: _createElementVNode, resolveDirective: _resolveDirective, openBlock: _openBlock, createElementBlock: _createElementBlock, withDirectives: _withDirectives } = _Vue
 
-    const _directive_foo = _resolveDirective(\\"foo\\")
+    const _directive_foo = _resolveDirective("foo")
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _withDirectives((_openBlock(), _createElementBlock(\\"svg\\", null, _hoisted_2)), [
+    return (_openBlock(), _createElementBlock("div", null, [
+      _withDirectives((_openBlock(), _createElementBlock("svg", null, _hoisted_2)), [
         [_directive_foo]
       ])
     ]))
@@ -236,12 +236,12 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist elements with cached handlers + other bindings 1`] = `
-"import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
-    _createElementVNode(\\"div\\", null, [
-      _createElementVNode(\\"div\\", {
+  return (_openBlock(), _createElementBlock("div", null, [
+    _createElementVNode("div", null, [
+      _createElementVNode("div", {
         class: _normalizeClass({}),
         onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.foo && _ctx.foo(...args)))
       })
@@ -251,12 +251,12 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist elements with cached handlers 1`] = `
-"import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
-    _createElementVNode(\\"div\\", null, [
-      _createElementVNode(\\"div\\", {
+  return (_openBlock(), _createElementBlock("div", null, [
+    _createElementVNode("div", null, [
+      _createElementVNode("div", {
         onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.foo && _ctx.foo(...args)))
       })
     ])
@@ -271,10 +271,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock("div", null, [
       (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
-        return (_openBlock(), _createElementBlock(\\"p\\", null, [
-          _createElementVNode(\\"span\\", null, _toDisplayString(o + 'foo'), 1 /* TEXT */)
+        return (_openBlock(), _createElementBlock("p", null, [
+          _createElementVNode("span", null, _toDisplayString(o + 'foo'), 1 /* TEXT */)
         ]))
       }), 256 /* UNKEYED_FRAGMENT */))
     ]))
@@ -289,7 +289,7 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
-    const _component_Comp = _resolveComponent(\\"Comp\\")
+    const _component_Comp = _resolveComponent("Comp")
 
     return (_openBlock(), _createBlock(_component_Comp, null, {
       default: _withCtx(({ foo }) => [
@@ -308,10 +308,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock("div", null, [
       (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
-        return (_openBlock(), _createElementBlock(\\"p\\", null, [
-          _createElementVNode(\\"span\\", null, _toDisplayString(o), 1 /* TEXT */)
+        return (_openBlock(), _createElementBlock("p", null, [
+          _createElementVNode("span", null, _toDisplayString(o), 1 /* TEXT */)
         ]))
       }), 256 /* UNKEYED_FRAGMENT */))
     ]))
@@ -326,9 +326,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock("div", null, [
       (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
-        return (_openBlock(), _createElementBlock(\\"span\\", { key: item }))
+        return (_openBlock(), _createElementBlock("span", { key: item }))
       }), 128 /* KEYED_FRAGMENT */))
     ]))
   }
@@ -342,9 +342,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    const _component_Comp = _resolveComponent(\\"Comp\\")
+    const _component_Comp = _resolveComponent("Comp")
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock("div", null, [
       _createVNode(_component_Comp)
     ]))
   }
@@ -358,8 +358,8 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      (_openBlock(), _createElementBlock(\\"div\\", { key: foo }))
+    return (_openBlock(), _createElementBlock("div", null, [
+      (_openBlock(), _createElementBlock("div", { key: foo }))
     ]))
   }
 }"
@@ -369,14 +369,14 @@ exports[`compiler: hoistStatic transform > should NOT hoist element with dynamic
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = [\\"id\\"]
+const _hoisted_1 = ["id"]
 
 return function render(_ctx, _cache) {
   with (_ctx) {
     const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, _hoisted_1)
+    return (_openBlock(), _createElementBlock("div", null, [
+      _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, _hoisted_1)
     ]))
   }
 }"
@@ -389,8 +389,8 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
-      _createElementVNode(\\"div\\", { ref: foo }, null, 512 /* NEED_PATCH */)
+    return (_openBlock(), _createElementBlock("div", null, [
+      _createElementVNode("div", { ref: foo }, null, 512 /* NEED_PATCH */)
     ]))
   }
 }"
@@ -403,7 +403,7 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\"))
+    return (_openBlock(), _createElementBlock("div"))
   }
 }"
 `;
@@ -412,8 +412,8 @@ exports[`compiler: hoistStatic transform > should hoist v-for children if static
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = { id: \\"foo\\" }
-const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
+const _hoisted_1 = { id: "foo" }
+const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)
 const _hoisted_3 = [
   _hoisted_2
 ]
@@ -422,9 +422,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock("div", null, [
       (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
-        return (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, _hoisted_3))
+        return (_openBlock(), _createElementBlock("div", _hoisted_1, _hoisted_3))
       }), 256 /* UNKEYED_FRAGMENT */))
     ]))
   }
@@ -437,9 +437,9 @@ const { createElementVNode: _createElementVNode, createCommentVNode: _createComm
 
 const _hoisted_1 = {
   key: 0,
-  id: \\"foo\\"
+  id: "foo"
 }
-const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
+const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)
 const _hoisted_3 = [
   _hoisted_2
 ]
@@ -448,10 +448,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock("div", null, [
       ok
-        ? (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, _hoisted_3))
-        : _createCommentVNode(\\"v-if\\", true)
+        ? (_openBlock(), _createElementBlock("div", _hoisted_1, _hoisted_3))
+        : _createCommentVNode("v-if", true)
     ]))
   }
 }"
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
index 434ebcbcf2f..0bc427b979f 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`compiler: expression transform > bindingMetadata > inline mode 1`] = `
 "(_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.props) + \\" \\" + _toDisplayString(_unref(setup)) + \\" \\" + _toDisplayString(setupConst) + \\" \\" + _toDisplayString(_ctx.data) + \\" \\" + _toDisplayString(_ctx.options) + \\" \\" + _toDisplayString(isNaN.value), 1 /* TEXT */))
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString(__props.props) + " " + _toDisplayString(_unref(setup)) + " " + _toDisplayString(setupConst) + " " + _toDisplayString(_ctx.data) + " " + _toDisplayString(_ctx.options) + " " + _toDisplayString(isNaN.value), 1 /* TEXT */))
 }"
 `;
 
@@ -10,7 +10,7 @@ exports[`compiler: expression transform > bindingMetadata > non-inline mode 1`]
 "const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
 return function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString($props.props) + \\" \\" + _toDisplayString($setup.setup) + \\" \\" + _toDisplayString($data.data) + \\" \\" + _toDisplayString($options.options) + \\" \\" + _toDisplayString($setup.isNaN), 1 /* TEXT */))
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString($props.props) + " " + _toDisplayString($setup.setup) + " " + _toDisplayString($data.data) + " " + _toDisplayString($options.options) + " " + _toDisplayString($setup.isNaN), 1 /* TEXT */))
 }"
 `;
 
@@ -18,13 +18,13 @@ exports[`compiler: expression transform > bindingMetadata > should not prefix te
 "const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
 return function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (_openBlock(), _createElementBlock(\\"div\\", {
+  return (_openBlock(), _createElementBlock("div", {
     onClick: () => {
           for (let i = 0; i < _ctx.list.length; i++) {
             _ctx.log(i)
           }         
         }
-  }, null, 8 /* PROPS */, [\\"onClick\\"]))
+  }, null, 8 /* PROPS */, ["onClick"]))
 }"
 `;
 
@@ -32,13 +32,13 @@ exports[`compiler: expression transform > bindingMetadata > should not prefix te
 "const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
 return function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (_openBlock(), _createElementBlock(\\"div\\", {
+  return (_openBlock(), _createElementBlock("div", {
     onClick: () => {
           for (const x in _ctx.list) {
             _ctx.log(x)
           }         
         }
-  }, null, 8 /* PROPS */, [\\"onClick\\"]))
+  }, null, 8 /* PROPS */, ["onClick"]))
 }"
 `;
 
@@ -46,12 +46,12 @@ exports[`compiler: expression transform > bindingMetadata > should not prefix te
 "const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
 return function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (_openBlock(), _createElementBlock(\\"div\\", {
+  return (_openBlock(), _createElementBlock("div", {
     onClick: () => {
           for (const x of _ctx.list) {
             _ctx.log(x)
           }         
         }
-  }, null, 8 /* PROPS */, [\\"onClick\\"]))
+  }, null, 8 /* PROPS */, ["onClick"]))
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
index 8e716acb83e..7fb49ea7887 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
@@ -9,7 +9,7 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
       return (_openBlock(), _createElementBlock(_Fragment, null, [
-        _createTextVNode(\\"foo\\")
+        _createTextVNode("foo")
       ], 64 /* STABLE_FRAGMENT */))
     }), 256 /* UNKEYED_FRAGMENT */))
   }
@@ -23,7 +23,7 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { toDisplayString: _toDisplayString } = _Vue
 
-    return _toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz)
+    return _toDisplayString(foo) + " bar " + _toDisplayString(baz)
   }
 }"
 `;
@@ -36,9 +36,9 @@ return function render(_ctx, _cache) {
     const { createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(), _createElementBlock(_Fragment, null, [
-      _createElementVNode(\\"div\\"),
-      _createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */),
-      _createElementVNode(\\"div\\")
+      _createElementVNode("div"),
+      _createTextVNode(_toDisplayString(foo) + " bar " + _toDisplayString(baz), 1 /* TEXT */),
+      _createElementVNode("div")
     ], 64 /* STABLE_FRAGMENT */))
   }
 }"
@@ -52,11 +52,11 @@ return function render(_ctx, _cache) {
     const { createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(), _createElementBlock(_Fragment, null, [
-      _createElementVNode(\\"div\\"),
-      _createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */),
-      _createElementVNode(\\"div\\"),
-      _createTextVNode(\\"hello\\"),
-      _createElementVNode(\\"div\\")
+      _createElementVNode("div"),
+      _createTextVNode(_toDisplayString(foo) + " bar " + _toDisplayString(baz), 1 /* TEXT */),
+      _createElementVNode("div"),
+      _createTextVNode("hello"),
+      _createElementVNode("div")
     ], 64 /* STABLE_FRAGMENT */))
   }
 }"
@@ -69,9 +69,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveDirective: _resolveDirective, openBlock: _openBlock, createElementBlock: _createElementBlock, withDirectives: _withDirectives } = _Vue
 
-    const _directive_foo = _resolveDirective(\\"foo\\")
+    const _directive_foo = _resolveDirective("foo")
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"p\\", null, [
+    return _withDirectives((_openBlock(), _createElementBlock("p", null, [
       _createTextVNode(_toDisplayString(foo), 1 /* TEXT */)
     ])), [
       [_directive_foo]
@@ -100,9 +100,9 @@ return function render(_ctx, _cache) {
     const { createElementVNode: _createElementVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(), _createElementBlock(_Fragment, null, [
-      _createElementVNode(\\"div\\"),
-      _createTextVNode(\\"hello\\"),
-      _createElementVNode(\\"div\\")
+      _createElementVNode("div"),
+      _createTextVNode("hello"),
+      _createElementVNode("div")
     ], 64 /* STABLE_FRAGMENT */))
   }
 }"
@@ -112,6 +112,6 @@ exports[`compiler: transform text > with prefixIdentifiers: true 1`] = `
 "const { toDisplayString: _toDisplayString } = Vue
 
 return function render(_ctx, _cache) {
-  return _toDisplayString(_ctx.foo) + \\" bar \\" + _toDisplayString(_ctx.baz + _ctx.qux)
+  return _toDisplayString(_ctx.foo) + " bar " + _toDisplayString(_ctx.baz + _ctx.qux)
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
index 2c38177f11a..3da778eb675 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
@@ -8,7 +8,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
-      return (_openBlock(), _createElementBlock(\\"span\\"))
+      return (_openBlock(), _createElementBlock("span"))
     }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
@@ -23,8 +23,8 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
       return (_openBlock(), _createElementBlock(_Fragment, { key: item }, [
-        \\"hello\\",
-        _createElementVNode(\\"span\\")
+        "hello",
+        _createElementVNode("span")
       ], 64 /* STABLE_FRAGMENT */))
     }), 128 /* KEYED_FRAGMENT */))
   }
@@ -39,7 +39,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
-      return (_openBlock(), _createElementBlock(\\"span\\", { key: item }))
+      return (_openBlock(), _createElementBlock("span", { key: item }))
     }), 128 /* KEYED_FRAGMENT */))
   }
 }"
@@ -53,7 +53,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, __, index) => {
-      return (_openBlock(), _createElementBlock(\\"span\\"))
+      return (_openBlock(), _createElementBlock("span"))
     }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
@@ -67,7 +67,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, __, index) => {
-      return (_openBlock(), _createElementBlock(\\"span\\"))
+      return (_openBlock(), _createElementBlock("span"))
     }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
@@ -81,7 +81,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, key, index) => {
-      return (_openBlock(), _createElementBlock(\\"span\\"))
+      return (_openBlock(), _createElementBlock("span"))
     }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
@@ -96,8 +96,8 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
       return (_openBlock(), _createElementBlock(_Fragment, null, [
-        \\"hello\\",
-        _createElementVNode(\\"span\\")
+        "hello",
+        _createElementVNode("span")
       ], 64 /* STABLE_FRAGMENT */))
     }), 256 /* UNKEYED_FRAGMENT */))
   }
@@ -112,10 +112,10 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
-      return (_openBlock(), _createElementBlock(\\"span\\", {
+      return (_openBlock(), _createElementBlock("span", {
         key: item.id,
         id: item.id
-      }, null, 8 /* PROPS */, [\\"id\\"]))
+      }, null, 8 /* PROPS */, ["id"]))
     }), 128 /* KEYED_FRAGMENT */))
   }
 }"
@@ -129,7 +129,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
-      return _renderSlot($slots, \\"default\\")
+      return _renderSlot($slots, "default")
     }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
@@ -143,7 +143,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
-      return _renderSlot($slots, \\"default\\")
+      return _renderSlot($slots, "default")
     }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
@@ -156,10 +156,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, resolveDirective: _resolveDirective, withDirectives: _withDirectives } = _Vue
 
-    const _directive_foo = _resolveDirective(\\"foo\\")
+    const _directive_foo = _resolveDirective("foo")
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
-      return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
+      return _withDirectives((_openBlock(), _createElementBlock("div", null, null, 512 /* NEED_PATCH */)), [
         [_directive_foo]
       ])
     }), 256 /* UNKEYED_FRAGMENT */))
@@ -175,7 +175,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
 
     return (_openBlock(), _createElementBlock(_Fragment, null, _renderList(10, (item) => {
-      return _createElementVNode(\\"p\\", null, _toDisplayString(item), 1 /* TEXT */)
+      return _createElementVNode("p", null, _toDisplayString(item), 1 /* TEXT */)
     }), 64 /* STABLE_FRAGMENT */))
   }
 }"
@@ -190,9 +190,9 @@ return function render(_ctx, _cache) {
 
     return ok
       ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
-          return (_openBlock(), _createElementBlock(\\"div\\"))
+          return (_openBlock(), _createElementBlock("div"))
         }), 256 /* UNKEYED_FRAGMENT */))
-      : _createCommentVNode(\\"v-if\\", true)
+      : _createCommentVNode("v-if", true)
   }
 }"
 `;
@@ -208,7 +208,7 @@ return function render(_ctx, _cache) {
       ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
           return (_openBlock(), _createElementBlock(_Fragment, null, [], 64 /* STABLE_FRAGMENT */))
         }), 256 /* UNKEYED_FRAGMENT */))
-      : _createCommentVNode(\\"v-if\\", true)
+      : _createCommentVNode("v-if", true)
   }
 }"
 `;
@@ -221,7 +221,7 @@ return function render(_ctx, _cache) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, key, index) => {
-      return (_openBlock(), _createElementBlock(\\"span\\"))
+      return (_openBlock(), _createElementBlock("span"))
     }), 256 /* UNKEYED_FRAGMENT */))
   }
 }"
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
index 4da71c3ea5b..65ee73c46f4 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
@@ -8,8 +8,8 @@ return function render(_ctx, _cache) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
-      : _createCommentVNode(\\"v-if\\", true)
+      ? (_openBlock(), _createElementBlock("div", { key: 0 }))
+      : _createCommentVNode("v-if", true)
   }
 }"
 `;
@@ -23,13 +23,13 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(_Fragment, null, [
       ok
-        ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
-        : (_openBlock(), _createElementBlock(\\"p\\", { key: 1 })),
+        ? (_openBlock(), _createElementBlock("div", { key: 0 }))
+        : (_openBlock(), _createElementBlock("p", { key: 1 })),
       another
-        ? (_openBlock(), _createElementBlock(\\"div\\", { key: 2 }))
+        ? (_openBlock(), _createElementBlock("div", { key: 2 }))
         : orNot
-          ? (_openBlock(), _createElementBlock(\\"p\\", { key: 3 }))
-          : (_openBlock(), _createElementBlock(\\"p\\", { key: 4 }))
+          ? (_openBlock(), _createElementBlock("p", { key: 3 }))
+          : (_openBlock(), _createElementBlock("p", { key: 4 }))
     ], 64 /* STABLE_FRAGMENT */))
   }
 }"
@@ -44,11 +44,11 @@ return function render(_ctx, _cache) {
 
     return (_openBlock(), _createElementBlock(_Fragment, null, [
       ok
-        ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
-        : _createCommentVNode(\\"v-if\\", true),
+        ? (_openBlock(), _createElementBlock("div", { key: 0 }))
+        : _createCommentVNode("v-if", true),
       orNot
-        ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
-        : _createCommentVNode(\\"v-if\\", true)
+        ? (_openBlock(), _createElementBlock("p", { key: 1 }))
+        : _createCommentVNode("v-if", true)
     ], 64 /* STABLE_FRAGMENT */))
   }
 }"
@@ -63,11 +63,11 @@ return function render(_ctx, _cache) {
 
     return ok
       ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
-          _createElementVNode(\\"div\\"),
-          \\"hello\\",
-          _createElementVNode(\\"p\\")
+          _createElementVNode("div"),
+          "hello",
+          _createElementVNode("p")
         ], 64 /* STABLE_FRAGMENT */))
-      : _createCommentVNode(\\"v-if\\", true)
+      : _createCommentVNode("v-if", true)
   }
 }"
 `;
@@ -80,8 +80,8 @@ return function render(_ctx, _cache) {
     const { renderSlot: _renderSlot, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? _renderSlot($slots, \\"default\\", { key: 0 })
-      : _createCommentVNode(\\"v-if\\", true)
+      ? _renderSlot($slots, "default", { key: 0 })
+      : _createCommentVNode("v-if", true)
   }
 }"
 `;
@@ -94,8 +94,8 @@ return function render(_ctx, _cache) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
-      : (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
+      ? (_openBlock(), _createElementBlock("div", { key: 0 }))
+      : (_openBlock(), _createElementBlock("p", { key: 1 }))
   }
 }"
 `;
@@ -108,10 +108,10 @@ return function render(_ctx, _cache) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
 
     return ok
-      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
+      ? (_openBlock(), _createElementBlock("div", { key: 0 }))
       : orNot
-        ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
-        : (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, [\\"fine\\"], 64 /* STABLE_FRAGMENT */))
+        ? (_openBlock(), _createElementBlock("p", { key: 1 }))
+        : (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, ["fine"], 64 /* STABLE_FRAGMENT */))
   }
 }"
 `;
@@ -124,10 +124,10 @@ return function render(_ctx, _cache) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
+      ? (_openBlock(), _createElementBlock("div", { key: 0 }))
       : orNot
-        ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
-        : _createCommentVNode(\\"v-if\\", true)
+        ? (_openBlock(), _createElementBlock("p", { key: 1 }))
+        : _createCommentVNode("v-if", true)
   }
 }"
 `;
@@ -140,8 +140,8 @@ return function render(_ctx, _cache) {
     const { renderSlot: _renderSlot, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
-      ? _renderSlot($slots, \\"default\\", { key: 0 })
-      : _createCommentVNode(\\"v-if\\", true)
+      ? _renderSlot($slots, "default", { key: 0 })
+      : _createCommentVNode("v-if", true)
   }
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
index 844cd27870b..220bc177418 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
@@ -1,44 +1,44 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler: v-memo transform > on component 1`] = `
-"import { resolveComponent as _resolveComponent, createVNode as _createVNode, withMemo as _withMemo, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { resolveComponent as _resolveComponent, createVNode as _createVNode, withMemo as _withMemo, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+  return (_openBlock(), _createElementBlock("div", null, [
     _withMemo([_ctx.x], () => _createVNode(_component_Comp), _cache, 0)
   ]))
 }"
 `;
 
 exports[`compiler: v-memo transform > on normal element 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
-    _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock(\\"div\\")), _cache, 0)
+  return (_openBlock(), _createElementBlock("div", null, [
+    _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock("div")), _cache, 0)
   ]))
 }"
 `;
 
 exports[`compiler: v-memo transform > on root element 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from "vue"
 
 export function render(_ctx, _cache) {
-  return _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock(\\"div\\")), _cache, 0)
+  return _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock("div")), _cache, 0)
 }"
 `;
 
 exports[`compiler: v-memo transform > on template v-for 1`] = `
-"import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, isMemoSame as _isMemoSame, withMemo as _withMemo } from \\"vue\\"
+"import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, isMemoSame as _isMemoSame, withMemo as _withMemo } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+  return (_openBlock(), _createElementBlock("div", null, [
     (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => {
       const _memo = ([x, y === _ctx.z])
       if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached
-      const _item = (_openBlock(), _createElementBlock(\\"span\\", { key: x }, \\"foobar\\"))
+      const _item = (_openBlock(), _createElementBlock("span", { key: x }, "foobar"))
       _item.memo = _memo
       return _item
     }, _cache, 0), 128 /* KEYED_FRAGMENT */))
@@ -47,15 +47,15 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`compiler: v-memo transform > on v-for 1`] = `
-"import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, isMemoSame as _isMemoSame, withMemo as _withMemo } from \\"vue\\"
+"import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, isMemoSame as _isMemoSame, withMemo as _withMemo } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+  return (_openBlock(), _createElementBlock("div", null, [
     (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => {
       const _memo = ([x, y === _ctx.z])
       if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached
-      const _item = (_openBlock(), _createElementBlock(\\"div\\", { key: x }, [
-        _createElementVNode(\\"span\\", null, \\"foobar\\")
+      const _item = (_openBlock(), _createElementBlock("div", { key: x }, [
+        _createElementVNode("span", null, "foobar")
       ]))
       _item.memo = _memo
       return _item
@@ -65,16 +65,16 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`compiler: v-memo transform > on v-if 1`] = `
-"import { createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
-  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+  return (_openBlock(), _createElementBlock("div", null, [
     (_ctx.ok)
-      ? _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, [
-          _createElementVNode(\\"span\\", null, \\"foo\\"),
-          _createTextVNode(\\"bar\\")
+      ? _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock("div", { key: 0 }, [
+          _createElementVNode("span", null, "foo"),
+          _createTextVNode("bar")
         ])), _cache, 0)
       : _withMemo([_ctx.x], () => (_openBlock(), _createBlock(_component_Comp, { key: 1 })), _cache, 1)
   ]))
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
index 983fe1223aa..17c4e80b160 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler: transform v-model > compound expression (with prefixIdentifiers) 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"input\\", {
+  return (_openBlock(), _createElementBlock("input", {
     modelValue: _ctx.model[_ctx.index],
-    \\"onUpdate:modelValue\\": $event => ((_ctx.model[_ctx.index]) = $event)
-  }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+    "onUpdate:modelValue": $event => ((_ctx.model[_ctx.index]) = $event)
+  }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
 }"
 `;
 
@@ -18,10 +18,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"input\\", {
+    return (_openBlock(), _createElementBlock("input", {
       modelValue: model[index],
-      \\"onUpdate:modelValue\\": $event => ((model[index]) = $event)
-    }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+      "onUpdate:modelValue": $event => ((model[index]) = $event)
+    }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
   }
 }"
 `;
@@ -33,30 +33,30 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"input\\", {
+    return (_openBlock(), _createElementBlock("input", {
       modelValue: 
  model
 .
 foo 
 ,
-      \\"onUpdate:modelValue\\": $event => ((
+      "onUpdate:modelValue": $event => ((
  model
 .
 foo 
 ) = $event)
-    }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+    }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
   }
 }"
 `;
 
 exports[`compiler: transform v-model > simple expression (with prefixIdentifiers) 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"input\\", {
+  return (_openBlock(), _createElementBlock("input", {
     modelValue: _ctx.model,
-    \\"onUpdate:modelValue\\": $event => ((_ctx.model) = $event)
-  }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+    "onUpdate:modelValue": $event => ((_ctx.model) = $event)
+  }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
 }"
 `;
 
@@ -67,10 +67,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"input\\", {
+    return (_openBlock(), _createElementBlock("input", {
       modelValue: model,
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
   }
 }"
 `;
@@ -82,21 +82,21 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"input\\", {
-      \\"foo-value\\": model,
-      \\"onUpdate:fooValue\\": $event => ((model) = $event)
-    }, null, 40 /* PROPS, NEED_HYDRATION */, [\\"foo-value\\", \\"onUpdate:fooValue\\"]))
+    return (_openBlock(), _createElementBlock("input", {
+      "foo-value": model,
+      "onUpdate:fooValue": $event => ((model) = $event)
+    }, null, 40 /* PROPS, NEED_HYDRATION */, ["foo-value", "onUpdate:fooValue"]))
   }
 }"
 `;
 
 exports[`compiler: transform v-model > with dynamic argument (with prefixIdentifiers) 1`] = `
-"import { normalizeProps as _normalizeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { normalizeProps as _normalizeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
+  return (_openBlock(), _createElementBlock("input", _normalizeProps({
     [_ctx.value]: _ctx.model,
-    [\\"onUpdate:\\" + _ctx.value]: $event => ((_ctx.model) = $event)
+    ["onUpdate:" + _ctx.value]: $event => ((_ctx.model) = $event)
   }), null, 16 /* FULL_PROPS */))
 }"
 `;
@@ -108,9 +108,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { normalizeProps: _normalizeProps, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
+    return (_openBlock(), _createElementBlock("input", _normalizeProps({
       [value]: model,
-      [\\"onUpdate:\\" + value]: $event => ((model) = $event)
+      ["onUpdate:" + value]: $event => ((model) = $event)
     }), null, 16 /* FULL_PROPS */))
   }
 }"
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
index 1246c47fc64..1c1203552db 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
@@ -9,7 +9,7 @@ return function render(_ctx, _cache) {
 
     return _cache[0] || (
       _setBlockTracking(-1),
-      _cache[0] = _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
+      _cache[0] = _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, ["id"]),
       _setBlockTracking(1),
       _cache[0]
     )
@@ -24,12 +24,12 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    const _component_Comp = _resolveComponent(\\"Comp\\")
+    const _component_Comp = _resolveComponent("Comp")
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock("div", null, [
       _cache[0] || (
         _setBlockTracking(-1),
-        _cache[0] = _createVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
+        _cache[0] = _createVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, ["id"]),
         _setBlockTracking(1),
         _cache[0]
       )
@@ -45,10 +45,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock("div", null, [
       _cache[0] || (
         _setBlockTracking(-1),
-        _cache[0] = _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
+        _cache[0] = _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, ["id"]),
         _setBlockTracking(1),
         _cache[0]
       )
@@ -64,10 +64,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { setBlockTracking: _setBlockTracking, renderSlot: _renderSlot, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock("div", null, [
       _cache[0] || (
         _setBlockTracking(-1),
-        _cache[0] = _renderSlot($slots, \\"default\\"),
+        _cache[0] = _renderSlot($slots, "default"),
         _setBlockTracking(1),
         _cache[0]
       )
@@ -83,10 +83,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    return (_openBlock(), _createElementBlock("div", null, [
       _cache[0] || (
         _setBlockTracking(-1),
-        _cache[0] = _createElementVNode(\\"div\\"),
+        _cache[0] = _createElementVNode("div"),
         _setBlockTracking(1),
         _cache[0]
       )
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
index 0c8e061f9ef..0d9c0e743de 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`compiler: transform component slots > dynamically named slots 1`] = `
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     [_ctx.one]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@@ -18,11 +18,11 @@ exports[`compiler: transform component slots > implicit default slot 1`] = `
 "const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     default: _withCtx(() => [
-      _createElementVNode(\\"div\\")
+      _createElementVNode("div")
     ]),
     _: 1 /* STABLE */
   }))
@@ -33,7 +33,7 @@ exports[`compiler: transform component slots > named slot with v-for w/ prefixId
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
     _renderList(_ctx.list, (name) => {
@@ -50,14 +50,14 @@ exports[`compiler: transform component slots > named slot with v-if + prefixIden
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
     (_ctx.ok)
       ? {
-          name: \\"one\\",
+          name: "one",
           fn: _withCtx((props) => [_toDisplayString(props)]),
-          key: \\"0\\"
+          key: "0"
         }
       : undefined
   ]), 1024 /* DYNAMIC_SLOTS */))
@@ -71,25 +71,25 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
-    const _component_Comp = _resolveComponent(\\"Comp\\")
+    const _component_Comp = _resolveComponent("Comp")
 
     return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
       ok
         ? {
-            name: \\"one\\",
-            fn: _withCtx(() => [\\"foo\\"]),
-            key: \\"0\\"
+            name: "one",
+            fn: _withCtx(() => ["foo"]),
+            key: "0"
           }
         : orNot
           ? {
-              name: \\"two\\",
-              fn: _withCtx((props) => [\\"bar\\"]),
-              key: \\"1\\"
+              name: "two",
+              fn: _withCtx((props) => ["bar"]),
+              key: "1"
             }
           : {
-              name: \\"one\\",
-              fn: _withCtx(() => [\\"baz\\"]),
-              key: \\"2\\"
+              name: "one",
+              fn: _withCtx(() => ["baz"]),
+              key: "2"
             }
     ]), 1024 /* DYNAMIC_SLOTS */))
   }
@@ -103,14 +103,14 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
-    const _component_Comp = _resolveComponent(\\"Comp\\")
+    const _component_Comp = _resolveComponent("Comp")
 
     return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
       ok
         ? {
-            name: \\"one\\",
-            fn: _withCtx(() => [\\"hello\\"]),
-            key: \\"0\\"
+            name: "one",
+            fn: _withCtx(() => ["hello"]),
+            key: "0"
           }
         : undefined
     ]), 1024 /* DYNAMIC_SLOTS */))
@@ -125,13 +125,13 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
-    const _component_Comp = _resolveComponent(\\"Comp\\")
+    const _component_Comp = _resolveComponent("Comp")
 
     return (_openBlock(), _createBlock(_component_Comp, null, {
-      one: _withCtx(() => [\\"foo\\"]),
+      one: _withCtx(() => ["foo"]),
       default: _withCtx(() => [
-        \\"bar\\",
-        _createElementVNode(\\"span\\")
+        "bar",
+        _createElementVNode("span")
       ]),
       _: 1 /* STABLE */
     }))
@@ -143,8 +143,8 @@ exports[`compiler: transform component slots > nested slots scoping 1`] = `
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Inner = _resolveComponent(\\"Inner\\")
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Inner = _resolveComponent("Inner")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     default: _withCtx(({ foo }) => [
@@ -152,7 +152,7 @@ return function render(_ctx, _cache) {
         default: _withCtx(({ bar }) => [_toDisplayString(foo), _toDisplayString(bar), _toDisplayString(_ctx.baz)]),
         _: 2 /* DYNAMIC */
       }, 1024 /* DYNAMIC_SLOTS */),
-      \\" \\",
+      " ",
       _toDisplayString(foo),
       _toDisplayString(_ctx.bar),
       _toDisplayString(_ctx.baz)
@@ -166,7 +166,7 @@ exports[`compiler: transform component slots > on component dynamically named sl
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     [_ctx.named]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@@ -179,7 +179,7 @@ exports[`compiler: transform component slots > on component named slot 1`] = `
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     named: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@@ -192,7 +192,7 @@ exports[`compiler: transform component slots > on-component default slot 1`] = `
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     default: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@@ -205,7 +205,7 @@ exports[`compiler: transform component slots > template named slots 1`] = `
 "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
     one: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@@ -219,13 +219,13 @@ exports[`compiler: transform component slots > with whitespace: 'preserve' > imp
 "const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
-    header: _withCtx(() => [\\" Header \\"]),
+    header: _withCtx(() => [" Header "]),
     default: _withCtx(() => [
-      \\" \\",
-      _createElementVNode(\\"p\\")
+      " ",
+      _createElementVNode("p")
     ]),
     _: 1 /* STABLE */
   }))
@@ -236,11 +236,11 @@ exports[`compiler: transform component slots > with whitespace: 'preserve' > nam
 "const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
-    header: _withCtx(() => [\\" Header \\"]),
-    default: _withCtx(() => [\\" Default \\"]),
+    header: _withCtx(() => [" Header "]),
+    default: _withCtx(() => [" Default "]),
     _: 1 /* STABLE */
   }))
 }"
@@ -250,11 +250,11 @@ exports[`compiler: transform component slots > with whitespace: 'preserve' > sho
 "const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
 return function render(_ctx, _cache) {
-  const _component_Comp = _resolveComponent(\\"Comp\\")
+  const _component_Comp = _resolveComponent("Comp")
 
   return (_openBlock(), _createBlock(_component_Comp, null, {
-    header: _withCtx(() => [\\" Header \\"]),
-    footer: _withCtx(() => [\\" Footer \\"]),
+    header: _withCtx(() => [" Header "]),
+    footer: _withCtx(() => [" Footer "]),
     _: 1 /* STABLE */
   }))
 }"
diff --git a/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap b/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
index 17f974ee1aa..6d49307a19e 100644
--- a/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
@@ -8,13 +8,13 @@ return function render(_ctx, _cache) {
     const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, normalizeStyle: _normalizeStyle, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(), _createElementBlock(_Fragment, null, [
-      _createElementVNode(\\"div\\", {
+      _createElementVNode("div", {
         textContent: _toDisplayString(text)
-      }, null, 8 /* PROPS */, [\\"textContent\\"]),
-      _createElementVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]),
-      _createElementVNode(\\"div\\", null, \\"test\\"),
-      _createElementVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"),
-      _createElementVNode(\\"div\\", {
+      }, null, 8 /* PROPS */, ["textContent"]),
+      _createElementVNode("div", { innerHTML: html }, null, 8 /* PROPS */, ["innerHTML"]),
+      _createElementVNode("div", null, "test"),
+      _createElementVNode("div", { style: {"color":"red"} }, "red"),
+      _createElementVNode("div", {
         style: _normalizeStyle({color: 'green'})
       }, null, 4 /* STYLE */)
     ], 64 /* STABLE_FRAGMENT */))
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/Transition.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/Transition.spec.ts.snap
index 0e842e96e68..aa08c1366a6 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/Transition.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/Transition.spec.ts.snap
@@ -7,9 +7,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vShow: _vShow, createElementVNode: _createElementVNode, withDirectives: _withDirectives, Transition: _Transition, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
-    return (_openBlock(), _createBlock(_Transition, { persisted: \\"\\" }, {
+    return (_openBlock(), _createBlock(_Transition, { persisted: "" }, {
       default: _withCtx(() => [
-        _withDirectives(_createElementVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [
+        _withDirectives(_createElementVNode("div", null, null, 512 /* NEED_PATCH */), [
           [_vShow, ok]
         ])
       ]),
@@ -29,15 +29,15 @@ return function render(_ctx, _cache) {
     return (_openBlock(), _createBlock(_Transition, null, {
       default: _withCtx(() => [
         a
-          ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"hey\\"))
+          ? (_openBlock(), _createElementBlock("div", { key: 0 }, "hey"))
           : b
-            ? (_openBlock(), _createElementBlock(\\"div\\", { key: 1 }, \\"hey\\"))
-            : (_openBlock(), _createElementBlock(\\"div\\", { key: 2 }, [
+            ? (_openBlock(), _createElementBlock("div", { key: 1 }, "hey"))
+            : (_openBlock(), _createElementBlock("div", { key: 2 }, [
                 c
-                  ? (_openBlock(), _createElementBlock(\\"p\\", { key: 0 }))
+                  ? (_openBlock(), _createElementBlock("p", { key: 0 }))
                   : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
-                      _createCommentVNode(\\" this should not be ignored \\"),
-                      _createElementVNode(\\"p\\")
+                      _createCommentVNode(" this should not be ignored "),
+                      _createElementVNode("p")
                     ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
               ]))
       ]),
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
index b671d3252e5..33fb37a58f9 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
@@ -3,40 +3,40 @@
 exports[`stringify static html > should bail on bindings that are hoisted but not stringifiable 1`] = `
 "const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [
-  /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
-  /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
-  /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
-  /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
-  /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
-  /*#__PURE__*/_createElementVNode(\\"img\\", { src: _imports_0_ })
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, [
+  /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
+  /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
+  /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
+  /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
+  /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
+  /*#__PURE__*/_createElementVNode("img", { src: _imports_0_ })
 ], -1 /* HOISTED */)
 const _hoisted_2 = [
   _hoisted_1
 ]
 
 return function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
+  return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
 }"
 `;
 
 exports[`stringify static html > should work with bindings that are non-static but stringifiable 1`] = `
 "const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<div><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><img src=\\\\\\"\\" + _imports_0_ + \\"\\\\\\"></div>\\", 1)
+const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<div><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><img src=\\"" + _imports_0_ + "\\"></div>", 1)
 const _hoisted_2 = [
   _hoisted_1
 ]
 
 return function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
+  return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
 }"
 `;
 
 exports[`stringify static html > stringify v-html 1`] = `
 "const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<pre data-type=\\\\\\"js\\\\\\"><code><span>show-it </span></code></pre><div class><span class>1</span><span class>2</span></div>\\", 2)
+const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<pre data-type=\\"js\\"><code><span>show-it </span></code></pre><div class><span class>1</span><span class>2</span></div>", 2)
 
 return function render(_ctx, _cache) {
   return _hoisted_1
@@ -46,7 +46,7 @@ return function render(_ctx, _cache) {
 exports[`stringify static html > stringify v-text 1`] = `
 "const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<pre data-type=\\\\\\"js\\\\\\"><code>&lt;span&gt;show-it &lt;/span&gt;</code></pre><div class><span class>1</span><span class>2</span></div>\\", 2)
+const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<pre data-type=\\"js\\"><code>&lt;span&gt;show-it &lt;/span&gt;</code></pre><div class><span class>1</span><span class>2</span></div>", 2)
 
 return function render(_ctx, _cache) {
   return _hoisted_1
@@ -56,7 +56,7 @@ return function render(_ctx, _cache) {
 exports[`stringify static html > stringify v-text with escape 1`] = `
 "const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<pre data-type=\\\\\\"js\\\\\\"><code>text1</code></pre><div class><span class>1</span><span class>2</span></div>\\", 2)
+const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<pre data-type=\\"js\\"><code>text1</code></pre><div class><span class>1</span><span class>2</span></div>", 2)
 
 return function render(_ctx, _cache) {
   return _hoisted_1
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
index d2c9aaa785f..5b610745e41 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -7,9 +7,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"my-input\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("my-input", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelText, model]
     ])
   }
@@ -23,9 +23,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", _mergeProps(obj, {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }), null, 16 /* FULL_PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", _mergeProps(obj, {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }), null, 16 /* FULL_PROPS */, ["onUpdate:modelValue"])), [
       [_vModelDynamic, model]
     ])
   }
@@ -39,9 +39,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelDynamic: _vModelDynamic, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelDynamic, model]
     ])
   }
@@ -55,9 +55,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [
         _vModelText,
         model,
@@ -76,9 +76,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [
         _vModelText,
         model,
@@ -97,9 +97,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [
         _vModelText,
         model,
@@ -118,9 +118,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelText, model]
     ])
   }
@@ -134,10 +134,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelCheckbox: _vModelCheckbox, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      type: \\"checkbox\\",
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      type: "checkbox",
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelCheckbox, model]
     ])
   }
@@ -151,9 +151,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelDynamic: _vModelDynamic, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelDynamic, model]
     ])
   }
@@ -167,10 +167,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelRadio: _vModelRadio, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      type: \\"radio\\",
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      type: "radio",
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelRadio, model]
     ])
   }
@@ -184,10 +184,10 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
-      type: \\"text\\",
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("input", {
+      type: "text",
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelText, model]
     ])
   }
@@ -201,9 +201,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelSelect: _vModelSelect, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"select\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("select", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelSelect, model]
     ])
   }
@@ -217,9 +217,9 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"textarea\\", {
-      \\"onUpdate:modelValue\\": $event => ((model) = $event)
-    }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+    return _withDirectives((_openBlock(), _createElementBlock("textarea", {
+      "onUpdate:modelValue": $event => ((model) = $event)
+    }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
       [_vModelText, model]
     ])
   }
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
index bd9926e5ba7..b0ed8d8d6bd 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
@@ -7,7 +7,7 @@ return function render(_ctx, _cache) {
   with (_ctx) {
     const { vShow: _vShow, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
+    return _withDirectives((_openBlock(), _createElementBlock("div", null, null, 512 /* NEED_PATCH */)), [
       [_vShow, a]
     ])
   }
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index b0076294efe..f44fcadb9c0 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -46,7 +46,7 @@ return { a }
 
 exports[`SFC compile <script setup> > <script> and <script setup> co-usage > export call expression as default 1`] = `
 "function fn() {
-        return \\"hello, world\\";
+        return "hello, world";
       }
       const __default__ = fn();
       
@@ -123,7 +123,7 @@ exports[`SFC compile <script setup> > <script> and <script setup> co-usage > scr
 import { x } from './x'
       
       const __default__ = {
-        name: \\"test\\"
+        name: "test"
       }
       
 
@@ -898,7 +898,7 @@ return { ref }
 `;
 
 exports[`SFC compile <script setup> > imports > should support module string names syntax 1`] = `
-"import { \\"😏\\" as foo } from './foo'
+"import { "😏" as foo } from './foo'
       
 export default {
   setup(__props, { expose: __expose }) {
@@ -912,7 +912,7 @@ return { get foo() { return foo } }
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > avoid unref() when necessary 1`] = `
-"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 import { ref } from 'vue'
         import Foo, { bar } from './Foo.vue'
@@ -936,8 +936,8 @@ return (_ctx, _cache) => {
       ]),
       _: 1 /* STABLE */
     }),
-    _createElementVNode(\\"div\\", { onClick: fn }, _toDisplayString(count.value) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(maybe)) + \\" \\" + _toDisplayString(_unref(lett)) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */),
-    _createTextVNode(\\" \\" + _toDisplayString(tree.foo()), 1 /* TEXT */)
+    _createElementVNode("div", { onClick: fn }, _toDisplayString(count.value) + " " + _toDisplayString(constant) + " " + _toDisplayString(_unref(maybe)) + " " + _toDisplayString(_unref(lett)) + " " + _toDisplayString(_unref(other)), 1 /* TEXT */),
+    _createTextVNode(" " + _toDisplayString(tree.foo()), 1 /* TEXT */)
   ], 64 /* STABLE_FRAGMENT */))
 }
 }
@@ -946,7 +946,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > referencing scope components and directives 1`] = `
-"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 import ChildComp from './Child.vue'
         import SomeOtherComp from './Other.vue'
@@ -958,7 +958,7 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _withDirectives(_createElementVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [
+    _withDirectives(_createElementVNode("div", null, null, 512 /* NEED_PATCH */), [
       [_unref(vMyDir)]
     ]),
     _createVNode(ChildComp),
@@ -971,9 +971,9 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > should work 1`] = `
-"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"static\\", -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, "static", -1 /* HOISTED */)
 
 import { ref } from 'vue'
         
@@ -984,7 +984,7 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode(\\"div\\", null, _toDisplayString(count.value), 1 /* TEXT */),
+    _createElementVNode("div", null, _toDisplayString(count.value), 1 /* TEXT */),
     _hoisted_1
   ], 64 /* STABLE_FRAGMENT */))
 }
@@ -994,7 +994,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > ssr codegen 1`] = `
-"import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from \\"vue/server-renderer\\"
+"import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "vue/server-renderer"
 
 import { ref } from 'vue'
         
@@ -1007,8 +1007,8 @@ export default {
         
 return (_ctx, _push, _parent, _attrs) => {
   const _cssVars = { style: {
-  \\"--xxxxxxxx-count\\": (count.value),
-  \\"--xxxxxxxx-style\\\\\\\\.color\\": (style.color)
+  "--xxxxxxxx-count": (count.value),
+  "--xxxxxxxx-style\\\\.color": (style.color)
 }}
   _push(\`<!--[--><div\${
     _ssrRenderAttrs(_cssVars)
@@ -1024,7 +1024,7 @@ return (_ctx, _push, _parent, _attrs) => {
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > template assignment expression codegen 1`] = `
-"import { createElementVNode as _createElementVNode, isRef as _isRef, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, isRef as _isRef, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 import { ref } from 'vue'
         
@@ -1038,28 +1038,28 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[0] || (_cache[0] = $event => (count.value = 1))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[1] || (_cache[1] = $event => (maybe.value = count.value))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[2] || (_cache[2] = $event => (_isRef(lett) ? lett.value = count.value : lett = count.value))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[3] || (_cache[3] = $event => (_isRef(v) ? v.value += 1 : v += 1))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[4] || (_cache[4] = $event => (_isRef(v) ? v.value -= 1 : v -= 1))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[5] || (_cache[5] = () => {
               let a = '' + _unref(lett)
               _isRef(v) ? v.value = a : v = a
            })
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[6] || (_cache[6] = () => {
               // nested scopes
               (()=>{
@@ -1081,7 +1081,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > template destructure assignment codegen 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 import { ref } from 'vue'
         
@@ -1095,13 +1095,13 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[0] || (_cache[0] = $event => (({ count: count.value } = val)))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[1] || (_cache[1] = $event => ([maybe.value] = val))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[2] || (_cache[2] = $event => (({ lett: lett } = val)))
     })
   ], 64 /* STABLE_FRAGMENT */))
@@ -1112,7 +1112,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > template update expression codegen 1`] = `
-"import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 import { ref } from 'vue'
         
@@ -1125,22 +1125,22 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[0] || (_cache[0] = $event => (count.value++))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[1] || (_cache[1] = $event => (--count.value))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[2] || (_cache[2] = $event => (maybe.value++))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[3] || (_cache[3] = $event => (--maybe.value))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[4] || (_cache[4] = $event => (_isRef(lett) ? lett.value++ : lett++))
     }),
-    _createElementVNode(\\"div\\", {
+    _createElementVNode("div", {
       onClick: _cache[5] || (_cache[5] = $event => (_isRef(lett) ? --lett.value : --lett))
     })
   ], 64 /* STABLE_FRAGMENT */))
@@ -1151,7 +1151,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > v-model codegen 1`] = `
-"import { vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, unref as _unref, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, unref as _unref, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 import { ref } from 'vue'
         
@@ -1164,18 +1164,18 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _withDirectives(_createElementVNode(\\"input\\", {
-      \\"onUpdate:modelValue\\": _cache[0] || (_cache[0] = $event => ((count).value = $event))
+    _withDirectives(_createElementVNode("input", {
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((count).value = $event))
     }, null, 512 /* NEED_PATCH */), [
       [_vModelText, count.value]
     ]),
-    _withDirectives(_createElementVNode(\\"input\\", {
-      \\"onUpdate:modelValue\\": _cache[1] || (_cache[1] = $event => (_isRef(maybe) ? (maybe).value = $event : null))
+    _withDirectives(_createElementVNode("input", {
+      "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (_isRef(maybe) ? (maybe).value = $event : null))
     }, null, 512 /* NEED_PATCH */), [
       [_vModelText, _unref(maybe)]
     ]),
-    _withDirectives(_createElementVNode(\\"input\\", {
-      \\"onUpdate:modelValue\\": _cache[2] || (_cache[2] = $event => (_isRef(lett) ? (lett).value = $event : lett = $event))
+    _withDirectives(_createElementVNode("input", {
+      "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => (_isRef(lett) ? (lett).value = $event : lett = $event))
     }, null, 512 /* NEED_PATCH */), [
       [_vModelText, _unref(lett)]
     ])
@@ -1304,9 +1304,9 @@ return { Foo }
 exports[`SFC compile <script setup> > with TypeScript > runtime Enum in normal script 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
-          export enum D { D = \\"D\\" }
-          const enum C { C = \\"C\\" }
-          enum B { B = \\"B\\" }
+          export enum D { D = "D" }
+          const enum C { C = "C" }
+          enum B { B = "B" }
         
 export default /*#__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
@@ -1410,7 +1410,7 @@ exports[`SFC genDefaultAs > normal <script> w/ cssVars 1`] = `
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-x\\": (_ctx.x)
+  "xxxxxxxx-x": (_ctx.x)
 }))}
 const __setup__ = _sfc_.setup
 _sfc_.setup = __setup__
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
index 35b87c4ec71..fce0fa76183 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`dynamic v-on + static v-on should merged 1`] = `
-"import { toHandlerKey as _toHandlerKey, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { toHandlerKey as _toHandlerKey, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"input\\", _mergeProps({
+  return (_openBlock(), _createElementBlock("input", _mergeProps({
     onBlur: _cache[0] || (_cache[0] = (...args) => (_ctx.onBlur && _ctx.onBlur(...args)))
   }, {
     [_toHandlerKey(_ctx.validateEvent)]: _cache[1] || (_cache[1] = (...args) => (_ctx.onValidateEvent && _ctx.onValidateEvent(...args)))
@@ -13,19 +13,19 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`should not hoist srcset URLs in SSR mode 1`] = `
-"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
-import { ssrRenderAttr as _ssrRenderAttr, ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
+"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
+import { ssrRenderAttr as _ssrRenderAttr, ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
 import _imports_0 from './img/foo.svg'
 import _imports_1 from './img/bar.svg'
 
 
 export function ssrRender(_ctx, _push, _parent, _attrs) {
-  const _component_router_link = _resolveComponent(\\"router-link\\")
+  const _component_router_link = _resolveComponent("router-link")
 
   _push(\`<!--[--><picture><source\${
-    _ssrRenderAttr(\\"srcset\\", _imports_0)
+    _ssrRenderAttr("srcset", _imports_0)
   }><img\${
-    _ssrRenderAttr(\\"src\\", _imports_0)
+    _ssrRenderAttr("src", _imports_0)
   }></picture>\`)
   _push(_ssrRenderComponent(_component_router_link, null, {
     default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -33,21 +33,21 @@ export function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<picture\${
           _scopeId
         }><source\${
-          _ssrRenderAttr(\\"srcset\\", _imports_1)
+          _ssrRenderAttr("srcset", _imports_1)
         }\${
           _scopeId
         }><img\${
-          _ssrRenderAttr(\\"src\\", _imports_1)
+          _ssrRenderAttr("src", _imports_1)
         }\${
           _scopeId
         }></picture>\`)
       } else {
         return [
-          _createVNode(\\"picture\\", null, [
-            _createVNode(\\"source\\", {
+          _createVNode("picture", null, [
+            _createVNode("source", {
               srcset: _imports_1
             }),
-            _createVNode(\\"img\\", { src: _imports_1 })
+            _createVNode("img", { src: _imports_1 })
           ])
         ]
       }
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
index 1e99f6087c1..ec3f79f868d 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`CSS vars injection > codegen > <script> w/ default export 1`] = `
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-color\\": (_ctx.color)
+  "xxxxxxxx-color": (_ctx.color)
 }))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -23,7 +23,7 @@ exports[`CSS vars injection > codegen > <script> w/ default export in strings/co
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-color\\": (_ctx.color)
+  "xxxxxxxx-color": (_ctx.color)
 }))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -39,7 +39,7 @@ const __default__ = {}
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-color\\": (_ctx.color)
+  "xxxxxxxx-color": (_ctx.color)
 }))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -57,7 +57,7 @@ export default {
   __expose();
 
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-width\\": (width)
+  "xxxxxxxx-width": (width)
 }))
 
 return { color, width }
@@ -74,10 +74,10 @@ export default {
   __expose();
 
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-foo\\": (_unref(foo)),
-  \\"xxxxxxxx-foo\\\\ \\\\+\\\\ \\\\'px\\\\'\\": (_unref(foo) + 'px'),
-  \\"xxxxxxxx-\\\\(a\\\\ \\\\+\\\\ b\\\\)\\\\ \\\\/\\\\ 2\\\\ \\\\+\\\\ \\\\'px\\\\'\\": ((_unref(a) + _unref(b)) / 2 + 'px'),
-  \\"xxxxxxxx-\\\\(\\\\(a\\\\ \\\\+\\\\ b\\\\)\\\\)\\\\ \\\\/\\\\ \\\\(2\\\\ \\\\*\\\\ a\\\\)\\": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
+  "xxxxxxxx-foo": (_unref(foo)),
+  "xxxxxxxx-foo\\ \\+\\ \\'px\\'": (_unref(foo) + 'px'),
+  "xxxxxxxx-\\(a\\ \\+\\ b\\)\\ \\/\\ 2\\ \\+\\ \\'px\\'": ((_unref(a) + _unref(b)) / 2 + 'px'),
+  "xxxxxxxx-\\(\\(a\\ \\+\\ b\\)\\)\\ \\/\\ \\(2\\ \\*\\ a\\)": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
 }))
 
         let a = 100
@@ -98,7 +98,7 @@ export default {
   __expose();
 
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-color\\": (color)
+  "xxxxxxxx-color": (color)
 }))
 
 return { color }
@@ -116,7 +116,7 @@ export default {
   __expose();
 
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-color\\": (color)
+  "xxxxxxxx-color": (color)
 }))
 
         
@@ -132,8 +132,8 @@ const __default__ = {}
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-color\\": (_ctx.color),
-  \\"xxxxxxxx-font\\\\.size\\": (_ctx.font.size)
+  "xxxxxxxx-color": (_ctx.color),
+  "xxxxxxxx-font\\.size": (_ctx.font.size)
 }))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -156,9 +156,9 @@ export default {
   __expose();
 
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-color\\": (color),
-  \\"xxxxxxxx-size\\": (size.value),
-  \\"xxxxxxxx-foo\\": (__props.foo)
+  "xxxxxxxx-color": (color),
+  "xxxxxxxx-size": (size.value),
+  "xxxxxxxx-foo": (__props.foo)
 }))
 
         const size = ref('10px')
@@ -183,7 +183,7 @@ exports[`CSS vars injection > w/ normal <script> binding analysis 1`] = `
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  \\"xxxxxxxx-size\\": (_ctx.size)
+  "xxxxxxxx-size": (_ctx.size)
 }))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
index 1d238adbe6e..6af4115efb0 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
@@ -1,45 +1,45 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler sfc: transform asset url > should allow for full base URLs, with paths 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost:3000/src/logo.png\\" }))
+  return (_openBlock(), _createElementBlock("img", { src: "http://localhost:3000/src/logo.png" }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > should allow for full base URLs, without paths 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost:3000/logo.png\\" }))
+  return (_openBlock(), _createElementBlock("img", { src: "http://localhost:3000/logo.png" }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > should allow for full base URLs, without port 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost/logo.png\\" }))
+  return (_openBlock(), _createElementBlock("img", { src: "http://localhost/logo.png" }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > should allow for full base URLs, without protocol 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"//localhost/logo.png\\" }))
+  return (_openBlock(), _createElementBlock("img", { src: "//localhost/logo.png" }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > support uri fragment 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from '@svg/file.svg'
 
 
 const _hoisted_1 = _imports_0 + '#fragment'
-const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"use\\", { href: _hoisted_1 }, null, -1 /* HOISTED */)
-const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"use\\", { href: _hoisted_1 }, null, -1 /* HOISTED */)
+const _hoisted_2 = /*#__PURE__*/_createElementVNode("use", { href: _hoisted_1 }, null, -1 /* HOISTED */)
+const _hoisted_3 = /*#__PURE__*/_createElementVNode("use", { href: _hoisted_1 }, null, -1 /* HOISTED */)
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
@@ -50,76 +50,76 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`compiler sfc: transform asset url > support uri is empty 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"use\\", { href: '' }))
+  return (_openBlock(), _createElementBlock("use", { href: '' }))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > transform assetUrls 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './logo.png'
 import _imports_1 from 'fixtures/logo.png'
 
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode(\\"img\\", { src: _imports_0 }),
-    _createElementVNode(\\"img\\", { src: _imports_1 }),
-    _createElementVNode(\\"img\\", { src: _imports_1 }),
-    _createElementVNode(\\"img\\", { src: \\"http://example.com/fixtures/logo.png\\" }),
-    _createElementVNode(\\"img\\", { src: \\"//example.com/fixtures/logo.png\\" }),
-    _createElementVNode(\\"img\\", { src: \\"/fixtures/logo.png\\" }),
-    _createElementVNode(\\"img\\", { src: \\"data:image/png;base64,i\\" })
+    _createElementVNode("img", { src: _imports_0 }),
+    _createElementVNode("img", { src: _imports_1 }),
+    _createElementVNode("img", { src: _imports_1 }),
+    _createElementVNode("img", { src: "http://example.com/fixtures/logo.png" }),
+    _createElementVNode("img", { src: "//example.com/fixtures/logo.png" }),
+    _createElementVNode("img", { src: "/fixtures/logo.png" }),
+    _createElementVNode("img", { src: "data:image/png;base64,i" })
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > transform with stringify 1`] = `
-"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './bar.png'
 import _imports_1 from '/bar.png'
 
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<img src=\\\\\\"\\" + _imports_0 + \\"\\\\\\"><img src=\\\\\\"\\" + _imports_1 + \\"\\\\\\"><img src=\\\\\\"https://foo.bar/baz.png\\\\\\"><img src=\\\\\\"//foo.bar/baz.png\\\\\\"><img src=\\\\\\"\\" + _imports_0 + \\"\\\\\\">\\", 5)
+const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<img src=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_1 + "\\"><img src=\\"https://foo.bar/baz.png\\"><img src=\\"//foo.bar/baz.png\\"><img src=\\"" + _imports_0 + "\\">", 5)
 const _hoisted_6 = [
   _hoisted_1
 ]
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_6))
+  return (_openBlock(), _createElementBlock("div", null, _hoisted_6))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > with explicit base 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from 'bar.png'
 import _imports_1 from '@theme/bar.png'
 
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode(\\"img\\", { src: \\"/foo/bar.png\\" }),
-    _createElementVNode(\\"img\\", { src: \\"bar.png\\" }),
-    _createElementVNode(\\"img\\", { src: _imports_0 }),
-    _createElementVNode(\\"img\\", { src: _imports_1 })
+    _createElementVNode("img", { src: "/foo/bar.png" }),
+    _createElementVNode("img", { src: "bar.png" }),
+    _createElementVNode("img", { src: _imports_0 }),
+    _createElementVNode("img", { src: _imports_1 })
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
 exports[`compiler sfc: transform asset url > with includeAbsolute: true 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './bar.png'
 import _imports_1 from '/bar.png'
 
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode(\\"img\\", { src: _imports_0 }),
-    _createElementVNode(\\"img\\", { src: _imports_1 }),
-    _createElementVNode(\\"img\\", { src: \\"https://foo.bar/baz.png\\" }),
-    _createElementVNode(\\"img\\", { src: \\"//foo.bar/baz.png\\" })
+    _createElementVNode("img", { src: _imports_0 }),
+    _createElementVNode("img", { src: _imports_1 }),
+    _createElementVNode("img", { src: "https://foo.bar/baz.png" }),
+    _createElementVNode("img", { src: "//foo.bar/baz.png" })
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
index 49711504c78..8aaba811404 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
@@ -1,14 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler sfc: transform srcset > srcset w/ explicit base option 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from '@/logo.png'
 
 
 const _hoisted_1 = _imports_0 + ', ' + _imports_0 + ' 2x'
-const _hoisted_2 = _imports_0 + ' 1x, ' + \\"/foo/logo.png\\" + ' 2x'
-const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"img\\", { srcset: _hoisted_1 }, null, -1 /* HOISTED */)
-const _hoisted_4 = /*#__PURE__*/_createElementVNode(\\"img\\", { srcset: _hoisted_2 }, null, -1 /* HOISTED */)
+const _hoisted_2 = _imports_0 + ' 1x, ' + "/foo/logo.png" + ' 2x'
+const _hoisted_3 = /*#__PURE__*/_createElementVNode("img", { srcset: _hoisted_1 }, null, -1 /* HOISTED */)
+const _hoisted_4 = /*#__PURE__*/_createElementVNode("img", { srcset: _hoisted_2 }, null, -1 /* HOISTED */)
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
@@ -19,7 +19,7 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`compiler sfc: transform srcset > transform srcset 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './logo.png'
 
 
@@ -30,54 +30,54 @@ const _hoisted_4 = _imports_0 + ', ' + _imports_0 + ' 2x'
 const _hoisted_5 = _imports_0 + ' 2x, ' + _imports_0
 const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
-const _hoisted_8 = \\"/logo.png\\" + ', ' + _imports_0 + ' 2x'
-const _hoisted_9 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"\\"
+const _hoisted_8 = "/logo.png" + ', ' + _imports_0 + ' 2x'
+const _hoisted_9 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
+  srcset: ""
 }, null, -1 /* HOISTED */)
-const _hoisted_10 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
+const _hoisted_10 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
   srcset: _hoisted_1
 }, null, -1 /* HOISTED */)
-const _hoisted_11 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
+const _hoisted_11 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
   srcset: _hoisted_2
 }, null, -1 /* HOISTED */)
-const _hoisted_12 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
+const _hoisted_12 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
   srcset: _hoisted_3
 }, null, -1 /* HOISTED */)
-const _hoisted_13 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
+const _hoisted_13 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
   srcset: _hoisted_4
 }, null, -1 /* HOISTED */)
-const _hoisted_14 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
+const _hoisted_14 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
   srcset: _hoisted_5
 }, null, -1 /* HOISTED */)
-const _hoisted_15 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
+const _hoisted_15 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
   srcset: _hoisted_6
 }, null, -1 /* HOISTED */)
-const _hoisted_16 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
+const _hoisted_16 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
   srcset: _hoisted_7
 }, null, -1 /* HOISTED */)
-const _hoisted_17 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"/logo.png\\",
-  srcset: \\"/logo.png, /logo.png 2x\\"
+const _hoisted_17 = /*#__PURE__*/_createElementVNode("img", {
+  src: "/logo.png",
+  srcset: "/logo.png, /logo.png 2x"
 }, null, -1 /* HOISTED */)
-const _hoisted_18 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"https://example.com/logo.png\\",
-  srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
+const _hoisted_18 = /*#__PURE__*/_createElementVNode("img", {
+  src: "https://example.com/logo.png",
+  srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
 }, null, -1 /* HOISTED */)
-const _hoisted_19 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"/logo.png\\",
+const _hoisted_19 = /*#__PURE__*/_createElementVNode("img", {
+  src: "/logo.png",
   srcset: _hoisted_8
 }, null, -1 /* HOISTED */)
-const _hoisted_20 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"data:image/png;base64,i\\",
-  srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
+const _hoisted_20 = /*#__PURE__*/_createElementVNode("img", {
+  src: "data:image/png;base64,i",
+  srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
 }, null, -1 /* HOISTED */)
 
 export function render(_ctx, _cache) {
@@ -99,55 +99,55 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`compiler sfc: transform srcset > transform srcset w/ base 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"\\"
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
+  srcset: ""
 }, null, -1 /* HOISTED */)
-const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"/foo/logo.png\\"
+const _hoisted_2 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
+  srcset: "/foo/logo.png"
 }, null, -1 /* HOISTED */)
-const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"/foo/logo.png 2x\\"
+const _hoisted_3 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
+  srcset: "/foo/logo.png 2x"
 }, null, -1 /* HOISTED */)
-const _hoisted_4 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"/foo/logo.png 2x\\"
+const _hoisted_4 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
+  srcset: "/foo/logo.png 2x"
 }, null, -1 /* HOISTED */)
-const _hoisted_5 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"/foo/logo.png, /foo/logo.png 2x\\"
+const _hoisted_5 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
+  srcset: "/foo/logo.png, /foo/logo.png 2x"
 }, null, -1 /* HOISTED */)
-const _hoisted_6 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"/foo/logo.png 2x, /foo/logo.png\\"
+const _hoisted_6 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
+  srcset: "/foo/logo.png 2x, /foo/logo.png"
 }, null, -1 /* HOISTED */)
-const _hoisted_7 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"/foo/logo.png 2x, /foo/logo.png 3x\\"
+const _hoisted_7 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
+  srcset: "/foo/logo.png 2x, /foo/logo.png 3x"
 }, null, -1 /* HOISTED */)
-const _hoisted_8 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x\\"
+const _hoisted_8 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
+  srcset: "/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x"
 }, null, -1 /* HOISTED */)
-const _hoisted_9 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"/logo.png\\",
-  srcset: \\"/logo.png, /logo.png 2x\\"
+const _hoisted_9 = /*#__PURE__*/_createElementVNode("img", {
+  src: "/logo.png",
+  srcset: "/logo.png, /logo.png 2x"
 }, null, -1 /* HOISTED */)
-const _hoisted_10 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"https://example.com/logo.png\\",
-  srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
+const _hoisted_10 = /*#__PURE__*/_createElementVNode("img", {
+  src: "https://example.com/logo.png",
+  srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
 }, null, -1 /* HOISTED */)
-const _hoisted_11 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"/logo.png\\",
-  srcset: \\"/logo.png, /foo/logo.png 2x\\"
+const _hoisted_11 = /*#__PURE__*/_createElementVNode("img", {
+  src: "/logo.png",
+  srcset: "/logo.png, /foo/logo.png 2x"
 }, null, -1 /* HOISTED */)
-const _hoisted_12 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"data:image/png;base64,i\\",
-  srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
+const _hoisted_12 = /*#__PURE__*/_createElementVNode("img", {
+  src: "data:image/png;base64,i",
+  srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
 }, null, -1 /* HOISTED */)
 
 export function render(_ctx, _cache) {
@@ -169,7 +169,7 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`compiler sfc: transform srcset > transform srcset w/ includeAbsolute: true 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './logo.png'
 import _imports_1 from '/logo.png'
 
@@ -183,53 +183,53 @@ const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
 const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x'
-const _hoisted_10 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
-  srcset: \\"\\"
+const _hoisted_10 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
+  srcset: ""
 }, null, -1 /* HOISTED */)
-const _hoisted_11 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
+const _hoisted_11 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
   srcset: _hoisted_1
 }, null, -1 /* HOISTED */)
-const _hoisted_12 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
+const _hoisted_12 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
   srcset: _hoisted_2
 }, null, -1 /* HOISTED */)
-const _hoisted_13 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
+const _hoisted_13 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
   srcset: _hoisted_3
 }, null, -1 /* HOISTED */)
-const _hoisted_14 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
+const _hoisted_14 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
   srcset: _hoisted_4
 }, null, -1 /* HOISTED */)
-const _hoisted_15 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
+const _hoisted_15 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
   srcset: _hoisted_5
 }, null, -1 /* HOISTED */)
-const _hoisted_16 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
+const _hoisted_16 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
   srcset: _hoisted_6
 }, null, -1 /* HOISTED */)
-const _hoisted_17 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"./logo.png\\",
+const _hoisted_17 = /*#__PURE__*/_createElementVNode("img", {
+  src: "./logo.png",
   srcset: _hoisted_7
 }, null, -1 /* HOISTED */)
-const _hoisted_18 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"/logo.png\\",
+const _hoisted_18 = /*#__PURE__*/_createElementVNode("img", {
+  src: "/logo.png",
   srcset: _hoisted_8
 }, null, -1 /* HOISTED */)
-const _hoisted_19 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"https://example.com/logo.png\\",
-  srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
+const _hoisted_19 = /*#__PURE__*/_createElementVNode("img", {
+  src: "https://example.com/logo.png",
+  srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
 }, null, -1 /* HOISTED */)
-const _hoisted_20 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"/logo.png\\",
+const _hoisted_20 = /*#__PURE__*/_createElementVNode("img", {
+  src: "/logo.png",
   srcset: _hoisted_9
 }, null, -1 /* HOISTED */)
-const _hoisted_21 = /*#__PURE__*/_createElementVNode(\\"img\\", {
-  src: \\"data:image/png;base64,i\\",
-  srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
+const _hoisted_21 = /*#__PURE__*/_createElementVNode("img", {
+  src: "data:image/png;base64,i",
+  srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
 }, null, -1 /* HOISTED */)
 
 export function render(_ctx, _cache) {
@@ -251,7 +251,7 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`compiler sfc: transform srcset > transform srcset w/ stringify 1`] = `
-"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './logo.png'
 import _imports_1 from '/logo.png'
 
@@ -265,12 +265,12 @@ const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
 const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x'
-const _hoisted_10 = /*#__PURE__*/_createStaticVNode(\\"<img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_1 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_2 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_3 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_4 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_5 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_6 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_7 + \\"\\\\\\"><img src=\\\\\\"/logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_8 + \\"\\\\\\"><img src=\\\\\\"https://example.com/logo.png\\\\\\" srcset=\\\\\\"https://example.com/logo.png, https://example.com/logo.png 2x\\\\\\"><img src=\\\\\\"/logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_9 + \\"\\\\\\"><img src=\\\\\\"data:image/png;base64,i\\\\\\" srcset=\\\\\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\\\\\">\\", 12)
+const _hoisted_10 = /*#__PURE__*/_createStaticVNode("<img src=\\"./logo.png\\" srcset=\\"\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_1 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_2 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_3 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_4 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_5 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_6 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_7 + "\\"><img src=\\"/logo.png\\" srcset=\\"" + _hoisted_8 + "\\"><img src=\\"https://example.com/logo.png\\" srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\"><img src=\\"/logo.png\\" srcset=\\"" + _hoisted_9 + "\\"><img src=\\"data:image/png;base64,i\\" srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">", 12)
 const _hoisted_22 = [
   _hoisted_10
 ]
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_22))
+  return (_openBlock(), _createElementBlock("div", null, _hoisted_22))
 }"
 `;
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineEmits.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineEmits.spec.ts.snap
index 78a9834d288..9b44476ec57 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineEmits.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineEmits.spec.ts.snap
@@ -35,7 +35,7 @@ exports[`defineEmits > w/ type (exported interface) 1`] = `
 export interface Emits { (e: 'foo' | 'bar'): void }
     
 export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -52,7 +52,7 @@ exports[`defineEmits > w/ type (exported type alias) 1`] = `
 export type Emits = { (e: 'foo' | 'bar'): void }
     
 export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -87,7 +87,7 @@ interface Base { (e: 'foo'): void }
     interface Emits extends Base { (e: 'bar'): void }
     
 export default /*#__PURE__*/_defineComponent({
-  emits: [\\"bar\\", \\"foo\\"],
+  emits: ["bar", "foo"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -104,7 +104,7 @@ exports[`defineEmits > w/ type (interface) 1`] = `
 interface Emits { (e: 'foo' | 'bar'): void }
     
 export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -120,7 +120,7 @@ exports[`defineEmits > w/ type (property syntax string literal) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo:bar\\"],
+  emits: ["foo:bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -136,7 +136,7 @@ exports[`defineEmits > w/ type (property syntax) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -153,7 +153,7 @@ exports[`defineEmits > w/ type (referenced exported function type) 1`] = `
 export type Emits = (e: 'foo' | 'bar') => void
     
 export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -170,7 +170,7 @@ exports[`defineEmits > w/ type (referenced function type) 1`] = `
 type Emits = (e: 'foo' | 'bar') => void
     
 export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -187,7 +187,7 @@ exports[`defineEmits > w/ type (type alias) 1`] = `
 type Emits = { (e: 'foo' | 'bar'): void }
     
 export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -203,7 +203,7 @@ exports[`defineEmits > w/ type (type literal w/ call signatures) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\", \\"baz\\"],
+  emits: ["foo", "bar", "baz"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -217,11 +217,11 @@ return { emit }
 
 exports[`defineEmits > w/ type (type references in union) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
-type BaseEmit = \\"change\\"
-    type Emit = \\"some\\" | \\"emit\\" | BaseEmit
+type BaseEmit = "change"
+    type Emit = "some" | "emit" | BaseEmit
     
 export default /*#__PURE__*/_defineComponent({
-  emits: [\\"some\\", \\"emit\\", \\"change\\", \\"another\\"],
+  emits: ["some", "emit", "change", "another"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -237,7 +237,7 @@ exports[`defineEmits > w/ type (union) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\", \\"baz\\"],
+  emits: ["foo", "bar", "baz"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -253,7 +253,7 @@ exports[`defineEmits > w/ type 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -271,7 +271,7 @@ exports[`defineEmits > w/ type from normal script 1`] = `
       export interface Emits { (e: 'foo' | 'bar'): void }
     
 export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap
index 27c358c5a94..323fb8688d5 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap
@@ -5,17 +5,17 @@ exports[`defineModel() > basic usage 1`] = `
 
 export default {
   props: {
-    \\"modelValue\\": { required: true },
-    \\"count\\": {},
-    \\"toString\\": { type: Function },
+    "modelValue": { required: true },
+    "count": {},
+    "toString": { type: Function },
   },
-  emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:toString\\"],
+  emits: ["update:modelValue", "update:count", "update:toString"],
   setup(__props, { expose: __expose }) {
   __expose();
 
-      const modelValue = _useModel(__props, \\"modelValue\\")
-      const c = _useModel(__props, \\"count\\")
-      const toString = _useModel(__props, \\"toString\\")
+      const modelValue = _useModel(__props, "modelValue")
+      const c = _useModel(__props, "count")
+      const toString = _useModel(__props, "toString")
       
 return { modelValue, c, toString }
 }
@@ -28,14 +28,14 @@ exports[`defineModel() > w/ array props 1`] = `
 
 export default {
   props: /*#__PURE__*/_mergeModels(['foo', 'bar'], {
-    \\"count\\": {},
+    "count": {},
   }),
-  emits: [\\"update:count\\"],
+  emits: ["update:count"],
   setup(__props, { expose: __expose }) {
   __expose();
 
       
-      const count = _useModel(__props, \\"count\\")
+      const count = _useModel(__props, "count")
       
 return { count }
 }
@@ -48,15 +48,15 @@ exports[`defineModel() > w/ defineProps and defineEmits 1`] = `
 
 export default {
   props: /*#__PURE__*/_mergeModels({ foo: String }, {
-    \\"modelValue\\": { default: 0 },
+    "modelValue": { default: 0 },
   }),
-  emits: /*#__PURE__*/_mergeModels(['change'], [\\"update:modelValue\\"]),
+  emits: /*#__PURE__*/_mergeModels(['change'], ["update:modelValue"]),
   setup(__props, { expose: __expose }) {
   __expose();
 
       
       
-      const count = _useModel(__props, \\"modelValue\\")
+      const count = _useModel(__props, "modelValue")
       
 return { count }
 }
@@ -70,25 +70,25 @@ const local = true
       
 export default {
   props: {
-    \\"modelValue\\": { local: true, default: 1 },
-    \\"bar\\": { [key]: true },
-    \\"baz\\": { ...x },
-    \\"qux\\": x,
-    \\"foo2\\": { local: true, ...x },
-    \\"hoist\\": { local },
+    "modelValue": { local: true, default: 1 },
+    "bar": { [key]: true },
+    "baz": { ...x },
+    "qux": x,
+    "foo2": { local: true, ...x },
+    "hoist": { local },
   },
-  emits: [\\"update:modelValue\\", \\"update:bar\\", \\"update:baz\\", \\"update:qux\\", \\"update:foo2\\", \\"update:hoist\\"],
+  emits: ["update:modelValue", "update:bar", "update:baz", "update:qux", "update:foo2", "update:hoist"],
   setup(__props, { expose: __expose }) {
   __expose();
 
-      const foo = _useModel(__props, \\"modelValue\\", { local: true })
-      const bar = _useModel(__props, \\"bar\\", { [key]: true })
-      const baz = _useModel(__props, \\"baz\\", { ...x })
-      const qux = _useModel(__props, \\"qux\\", x)
+      const foo = _useModel(__props, "modelValue", { local: true })
+      const bar = _useModel(__props, "bar", { [key]: true })
+      const baz = _useModel(__props, "baz", { ...x })
+      const qux = _useModel(__props, "qux", x)
 
-      const foo2 = _useModel(__props, \\"foo2\\", { local: true })
+      const foo2 = _useModel(__props, "foo2", { local: true })
 
-      const hoist = _useModel(__props, \\"hoist\\", { local })
+      const hoist = _useModel(__props, "hoist", { local })
       
 return { foo, bar, baz, qux, foo2, local, hoist }
 }
@@ -101,19 +101,19 @@ exports[`defineModel() > w/ types, basic usage 1`] = `
 
 export default /*#__PURE__*/_defineComponent({
   props: {
-    \\"modelValue\\": { type: [Boolean, String] },
-    \\"count\\": { type: Number },
-    \\"disabled\\": { type: Number, ...{ required: false } },
-    \\"any\\": { type: Boolean, skipCheck: true },
+    "modelValue": { type: [Boolean, String] },
+    "count": { type: Number },
+    "disabled": { type: Number, ...{ required: false } },
+    "any": { type: Boolean, skipCheck: true },
   },
-  emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:disabled\\", \\"update:any\\"],
+  emits: ["update:modelValue", "update:count", "update:disabled", "update:any"],
   setup(__props, { expose: __expose }) {
   __expose();
 
-      const modelValue = _useModel(__props, \\"modelValue\\")
-      const count = _useModel(__props, \\"count\\")
-      const disabled = _useModel(__props, \\"disabled\\")
-      const any = _useModel(__props, \\"any\\")
+      const modelValue = _useModel(__props, "modelValue")
+      const count = _useModel(__props, "count")
+      const disabled = _useModel(__props, "disabled")
+      const any = _useModel(__props, "any")
       
 return { modelValue, count, disabled, any }
 }
@@ -126,21 +126,21 @@ exports[`defineModel() > w/ types, production mode 1`] = `
 
 export default /*#__PURE__*/_defineComponent({
   props: {
-    \\"modelValue\\": { type: Boolean },
-    \\"fn\\": {},
-    \\"fnWithDefault\\": { type: Function, ...{ default: () => null } },
-    \\"str\\": {},
-    \\"optional\\": { required: false },
+    "modelValue": { type: Boolean },
+    "fn": {},
+    "fnWithDefault": { type: Function, ...{ default: () => null } },
+    "str": {},
+    "optional": { required: false },
   },
-  emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:fnWithDefault\\", \\"update:str\\", \\"update:optional\\"],
+  emits: ["update:modelValue", "update:fn", "update:fnWithDefault", "update:str", "update:optional"],
   setup(__props, { expose: __expose }) {
   __expose();
 
-      const modelValue = _useModel(__props, \\"modelValue\\")
-      const fn = _useModel(__props, \\"fn\\")
-      const fnWithDefault = _useModel(__props, \\"fnWithDefault\\")
-      const str = _useModel(__props, \\"str\\")
-      const optional = _useModel(__props, \\"optional\\")
+      const modelValue = _useModel(__props, "modelValue")
+      const fn = _useModel(__props, "fn")
+      const fnWithDefault = _useModel(__props, "fnWithDefault")
+      const str = _useModel(__props, "str")
+      const optional = _useModel(__props, "optional")
       
 return { modelValue, fn, fnWithDefault, str, optional }
 }
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap
index c5f50be5d36..38c4419b5d3 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap
@@ -57,34 +57,34 @@ exports[`defineProps > should escape names w/ special symbols 1`] = `
 
 export default /*#__PURE__*/_defineComponent({
   props: {
-    \\"spa ce\\": { type: null, required: true },
-    \\"exclamation!mark\\": { type: null, required: true },
-    \\"double\\\\\\"quote\\": { type: null, required: true },
-    \\"hash#tag\\": { type: null, required: true },
-    \\"dollar$sign\\": { type: null, required: true },
-    \\"percentage%sign\\": { type: null, required: true },
-    \\"amper&sand\\": { type: null, required: true },
-    \\"single'quote\\": { type: null, required: true },
-    \\"round(brack)ets\\": { type: null, required: true },
-    \\"aste*risk\\": { type: null, required: true },
-    \\"pl+us\\": { type: null, required: true },
-    \\"com,ma\\": { type: null, required: true },
-    \\"do.t\\": { type: null, required: true },
-    \\"sla/sh\\": { type: null, required: true },
-    \\"co:lon\\": { type: null, required: true },
-    \\"semi;colon\\": { type: null, required: true },
-    \\"angle<brack>ets\\": { type: null, required: true },
-    \\"equal=sign\\": { type: null, required: true },
-    \\"question?mark\\": { type: null, required: true },
-    \\"at@sign\\": { type: null, required: true },
-    \\"square[brack]ets\\": { type: null, required: true },
-    \\"back\\\\\\\\slash\\": { type: null, required: true },
-    \\"ca^ret\\": { type: null, required: true },
-    \\"back\`tick\\": { type: null, required: true },
-    \\"curly{bra}ces\\": { type: null, required: true },
-    \\"pi|pe\\": { type: null, required: true },
-    \\"til~de\\": { type: null, required: true },
-    \\"da-sh\\": { type: null, required: true }
+    "spa ce": { type: null, required: true },
+    "exclamation!mark": { type: null, required: true },
+    "double\\"quote": { type: null, required: true },
+    "hash#tag": { type: null, required: true },
+    "dollar$sign": { type: null, required: true },
+    "percentage%sign": { type: null, required: true },
+    "amper&sand": { type: null, required: true },
+    "single'quote": { type: null, required: true },
+    "round(brack)ets": { type: null, required: true },
+    "aste*risk": { type: null, required: true },
+    "pl+us": { type: null, required: true },
+    "com,ma": { type: null, required: true },
+    "do.t": { type: null, required: true },
+    "sla/sh": { type: null, required: true },
+    "co:lon": { type: null, required: true },
+    "semi;colon": { type: null, required: true },
+    "angle<brack>ets": { type: null, required: true },
+    "equal=sign": { type: null, required: true },
+    "question?mark": { type: null, required: true },
+    "at@sign": { type: null, required: true },
+    "square[brack]ets": { type: null, required: true },
+    "back\\\\slash": { type: null, required: true },
+    "ca^ret": { type: null, required: true },
+    "back\`tick": { type: null, required: true },
+    "curly{bra}ces": { type: null, required: true },
+    "pi|pe": { type: null, required: true },
+    "til~de": { type: null, required: true },
+    "da-sh": { type: null, required: true }
   },
   setup(__props: any, { expose: __expose }) {
   __expose();
@@ -400,7 +400,7 @@ exports[`defineProps > withDefaults (static) + normal script 1`] = `
     
 export default /*#__PURE__*/_defineComponent({
   props: {
-    a: { type: String, required: false, default: \\"a\\" }
+    a: { type: String, required: false, default: "a" }
   },
   setup(__props: any, { expose: __expose }) {
   __expose();
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap
index 5aa7d3e871f..d7ff70ad6ea 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`sfc reactive props destructure > aliasing 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
+"import { toDisplayString as _toDisplayString } from "vue"
 
 
 export default {
@@ -21,7 +21,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`sfc reactive props destructure > basic usage 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
+"import { toDisplayString as _toDisplayString } from "vue"
 
 
 export default {
@@ -40,7 +40,7 @@ return (_ctx, _cache) => {
 `;
 
 exports[`sfc reactive props destructure > computed static key 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
+"import { toDisplayString as _toDisplayString } from "vue"
 
 
 export default {
@@ -103,7 +103,7 @@ exports[`sfc reactive props destructure > default values w/ runtime declaration
 export default {
   props: /*#__PURE__*/_mergeDefaults(['foo', 'foo:bar'], {
   foo: 1,
-  \\"foo:bar\\": 'foo-bar'
+  "foo:bar": 'foo-bar'
 }),
   setup(__props) {
 
@@ -122,8 +122,8 @@ export default /*#__PURE__*/_defineComponent({
   props: {
     foo: { type: Number, required: true, default: 1 },
     bar: { type: Number, required: true, default: 2 },
-    \\"foo:bar\\": { type: String, required: true, default: 'foo-bar' },
-    \\"onUpdate:modelValue\\": { type: Function, required: true }
+    "foo:bar": { type: String, required: true, default: 'foo-bar' },
+    "onUpdate:modelValue": { type: Function, required: true }
   },
   setup(__props: any) {
 
@@ -232,7 +232,7 @@ return () => {}
 `;
 
 exports[`sfc reactive props destructure > multiple variable declarations 1`] = `
-"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
 
 export default {
@@ -242,7 +242,7 @@ export default {
       const bar = 'fish', hello = 'world'
       
 return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.foo) + \\" \\" + _toDisplayString(hello) + \\" \\" + _toDisplayString(bar), 1 /* TEXT */))
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString(__props.foo) + " " + _toDisplayString(hello) + " " + _toDisplayString(bar), 1 /* TEXT */))
 }
 }
 
@@ -267,7 +267,7 @@ return () => {}
 `;
 
 exports[`sfc reactive props destructure > non-identifier prop names 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
+"import { toDisplayString as _toDisplayString } from "vue"
 
 
 export default {
@@ -275,10 +275,10 @@ export default {
   setup(__props) {
 
       
-      let x = __props[\\"foo.bar\\"]
+      let x = __props["foo.bar"]
       
 return (_ctx, _cache) => {
-  return _toDisplayString(__props[\\"foo.bar\\"])
+  return _toDisplayString(__props["foo.bar"])
 }
 }
 
@@ -292,7 +292,7 @@ export default {
   props: ['foo', 'bar', 'baz'],
   setup(__props) {
 
-      const rest = _createPropsRestProxy(__props, [\\"foo\\",\\"bar\\"])
+      const rest = _createPropsRestProxy(__props, ["foo","bar"])
       
 return () => {}
 }
diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts
index 9fb72d7ad50..d57ad079d24 100644
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -90,7 +90,7 @@ describe('CSS vars injection', () => {
     expect(code).toMatchInlineSnapshot(`
       ".foo {
               color: var(--test-color);
-              font-size: var(--test-font\\\\.size);
+              font-size: var(--test-font\\.size);
 
               font-weight: var(--test-_φ);
               font-size: var(--test-1-字号);
diff --git a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
index a8ea08a5349..f25214f52f5 100644
--- a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
@@ -3,14 +3,14 @@ import { compile } from '../src'
 describe('ssr: components', () => {
   test('basic', () => {
     expect(compile(`<foo id="a" :prop="b" />`).code).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+      "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
+        const _component_foo = _resolveComponent("foo")
 
         _push(_ssrRenderComponent(_component_foo, _mergeProps({
-          id: \\"a\\",
+          id: "a",
           prop: _ctx.b
         }, _attrs), null, _parent))
       }"
@@ -20,11 +20,11 @@ describe('ssr: components', () => {
   // event listeners should still be passed
   test('event listeners', () => {
     expect(compile(`<foo @click="bar" />`).code).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+      "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
+        const _component_foo = _resolveComponent("foo")
 
         _push(_ssrRenderComponent(_component_foo, _mergeProps({ onClick: _ctx.bar }, _attrs), null, _parent))
       }"
@@ -34,21 +34,21 @@ describe('ssr: components', () => {
   test('dynamic component', () => {
     expect(compile(`<component is="foo" prop="b" />`).code)
       .toMatchInlineSnapshot(`
-        "const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require(\\"vue\\")
-        const { ssrRenderVNode: _ssrRenderVNode } = require(\\"vue/server-renderer\\")
+        "const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require("vue")
+        const { ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(\\"foo\\"), _mergeProps({ prop: \\"b\\" }, _attrs), null), _parent)
+          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent("foo"), _mergeProps({ prop: "b" }, _attrs), null), _parent)
         }"
       `)
 
     expect(compile(`<component :is="foo" prop="b" />`).code)
       .toMatchInlineSnapshot(`
-        "const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require(\\"vue\\")
-        const { ssrRenderVNode: _ssrRenderVNode } = require(\\"vue/server-renderer\\")
+        "const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require("vue")
+        const { ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: \\"b\\" }, _attrs), null), _parent)
+          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: "b" }, _attrs), null), _parent)
         }"
       `)
   })
@@ -56,11 +56,11 @@ describe('ssr: components', () => {
   describe('slots', () => {
     test('implicit default slot', () => {
       expect(compile(`<foo>hello<div/></foo>`).code).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, createTextVNode: _createTextVNode } = require(\\"vue\\")
-        const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, createTextVNode: _createTextVNode } = require("vue")
+        const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent(\\"foo\\")
+          const _component_foo = _resolveComponent("foo")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -68,8 +68,8 @@ describe('ssr: components', () => {
                 _push(\`hello<div\${_scopeId}></div>\`)
               } else {
                 return [
-                  _createTextVNode(\\"hello\\"),
-                  _createVNode(\\"div\\")
+                  _createTextVNode("hello"),
+                  _createVNode("div")
                 ]
               }
             }),
@@ -82,11 +82,11 @@ describe('ssr: components', () => {
     test('explicit default slot', () => {
       expect(compile(`<foo v-slot="{ msg }">{{ msg + outer }}</foo>`).code)
         .toMatchInlineSnapshot(`
-          "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require(\\"vue\\")
-          const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+          "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require("vue")
+          const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
           return function ssrRender(_ctx, _push, _parent, _attrs) {
-            const _component_foo = _resolveComponent(\\"foo\\")
+            const _component_foo = _resolveComponent("foo")
 
             _push(_ssrRenderComponent(_component_foo, _attrs, {
               default: _withCtx(({ msg }, _push, _parent, _scopeId) => {
@@ -116,11 +116,11 @@ describe('ssr: components', () => {
         <template v-slot:named>bar</template>
       </foo>`).code
       ).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require(\\"vue\\")
-        const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require("vue")
+        const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent(\\"foo\\")
+          const _component_foo = _resolveComponent("foo")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -128,7 +128,7 @@ describe('ssr: components', () => {
                 _push(\`foo\`)
               } else {
                 return [
-                  _createTextVNode(\\"foo\\")
+                  _createTextVNode("foo")
                 ]
               }
             }),
@@ -137,7 +137,7 @@ describe('ssr: components', () => {
                 _push(\`bar\`)
               } else {
                 return [
-                  _createTextVNode(\\"bar\\")
+                  _createTextVNode("bar")
                 ]
               }
             }),
@@ -153,26 +153,26 @@ describe('ssr: components', () => {
         <template v-slot:named v-if="ok">foo</template>
       </foo>`).code
       ).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createSlots: _createSlots } = require(\\"vue\\")
-        const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createSlots: _createSlots } = require("vue")
+        const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent(\\"foo\\")
+          const _component_foo = _resolveComponent("foo")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
             (_ctx.ok)
               ? {
-                  name: \\"named\\",
+                  name: "named",
                   fn: _withCtx((_, _push, _parent, _scopeId) => {
                     if (_push) {
                       _push(\`foo\`)
                     } else {
                       return [
-                        _createTextVNode(\\"foo\\")
+                        _createTextVNode("foo")
                       ]
                     }
                   }),
-                  key: \\"0\\"
+                  key: "0"
                 }
               : undefined
           ]), _parent))
@@ -189,11 +189,11 @@ describe('ssr: components', () => {
       expect(code).not.toMatch(`_ctx.index`)
       expect(code).toMatch(`_ctx.bar`)
       expect(code).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require(\\"vue\\")
-        const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require("vue")
+        const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent(\\"foo\\")
+          const _component_foo = _resolveComponent("foo")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
             _renderList(_ctx.names, (key, index) => {
@@ -230,11 +230,11 @@ describe('ssr: components', () => {
         </template>
       </foo>`).code
       ).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = require(\\"vue\\")
-        const { ssrRenderComponent: _ssrRenderComponent, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = require("vue")
+        const { ssrRenderComponent: _ssrRenderComponent, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent(\\"foo\\")
+          const _component_foo = _resolveComponent("foo")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, {
             foo: _withCtx(({ list }, _push, _parent, _scopeId) => {
@@ -251,12 +251,12 @@ describe('ssr: components', () => {
               } else {
                 return [
                   (_ctx.ok)
-                    ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
+                    ? (_openBlock(), _createBlock("div", { key: 0 }, [
                         (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
-                          return (_openBlock(), _createBlock(\\"span\\"))
+                          return (_openBlock(), _createBlock("span"))
                         }), 256 /* UNKEYED_FRAGMENT */))
                       ]))
-                    : _createCommentVNode(\\"v-if\\", true)
+                    : _createCommentVNode("v-if", true)
                 ]
               }
             }),
@@ -274,12 +274,12 @@ describe('ssr: components', () => {
               } else {
                 return [
                   ok
-                    ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
+                    ? (_openBlock(), _createBlock("div", { key: 0 }, [
                         (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (i) => {
-                          return (_openBlock(), _createBlock(\\"span\\"))
+                          return (_openBlock(), _createBlock("span"))
                         }), 256 /* UNKEYED_FRAGMENT */))
                       ]))
-                    : _createCommentVNode(\\"v-if\\", true)
+                    : _createCommentVNode("v-if", true)
                 ]
               }
             }),
@@ -294,12 +294,12 @@ describe('ssr: components', () => {
       const { code } = compile(`<foo><bar v-once /></foo>`)
       expect(code).not.toMatch(`_cache`)
       expect(compile(`<foo><bar v-once /></foo>`).code).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode } = require(\\"vue\\")
-        const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode } = require("vue")
+        const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent(\\"foo\\")
-          const _component_bar = _resolveComponent(\\"bar\\")
+          const _component_foo = _resolveComponent("foo")
+          const _component_bar = _resolveComponent("bar")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -321,7 +321,7 @@ describe('ssr: components', () => {
       test('transition', () => {
         expect(compile(`<transition><div/></transition>`).code)
           .toMatchInlineSnapshot(`
-            "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+            "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
             return function ssrRender(_ctx, _push, _parent, _attrs) {
               _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
@@ -332,11 +332,11 @@ describe('ssr: components', () => {
       test('keep-alive', () => {
         expect(compile(`<keep-alive><foo/></keep-alive>`).code)
           .toMatchInlineSnapshot(`
-            "const { resolveComponent: _resolveComponent } = require(\\"vue\\")
-            const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+            "const { resolveComponent: _resolveComponent } = require("vue")
+            const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
             return function ssrRender(_ctx, _push, _parent, _attrs) {
-              const _component_foo = _resolveComponent(\\"foo\\")
+              const _component_foo = _resolveComponent("foo")
 
               _push(_ssrRenderComponent(_component_foo, _attrs, null, _parent))
             }"
@@ -349,11 +349,11 @@ describe('ssr: components', () => {
           compile(`<foo><transition><div v-if="false"/></transition></foo>`)
             .code
         ).toMatchInlineSnapshot(`
-          "const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Transition: _Transition, createVNode: _createVNode } = require(\\"vue\\")
-          const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+          "const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Transition: _Transition, createVNode: _createVNode } = require("vue")
+          const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
           return function ssrRender(_ctx, _push, _parent, _attrs) {
-            const _component_foo = _resolveComponent(\\"foo\\")
+            const _component_foo = _resolveComponent("foo")
 
             _push(_ssrRenderComponent(_component_foo, _attrs, {
               default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -369,8 +369,8 @@ describe('ssr: components', () => {
                     _createVNode(_Transition, null, {
                       default: _withCtx(() => [
                         false
-                          ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
-                          : _createCommentVNode(\\"v-if\\", true)
+                          ? (_openBlock(), _createBlock("div", { key: 0 }))
+                          : _createCommentVNode("v-if", true)
                       ]),
                       _: 1 /* STABLE */
                     })
@@ -388,14 +388,14 @@ describe('ssr: components', () => {
   describe('custom directive', () => {
     test('basic', () => {
       expect(compile(`<foo v-xxx:x.y="z" />`).code).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, resolveDirective: _resolveDirective, mergeProps: _mergeProps } = require(\\"vue\\")
-        const { ssrGetDirectiveProps: _ssrGetDirectiveProps, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+        "const { resolveComponent: _resolveComponent, resolveDirective: _resolveDirective, mergeProps: _mergeProps } = require("vue")
+        const { ssrGetDirectiveProps: _ssrGetDirectiveProps, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent(\\"foo\\")
-          const _directive_xxx = _resolveDirective(\\"xxx\\")
+          const _component_foo = _resolveComponent("foo")
+          const _directive_xxx = _resolveDirective("xxx")
 
-          _push(_ssrRenderComponent(_component_foo, _mergeProps(_attrs, _ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, \\"x\\", { y: true })), null, _parent))
+          _push(_ssrRenderComponent(_component_foo, _mergeProps(_attrs, _ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, "x", { y: true })), null, _parent))
         }"
       `)
     })
diff --git a/packages/compiler-ssr/__tests__/ssrElement.spec.ts b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
index 65608bdd342..6e51826d9c9 100644
--- a/packages/compiler-ssr/__tests__/ssrElement.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
@@ -56,16 +56,16 @@ describe('ssr: element', () => {
     test('<textarea> with dynamic v-bind', () => {
       expect(compile(`<textarea v-bind="obj">fallback</textarea>`).code)
         .toMatchInlineSnapshot(`
-          "const { mergeProps: _mergeProps } = require(\\"vue\\")
-          const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+          "const { mergeProps: _mergeProps } = require("vue")
+          const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
           return function ssrRender(_ctx, _push, _parent, _attrs) {
             let _temp0
 
             _push(\`<textarea\${
-              _ssrRenderAttrs(_temp0 = _mergeProps(_ctx.obj, _attrs), \\"textarea\\")
+              _ssrRenderAttrs(_temp0 = _mergeProps(_ctx.obj, _attrs), "textarea")
             }>\${
-              _ssrInterpolate((\\"value\\" in _temp0) ? _temp0.value : \\"fallback\\")
+              _ssrInterpolate(("value" in _temp0) ? _temp0.value : "fallback")
             }</textarea>\`)
           }"
         `)
@@ -75,7 +75,7 @@ describe('ssr: element', () => {
       expect(
         compile(`<div>{{ hello }}<textarea v-bind="a"></textarea></div>`).code
       ).toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           let _temp0
@@ -85,9 +85,9 @@ describe('ssr: element', () => {
           }>\${
             _ssrInterpolate(_ctx.hello)
           }<textarea\${
-            _ssrRenderAttrs(_temp0 = _ctx.a, \\"textarea\\")
+            _ssrRenderAttrs(_temp0 = _ctx.a, "textarea")
           }>\${
-            _ssrInterpolate((\\"value\\" in _temp0) ? _temp0.value : \\"\\")
+            _ssrInterpolate(("value" in _temp0) ? _temp0.value : "")
           }</textarea></div>\`)
         }"
       `)
@@ -99,11 +99,11 @@ describe('ssr: element', () => {
           isCustomElement: () => true
         }).code
       ).toMatchInlineSnapshot(`
-        "const { mergeProps: _mergeProps } = require(\\"vue\\")
-        const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { mergeProps: _mergeProps } = require("vue")
+        const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          _push(\`<my-foo\${_ssrRenderAttrs(_mergeProps(_ctx.obj, _attrs), \\"my-foo\\")}></my-foo>\`)
+          _push(\`<my-foo\${_ssrRenderAttrs(_mergeProps(_ctx.obj, _attrs), "my-foo")}></my-foo>\`)
         }"
       `)
     })
@@ -113,7 +113,7 @@ describe('ssr: element', () => {
     test('static attrs', () => {
       expect(
         getCompiledString(`<div id="foo" class="bar"></div>`)
-      ).toMatchInlineSnapshot('"`<div id=\\"foo\\" class=\\"bar\\"></div>`"')
+      ).toMatchInlineSnapshot(`"\`<div id="foo" class="bar"></div>\`"`)
     })
 
     test('ignore static key/ref', () => {
@@ -131,53 +131,53 @@ describe('ssr: element', () => {
     test('v-bind:class', () => {
       expect(getCompiledString(`<div id="foo" :class="bar"></div>`))
         .toMatchInlineSnapshot(`
-          "\`<div id=\\"foo\\" class=\\"\${
+          "\`<div id="foo" class="\${
               _ssrRenderClass(_ctx.bar)
-            }\\"></div>\`"
+            }"></div>\`"
         `)
     })
 
     test('static class + v-bind:class', () => {
       expect(getCompiledString(`<div class="foo" :class="bar"></div>`))
         .toMatchInlineSnapshot(`
-          "\`<div class=\\"\${
-              _ssrRenderClass([_ctx.bar, \\"foo\\"])
-            }\\"></div>\`"
+          "\`<div class="\${
+              _ssrRenderClass([_ctx.bar, "foo"])
+            }"></div>\`"
         `)
     })
 
     test('v-bind:class + static class', () => {
       expect(getCompiledString(`<div :class="bar" class="foo"></div>`))
         .toMatchInlineSnapshot(`
-          "\`<div class=\\"\${
-              _ssrRenderClass([_ctx.bar, \\"foo\\"])
-            }\\"></div>\`"
+          "\`<div class="\${
+              _ssrRenderClass([_ctx.bar, "foo"])
+            }"></div>\`"
         `)
     })
 
     test('v-bind:style', () => {
       expect(getCompiledString(`<div id="foo" :style="bar"></div>`))
         .toMatchInlineSnapshot(`
-          "\`<div id=\\"foo\\" style=\\"\${
+          "\`<div id="foo" style="\${
               _ssrRenderStyle(_ctx.bar)
-            }\\"></div>\`"
+            }"></div>\`"
         `)
     })
 
     test('static style + v-bind:style', () => {
       expect(getCompiledString(`<div style="color:red;" :style="bar"></div>`))
         .toMatchInlineSnapshot(`
-          "\`<div style=\\"\${
-              _ssrRenderStyle([{\\"color\\":\\"red\\"}, _ctx.bar])
-            }\\"></div>\`"
+          "\`<div style="\${
+              _ssrRenderStyle([{"color":"red"}, _ctx.bar])
+            }"></div>\`"
         `)
     })
 
     test('v-bind:arg (boolean)', () => {
       expect(getCompiledString(`<input type="checkbox" :checked="checked">`))
         .toMatchInlineSnapshot(`
-          "\`<input type=\\"checkbox\\"\${
-              (_ssrIncludeBooleanAttr(_ctx.checked)) ? \\" checked\\" : \\"\\"
+          "\`<input type="checkbox"\${
+              (_ssrIncludeBooleanAttr(_ctx.checked)) ? " checked" : ""
             }>\`"
         `)
     })
@@ -186,8 +186,8 @@ describe('ssr: element', () => {
       expect(getCompiledString(`<div :id="id" class="bar"></div>`))
         .toMatchInlineSnapshot(`
           "\`<div\${
-              _ssrRenderAttr(\\"id\\", _ctx.id)
-            } class=\\"bar\\"></div>\`"
+              _ssrRenderAttr("id", _ctx.id)
+            } class="bar"></div>\`"
         `)
     })
 
@@ -195,7 +195,7 @@ describe('ssr: element', () => {
       expect(getCompiledString(`<div v-bind:[key]="value"></div>`))
         .toMatchInlineSnapshot(`
           "\`<div\${
-              _ssrRenderAttrs({ [_ctx.key || \\"\\"]: _ctx.value })
+              _ssrRenderAttrs({ [_ctx.key || ""]: _ctx.value })
             }></div>\`"
         `)
 
@@ -203,8 +203,8 @@ describe('ssr: element', () => {
         .toMatchInlineSnapshot(`
           "\`<div\${
               _ssrRenderAttrs({
-                class: \\"foo\\",
-                [_ctx.key || \\"\\"]: _ctx.value
+                class: "foo",
+                [_ctx.key || ""]: _ctx.value
               })
             }></div>\`"
         `)
@@ -214,7 +214,7 @@ describe('ssr: element', () => {
           "\`<div\${
               _ssrRenderAttrs({
                 id: _ctx.id,
-                [_ctx.key || \\"\\"]: _ctx.value
+                [_ctx.key || ""]: _ctx.value
               })
             }></div>\`"
         `)
@@ -231,7 +231,7 @@ describe('ssr: element', () => {
       expect(getCompiledString(`<div class="foo" v-bind="obj"></div>`))
         .toMatchInlineSnapshot(`
           "\`<div\${
-              _ssrRenderAttrs(_mergeProps({ class: \\"foo\\" }, _ctx.obj))
+              _ssrRenderAttrs(_mergeProps({ class: "foo" }, _ctx.obj))
             }></div>\`"
         `)
 
@@ -246,7 +246,7 @@ describe('ssr: element', () => {
       expect(getCompiledString(`<div :[key]="id" v-bind="obj"></div>`))
         .toMatchInlineSnapshot(`
           "\`<div\${
-              _ssrRenderAttrs(_mergeProps({ [_ctx.key || \\"\\"]: _ctx.id }, _ctx.obj))
+              _ssrRenderAttrs(_mergeProps({ [_ctx.key || ""]: _ctx.id }, _ctx.obj))
             }></div>\`"
         `)
 
@@ -255,7 +255,7 @@ describe('ssr: element', () => {
         .toMatchInlineSnapshot(`
           "\`<div\${
               _ssrRenderAttrs(_mergeProps({
-                class: [\\"a\\", _ctx.b]
+                class: ["a", _ctx.b]
               }, _ctx.obj))
             }></div>\`"
         `)
@@ -268,7 +268,7 @@ describe('ssr: element', () => {
       ).toMatchInlineSnapshot(`
         "\`<div\${
             _ssrRenderAttrs(_mergeProps({
-              style: [{\\"color\\":\\"red\\"}, _ctx.b]
+              style: [{"color":"red"}, _ctx.b]
             }, _ctx.obj))
           }></div>\`"
       `)
@@ -277,10 +277,10 @@ describe('ssr: element', () => {
     test('should ignore v-on', () => {
       expect(
         getCompiledString(`<div id="foo" @click="bar"/>`)
-      ).toMatchInlineSnapshot('"`<div id=\\"foo\\"></div>`"')
+      ).toMatchInlineSnapshot(`"\`<div id="foo"></div>\`"`)
       expect(
         getCompiledString(`<div id="foo" v-on="bar"/>`)
-      ).toMatchInlineSnapshot('"`<div id=\\"foo\\"></div>`"')
+      ).toMatchInlineSnapshot(`"\`<div id="foo"></div>\`"`)
       expect(getCompiledString(`<div v-bind="foo" v-on="bar"/>`))
         .toMatchInlineSnapshot(`
         "\`<div\${
@@ -292,7 +292,7 @@ describe('ssr: element', () => {
     test('custom dir', () => {
       expect(getCompiledString(`<div v-xxx:x.y="z" />`)).toMatchInlineSnapshot(`
         "\`<div\${
-            _ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, \\"x\\", { y: true }))
+            _ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, "x", { y: true }))
           }></div>\`"
       `)
     })
@@ -301,7 +301,7 @@ describe('ssr: element', () => {
       expect(getCompiledString(`<div class="foo" v-xxx />`))
         .toMatchInlineSnapshot(`
           "\`<div\${
-              _ssrRenderAttrs(_mergeProps({ class: \\"foo\\" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
+              _ssrRenderAttrs(_mergeProps({ class: "foo" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
             }></div>\`"
         `)
     })
@@ -333,8 +333,8 @@ describe('ssr: element', () => {
       ).toMatchInlineSnapshot(`
         "\`<div\${
             _ssrRenderAttrs(_mergeProps(_ctx.x, {
-              class: \\"foo\\",
-              title: \\"bar\\"
+              class: "foo",
+              title: "bar"
             }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
           }></div>\`"
       `)
diff --git a/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts b/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts
index 6032dd29e74..7b3d1962c3e 100644
--- a/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts
@@ -3,7 +3,7 @@ import { compile } from '../src'
 describe('ssr: attrs fallthrough', () => {
   test('basic', () => {
     expect(compile(`<div/>`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
@@ -13,7 +13,7 @@ describe('ssr: attrs fallthrough', () => {
 
   test('with comments', () => {
     expect(compile(`<!--!--><div/>`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[--><!--!--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
@@ -40,7 +40,7 @@ describe('ssr: attrs fallthrough', () => {
   test('fallthrough component content (root with comments)', () => {
     expect(compile(`<!--root--><transition><div/></transition>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<!--[--><!--root--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
diff --git a/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
index 0e29fb7e445..2ed04a16fe5 100644
--- a/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
@@ -8,8 +8,8 @@ describe('ssr: inject <style vars>', () => {
         ssrCssVars: `{ color }`
       }).code
     ).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _cssVars = { style: { color: _ctx.color }}
@@ -24,7 +24,7 @@ describe('ssr: inject <style vars>', () => {
         ssrCssVars: `{ color }`
       }).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _cssVars = { style: { color: _ctx.color }}
@@ -43,11 +43,11 @@ describe('ssr: inject <style vars>', () => {
         ssrCssVars: `{ color }`
       }).code
     ).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+      "const { resolveComponent: _resolveComponent } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
+        const _component_foo = _resolveComponent("foo")
 
         const _cssVars = { style: { color: _ctx.color }}
         _push(\`<!--[--><div\${_ssrRenderAttrs(_cssVars)}></div>\`)
@@ -63,8 +63,8 @@ describe('ssr: inject <style vars>', () => {
         ssrCssVars: `{ color }`
       }).code
     ).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _cssVars = { style: { color: _ctx.color }}
@@ -95,8 +95,8 @@ describe('ssr: inject <style vars>', () => {
         }
       ).code
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
+      "const { withCtx: _withCtx } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _cssVars = { style: { color: _ctx.color }}
@@ -122,7 +122,7 @@ describe('ssr: inject <style vars>', () => {
 
     expect(result.code).toMatchInlineSnapshot(`
       "(_ctx, _push, _parent, _attrs) => {
-        const _cssVars = { style: { \\"--hash\\": (_unref(dynamic)) }}
+        const _cssVars = { style: { "--hash": (_unref(dynamic)) }}
         _push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
       }"
     `)
diff --git a/packages/compiler-ssr/__tests__/ssrPortal.spec.ts b/packages/compiler-ssr/__tests__/ssrPortal.spec.ts
index 8f3dda5a60d..ac02c884220 100644
--- a/packages/compiler-ssr/__tests__/ssrPortal.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrPortal.spec.ts
@@ -4,7 +4,7 @@ describe('ssr compile: teleport', () => {
   test('should work', () => {
     expect(compile(`<teleport :to="target"><div/></teleport>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _ssrRenderTeleport(_push, (_push) => {
@@ -17,7 +17,7 @@ describe('ssr compile: teleport', () => {
   test('disabled prop handling', () => {
     expect(compile(`<teleport :to="target" disabled><div/></teleport>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _ssrRenderTeleport(_push, (_push) => {
@@ -29,7 +29,7 @@ describe('ssr compile: teleport', () => {
     expect(
       compile(`<teleport :to="target" :disabled="foo"><div/></teleport>`).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _ssrRenderTeleport(_push, (_push) => {
diff --git a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
index 1be6a2c180c..7841e571e82 100644
--- a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
@@ -10,7 +10,7 @@ describe('ssr: scopeId', () => {
         mode: 'module'
       }).code
     ).toMatchInlineSnapshot(`
-      "import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\"
+      "import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${_ssrRenderAttrs(_attrs)} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
@@ -26,11 +26,11 @@ describe('ssr: scopeId', () => {
         mode: 'module'
       }).code
     ).toMatchInlineSnapshot(`
-      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from \\"vue\\"
-      import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
+      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from "vue"
+      import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
+        const _component_foo = _resolveComponent("foo")
 
         _push(_ssrRenderComponent(_component_foo, _attrs, {
           default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -38,7 +38,7 @@ describe('ssr: scopeId', () => {
               _push(\`foo\`)
             } else {
               return [
-                _createTextVNode(\\"foo\\")
+                _createTextVNode("foo")
               ]
             }
           }),
@@ -55,11 +55,11 @@ describe('ssr: scopeId', () => {
         mode: 'module'
       }).code
     ).toMatchInlineSnapshot(`
-      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
-      import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
+      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
+      import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
+        const _component_foo = _resolveComponent("foo")
 
         _push(_ssrRenderComponent(_component_foo, _attrs, {
           default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -67,7 +67,7 @@ describe('ssr: scopeId', () => {
               _push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`)
             } else {
               return [
-                _createVNode(\\"span\\", null, \\"hello\\")
+                _createVNode("span", null, "hello")
               ]
             }
           }),
@@ -84,12 +84,12 @@ describe('ssr: scopeId', () => {
         mode: 'module'
       }).code
     ).toMatchInlineSnapshot(`
-      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
-      import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
+      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
+      import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
-        const _component_bar = _resolveComponent(\\"bar\\")
+        const _component_foo = _resolveComponent("foo")
+        const _component_bar = _resolveComponent("bar")
 
         _push(_ssrRenderComponent(_component_foo, _attrs, {
           default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -101,7 +101,7 @@ describe('ssr: scopeId', () => {
                     _push(\`<span data-v-xxxxxxx\${_scopeId}></span>\`)
                   } else {
                     return [
-                      _createVNode(\\"span\\")
+                      _createVNode("span")
                     ]
                   }
                 }),
@@ -109,10 +109,10 @@ describe('ssr: scopeId', () => {
               }, _parent, _scopeId))
             } else {
               return [
-                _createVNode(\\"span\\", null, \\"hello\\"),
+                _createVNode("span", null, "hello"),
                 _createVNode(_component_bar, null, {
                   default: _withCtx(() => [
-                    _createVNode(\\"span\\")
+                    _createVNode("span")
                   ]),
                   _: 1 /* STABLE */
                 })
@@ -136,11 +136,11 @@ describe('ssr: scopeId', () => {
         }
       ).code
     ).toMatchInlineSnapshot(`
-      "import { mergeProps as _mergeProps } from \\"vue\\"
-      import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\"
+      "import { mergeProps as _mergeProps } from "vue"
+      import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<div\${_ssrRenderAttrs(_mergeProps({ class: \\"red\\" }, _attrs))} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
+        _push(\`<div\${_ssrRenderAttrs(_mergeProps({ class: "red" }, _attrs))} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
       }"
     `)
 
@@ -154,14 +154,14 @@ describe('ssr: scopeId', () => {
         }
       ).code
     ).toMatchInlineSnapshot(`
-      "import { mergeProps as _mergeProps } from \\"vue\\"
-      import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\"
+      "import { mergeProps as _mergeProps } from "vue"
+      import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<\${
           _ctx.someTag
         }\${
-          _ssrRenderAttrs(_mergeProps({ class: \\"red\\" }, _attrs))
+          _ssrRenderAttrs(_mergeProps({ class: "red" }, _attrs))
         } data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></\${
           _ctx.someTag
         }>\`)
diff --git a/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts b/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
index f1a5945c1b2..a3ed5b88167 100644
--- a/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
@@ -4,27 +4,27 @@ import { ssrHelpers, SSR_RENDER_SLOT_INNER } from '../src/runtimeHelpers'
 describe('ssr: <slot>', () => {
   test('basic', () => {
     expect(compile(`<slot/>`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
+        _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
       }"
     `)
   })
 
   test('with name', () => {
     expect(compile(`<slot name="foo" />`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlot(_ctx.$slots, \\"foo\\", {}, null, _push, _parent)
+        _ssrRenderSlot(_ctx.$slots, "foo", {}, null, _push, _parent)
       }"
     `)
   })
 
   test('with dynamic name', () => {
     expect(compile(`<slot :name="bar.baz" />`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _ssrRenderSlot(_ctx.$slots, _ctx.bar.baz, {}, null, _push, _parent)
@@ -35,12 +35,12 @@ describe('ssr: <slot>', () => {
   test('with props', () => {
     expect(compile(`<slot name="foo" :p="1" bar="2" />`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          _ssrRenderSlot(_ctx.$slots, \\"foo\\", {
+          _ssrRenderSlot(_ctx.$slots, "foo", {
             p: 1,
-            bar: \\"2\\"
+            bar: "2"
           }, null, _push, _parent)
         }"
       `)
@@ -49,10 +49,10 @@ describe('ssr: <slot>', () => {
   test('with fallback', () => {
     expect(compile(`<slot>some {{ fallback }} content</slot>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderSlot: _ssrRenderSlot, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderSlot: _ssrRenderSlot, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, () => {
+          _ssrRenderSlot(_ctx.$slots, "default", {}, () => {
             _push(\`some \${_ssrInterpolate(_ctx.fallback)} content\`)
           }, _push, _parent)
         }"
@@ -65,10 +65,10 @@ describe('ssr: <slot>', () => {
         scopeId: 'hello'
       }).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\")
+        _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, "hello-s")
       }"
     `)
   })
@@ -80,10 +80,10 @@ describe('ssr: <slot>', () => {
         slotted: false
       }).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
+        _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
       }"
     `)
   })
@@ -94,19 +94,19 @@ describe('ssr: <slot>', () => {
         scopeId: 'hello'
       }).code
     ).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderSlot: _renderSlot } = require(\\"vue\\")
-      const { ssrRenderSlot: _ssrRenderSlot, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+      "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderSlot: _renderSlot } = require("vue")
+      const { ssrRenderSlot: _ssrRenderSlot, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_Comp = _resolveComponent(\\"Comp\\")
+        const _component_Comp = _resolveComponent("Comp")
 
         _push(_ssrRenderComponent(_component_Comp, _attrs, {
           default: _withCtx((_, _push, _parent, _scopeId) => {
             if (_push) {
-              _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\" + _scopeId)
+              _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, "hello-s" + _scopeId)
             } else {
               return [
-                _renderSlot(_ctx.$slots, \\"default\\")
+                _renderSlot(_ctx.$slots, "default")
               ]
             }
           }),
@@ -120,10 +120,10 @@ describe('ssr: <slot>', () => {
     const { code } = compile(`<transition><slot/></transition>`)
     expect(code).toMatch(ssrHelpers[SSR_RENDER_SLOT_INNER])
     expect(code).toMatchInlineSnapshot(`
-      "const { ssrRenderSlotInner: _ssrRenderSlotInner } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlotInner: _ssrRenderSlotInner } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlotInner(_ctx.$slots, \\"default\\", {}, null, _push, _parent, null, true)
+        _ssrRenderSlotInner(_ctx.$slots, "default", {}, null, _push, _parent, null, true)
       }"
     `)
   })
diff --git a/packages/compiler-ssr/__tests__/ssrSuspense.spec.ts b/packages/compiler-ssr/__tests__/ssrSuspense.spec.ts
index a4d34801956..2e425362b56 100644
--- a/packages/compiler-ssr/__tests__/ssrSuspense.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrSuspense.spec.ts
@@ -3,11 +3,11 @@ import { compile } from '../src'
 describe('ssr compile: suspense', () => {
   test('implicit default', () => {
     expect(compile(`<suspense><foo/></suspense>`).code).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
-      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
+      "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
+        const _component_foo = _resolveComponent("foo")
 
         _ssrRenderSuspense(_push, {
           default: () => {
@@ -30,11 +30,11 @@ describe('ssr compile: suspense', () => {
       </template>
     </suspense>`).code
     ).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
-      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
+      "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require("vue")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent(\\"foo\\")
+        const _component_foo = _resolveComponent("foo")
 
         _ssrRenderSuspense(_push, {
           default: () => {
diff --git a/packages/compiler-ssr/__tests__/ssrText.spec.ts b/packages/compiler-ssr/__tests__/ssrText.spec.ts
index 37cf2df3760..54f9827a34e 100644
--- a/packages/compiler-ssr/__tests__/ssrText.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrText.spec.ts
@@ -8,7 +8,7 @@ describe('ssr: text', () => {
 
   test('static text with template string special chars', () => {
     expect(getCompiledString(`\`\${foo}\``)).toMatchInlineSnapshot(
-      '"`\\\\`\\\\${foo}\\\\``"'
+      `"\`\\\`\\\${foo}\\\`\`"`
     )
   })
 
@@ -17,7 +17,7 @@ describe('ssr: text', () => {
     // snapshot -> inline snapshot goes through two escapes
     // so that makes a total of 3 * 2 * 2 = 12 back slashes
     expect(getCompiledString(`\\$foo`)).toMatchInlineSnapshot(
-      '"`\\\\\\\\\\\\$foo`"'
+      `"\`\\\\\\$foo\`"`
     )
   })
 
@@ -43,7 +43,7 @@ describe('ssr: text', () => {
 
   test('interpolation', () => {
     expect(compile(`foo {{ bar }} baz`).code).toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+      "const { ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`foo \${_ssrInterpolate(_ctx.bar)} baz\`)
@@ -56,7 +56,7 @@ describe('ssr: text', () => {
       compile(`<div><span>{{ foo }} bar</span><span>baz {{ qux }}</span></div>`)
         .code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
diff --git a/packages/compiler-ssr/__tests__/ssrTransition.spec.ts b/packages/compiler-ssr/__tests__/ssrTransition.spec.ts
index 319b3902239..760393f169c 100644
--- a/packages/compiler-ssr/__tests__/ssrTransition.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrTransition.spec.ts
@@ -4,22 +4,22 @@ describe('transition', () => {
   test('basic', () => {
     expect(compile(`<transition><div>foo</div></transition>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<div\${_ssrRenderAttrs(_attrs)}>foo</div>\`)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<div\${_ssrRenderAttrs(_attrs)}>foo</div>\`)
+        }"
+      `)
   })
 
   test('with appear', () => {
     expect(compile(`<transition appear><div>foo</div></transition>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<template><div\${_ssrRenderAttrs(_attrs)}>foo</div></template>\`)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<template><div\${_ssrRenderAttrs(_attrs)}>foo</div></template>\`)
+        }"
+      `)
   })
 })
diff --git a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
index 2a3b6d3b4d4..3c53da4349f 100644
--- a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
@@ -8,7 +8,7 @@ describe('transition-group', () => {
       compile(`<transition-group><div v-for="i in list"/></transition-group>`)
         .code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -26,7 +26,7 @@ describe('transition-group', () => {
         `<transition-group tag="ul"><div v-for="i in list"/></transition-group>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<ul\${_ssrRenderAttrs(_attrs)}>\`)
@@ -44,7 +44,7 @@ describe('transition-group', () => {
         `<transition-group :tag="someTag"><div v-for="i in list"/></transition-group>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<\${
@@ -70,7 +70,7 @@ describe('transition-group', () => {
             </transition-group>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -97,13 +97,13 @@ describe('transition-group', () => {
         </transition-group>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<ul\${_ssrRenderAttrs(_mergeProps({
-          class: \\"red\\",
-          id: \\"ok\\"
+          class: "red",
+          id: "ok"
         }, _attrs))}></ul>\`)
       }"
     `)
diff --git a/packages/compiler-ssr/__tests__/ssrVFor.spec.ts b/packages/compiler-ssr/__tests__/ssrVFor.spec.ts
index f34aa03d2a7..69c4d95e56a 100644
--- a/packages/compiler-ssr/__tests__/ssrVFor.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVFor.spec.ts
@@ -3,7 +3,7 @@ import { compile } from '../src'
 describe('ssr: v-for', () => {
   test('basic', () => {
     expect(compile(`<div v-for="i in list" />`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -18,7 +18,7 @@ describe('ssr: v-for', () => {
   test('nested content', () => {
     expect(compile(`<div v-for="i in list">foo<span>bar</span></div>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<!--[-->\`)
@@ -38,7 +38,7 @@ describe('ssr: v-for', () => {
           `</div>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -61,7 +61,7 @@ describe('ssr: v-for', () => {
   test('template v-for (text)', () => {
     expect(compile(`<template v-for="i in list">{{ i }}</template>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+        "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<!--[-->\`)
@@ -78,7 +78,7 @@ describe('ssr: v-for', () => {
       compile(`<template v-for="i in list"><span>{{ i }}</span></template>`)
         .code
     ).toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -96,7 +96,7 @@ describe('ssr: v-for', () => {
         `<template v-for="i in list"><span>{{ i }}</span><span>{{ i + 1 }}</span></template>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -120,7 +120,7 @@ describe('ssr: v-for', () => {
     expect(code).not.toMatch(`_ctx.foo`)
     expect(code).not.toMatch(`_ctx.index`)
     expect(code).toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
diff --git a/packages/compiler-ssr/__tests__/ssrVIf.spec.ts b/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
index f9d81bcca20..e0e3a4fc468 100644
--- a/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
@@ -3,7 +3,7 @@ import { compile } from '../src'
 describe('ssr: v-if', () => {
   test('basic', () => {
     expect(compile(`<div v-if="foo"></div>`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.foo) {
@@ -18,7 +18,7 @@ describe('ssr: v-if', () => {
   test('with nested content', () => {
     expect(compile(`<div v-if="foo">hello<span>ok</span></div>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
@@ -33,7 +33,7 @@ describe('ssr: v-if', () => {
   test('v-if + v-else', () => {
     expect(compile(`<div v-if="foo"/><span v-else/>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
@@ -48,7 +48,7 @@ describe('ssr: v-if', () => {
   test('v-if + v-else-if', () => {
     expect(compile(`<div v-if="foo"/><span v-else-if="bar"/>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
@@ -65,7 +65,7 @@ describe('ssr: v-if', () => {
   test('v-if + v-else-if + v-else', () => {
     expect(compile(`<div v-if="foo"/><span v-else-if="bar"/><p v-else/>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
@@ -97,7 +97,7 @@ describe('ssr: v-if', () => {
     // single element should not wrap with fragment
     expect(compile(`<template v-if="foo"><div>hi</div></template>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
@@ -128,7 +128,7 @@ describe('ssr: v-if', () => {
     expect(
       compile(`<template v-if="foo"><div v-for="i in list"/></template>`).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.foo) {
@@ -150,7 +150,7 @@ describe('ssr: v-if', () => {
         `<template v-if="foo"><div>hi</div><div>ho</div></template><div v-else/>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.foo) {
diff --git a/packages/compiler-ssr/__tests__/ssrVModel.spec.ts b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
index f28c38d4026..b1a2ff8936d 100644
--- a/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
@@ -8,26 +8,26 @@ describe('ssr: v-model', () => {
   test('<input> (text types)', () => {
     expect(compileWithWrapper(`<input v-model="bar">`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<div\${
             _ssrRenderAttrs(_attrs)
           }><input\${
-            _ssrRenderAttr(\\"value\\", _ctx.bar)
+            _ssrRenderAttr("value", _ctx.bar)
           }></div>\`)
         }"
       `)
 
     expect(compileWithWrapper(`<input type="email" v-model="bar">`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<div\${
             _ssrRenderAttrs(_attrs)
-          }><input type=\\"email\\"\${
-            _ssrRenderAttr(\\"value\\", _ctx.bar)
+          }><input type="email"\${
+            _ssrRenderAttr("value", _ctx.bar)
           }></div>\`)
         }"
       `)
@@ -39,15 +39,15 @@ describe('ssr: v-model', () => {
         `<select v-model="model"><option value="1"></option></select>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><select><option value=\\"1\\"\${
+        }><select><option value="1"\${
           (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
-            ? _ssrLooseContain(_ctx.model, \\"1\\")
-            : _ssrLooseEqual(_ctx.model, \\"1\\"))) ? \\" selected\\" : \\"\\"
+            ? _ssrLooseContain(_ctx.model, "1")
+            : _ssrLooseEqual(_ctx.model, "1"))) ? " selected" : ""
         }></option></select></div>\`)
       }"
     `)
@@ -57,15 +57,15 @@ describe('ssr: v-model', () => {
         `<select multiple v-model="model"><option value="1" selected></option><option value="2"></option></select>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><select multiple><option value=\\"1\\" selected></option><option value=\\"2\\"\${
+        }><select multiple><option value="1" selected></option><option value="2"\${
           (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
-            ? _ssrLooseContain(_ctx.model, \\"2\\")
-            : _ssrLooseEqual(_ctx.model, \\"2\\"))) ? \\" selected\\" : \\"\\"
+            ? _ssrLooseContain(_ctx.model, "2")
+            : _ssrLooseEqual(_ctx.model, "2"))) ? " selected" : ""
         }></option></select></div>\`)
       }"
     `)
@@ -74,11 +74,11 @@ describe('ssr: v-model', () => {
       compileWithWrapper(`<select multiple v-model="model"><slot/></select>`)
         .code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple>\`)
-        _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
+        _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
         _push(\`</select></div>\`)
       }"
     `)
@@ -91,15 +91,15 @@ describe('ssr: v-model', () => {
           </optgroup>
         </select>`).code
     ).toMatchInlineSnapshot(`
-      "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><select multiple><optgroup label=\\"foo\\"><option value=\\"bar\\"\${
+        }><select multiple><optgroup label="foo"><option value="bar"\${
           (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
-            ? _ssrLooseContain(_ctx.model, \\"bar\\")
-            : _ssrLooseEqual(_ctx.model, \\"bar\\"))) ? \\" selected\\" : \\"\\"
+            ? _ssrLooseContain(_ctx.model, "bar")
+            : _ssrLooseEqual(_ctx.model, "bar"))) ? " selected" : ""
         }>bar</option></optgroup></select></div>\`)
       }"
     `)
@@ -112,11 +112,11 @@ describe('ssr: v-model', () => {
           </optgroup>
         </select>`).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple><optgroup label=\\"foo\\">\`)
-        _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
+        _push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple><optgroup label="foo">\`)
+        _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
         _push(\`</optgroup></select></div>\`)
       }"
     `)
@@ -126,13 +126,13 @@ describe('ssr: v-model', () => {
     expect(
       compileWithWrapper(`<input type="radio" value="foo" v-model="bar">`).code
     ).toMatchInlineSnapshot(`
-      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><input type=\\"radio\\" value=\\"foo\\"\${
-          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.bar, \\"foo\\"))) ? \\" checked\\" : \\"\\"
+        }><input type="radio" value="foo"\${
+          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.bar, "foo"))) ? " checked" : ""
         }></div>\`)
       }"
     `)
@@ -141,15 +141,15 @@ describe('ssr: v-model', () => {
   test('<input type="checkbox">', () => {
     expect(compileWithWrapper(`<input type="checkbox" v-model="bar">`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<div\${
             _ssrRenderAttrs(_attrs)
-          }><input type=\\"checkbox\\"\${
+          }><input type="checkbox"\${
             (_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
               ? _ssrLooseContain(_ctx.bar, null)
-              : _ctx.bar)) ? \\" checked\\" : \\"\\"
+              : _ctx.bar)) ? " checked" : ""
           }></div>\`)
         }"
       `)
@@ -158,15 +158,15 @@ describe('ssr: v-model', () => {
       compileWithWrapper(`<input type="checkbox" value="foo" v-model="bar">`)
         .code
     ).toMatchInlineSnapshot(`
-      "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><input type=\\"checkbox\\" value=\\"foo\\"\${
+        }><input type="checkbox" value="foo"\${
           (_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
-            ? _ssrLooseContain(_ctx.bar, \\"foo\\")
-            : _ctx.bar)) ? \\" checked\\" : \\"\\"
+            ? _ssrLooseContain(_ctx.bar, "foo")
+            : _ctx.bar)) ? " checked" : ""
         }></div>\`)
       }"
     `)
@@ -176,13 +176,13 @@ describe('ssr: v-model', () => {
         `<input type="checkbox" :true-value="foo" :false-value="bar" v-model="baz">`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><input type=\\"checkbox\\"\${
-          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, _ctx.foo))) ? \\" checked\\" : \\"\\"
+        }><input type="checkbox"\${
+          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, _ctx.foo))) ? " checked" : ""
         }></div>\`)
       }"
     `)
@@ -192,13 +192,13 @@ describe('ssr: v-model', () => {
         `<input type="checkbox" true-value="foo" false-value="bar" v-model="baz">`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><input type=\\"checkbox\\"\${
-          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, \\"foo\\"))) ? \\" checked\\" : \\"\\"
+        }><input type="checkbox"\${
+          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, "foo"))) ? " checked" : ""
         }></div>\`)
       }"
     `)
@@ -207,7 +207,7 @@ describe('ssr: v-model', () => {
   test('<textarea>', () => {
     expect(compileWithWrapper(`<textarea v-model="foo">bar</textarea>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<div\${
@@ -222,13 +222,13 @@ describe('ssr: v-model', () => {
   test('<input :type="x">', () => {
     expect(compileWithWrapper(`<input :type="x" v-model="foo">`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<div\${
             _ssrRenderAttrs(_attrs)
           }><input\${
-            _ssrRenderAttr(\\"type\\", _ctx.x)
+            _ssrRenderAttr("type", _ctx.x)
           }\${
             _ssrRenderDynamicModel(_ctx.x, _ctx.foo, null)
           }></div>\`)
@@ -238,33 +238,33 @@ describe('ssr: v-model', () => {
     expect(
       compileWithWrapper(`<input :type="x" v-model="foo" value="bar">`).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
         }><input\${
-          _ssrRenderAttr(\\"type\\", _ctx.x)
+          _ssrRenderAttr("type", _ctx.x)
         }\${
-          _ssrRenderDynamicModel(_ctx.x, _ctx.foo, \\"bar\\")
-        } value=\\"bar\\"></div>\`)
+          _ssrRenderDynamicModel(_ctx.x, _ctx.foo, "bar")
+        } value="bar"></div>\`)
       }"
     `)
 
     expect(
       compileWithWrapper(`<input :type="x" v-model="foo" :value="bar">`).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
         }><input\${
-          _ssrRenderAttr(\\"type\\", _ctx.x)
+          _ssrRenderAttr("type", _ctx.x)
         }\${
           _ssrRenderDynamicModel(_ctx.x, _ctx.foo, _ctx.bar)
         }\${
-          _ssrRenderAttr(\\"value\\", _ctx.bar)
+          _ssrRenderAttr("value", _ctx.bar)
         }></div>\`)
       }"
     `)
@@ -273,8 +273,8 @@ describe('ssr: v-model', () => {
   test('<input v-bind="obj">', () => {
     expect(compileWithWrapper(`<input v-bind="obj" v-model="foo">`).code)
       .toMatchInlineSnapshot(`
-        "const { mergeProps: _mergeProps } = require(\\"vue\\")
-        const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require(\\"vue/server-renderer\\")
+        "const { mergeProps: _mergeProps } = require("vue")
+        const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           let _temp0
@@ -291,8 +291,8 @@ describe('ssr: v-model', () => {
       compileWithWrapper(`<input id="x" v-bind="obj" v-model="foo" class="y">`)
         .code
     ).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require(\\"vue/server-renderer\\")
+      "const { mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         let _temp0
@@ -300,7 +300,7 @@ describe('ssr: v-model', () => {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
         }><input\${
-          _ssrRenderAttrs((_temp0 = _mergeProps({ id: \\"x\\" }, _ctx.obj, { class: \\"y\\" }), _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))
+          _ssrRenderAttrs((_temp0 = _mergeProps({ id: "x" }, _ctx.obj, { class: "y" }), _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))
         }></div>\`)
       }"
     `)
diff --git a/packages/compiler-ssr/__tests__/ssrVShow.spec.ts b/packages/compiler-ssr/__tests__/ssrVShow.spec.ts
index 089d39af7e9..9f7d55850ab 100644
--- a/packages/compiler-ssr/__tests__/ssrVShow.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVShow.spec.ts
@@ -7,12 +7,12 @@ function compileWithWrapper(src: string) {
 describe('ssr: v-show', () => {
   test('basic as root', () => {
     expect(compile(`<div v-show="foo"/>`).code).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${_ssrRenderAttrs(_mergeProps({
-          style: (_ctx.foo) ? null : { display: \\"none\\" }
+          style: (_ctx.foo) ? null : { display: "none" }
         }, _attrs))}></div>\`)
       }"
     `)
@@ -21,14 +21,14 @@ describe('ssr: v-show', () => {
   test('basic', () => {
     expect(compileWithWrapper(`<div v-show="foo"/>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<div\${
             _ssrRenderAttrs(_attrs)
-          }><div style=\\"\${
-            _ssrRenderStyle((_ctx.foo) ? null : { display: \\"none\\" })
-          }\\"></div></div>\`)
+          }><div style="\${
+            _ssrRenderStyle((_ctx.foo) ? null : { display: "none" })
+          }"></div></div>\`)
         }"
       `)
   })
@@ -36,17 +36,17 @@ describe('ssr: v-show', () => {
   test('with static style', () => {
     expect(compileWithWrapper(`<div style="color:red" v-show="foo"/>`).code)
       .toMatchInlineSnapshot(`
-        "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+        "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _push(\`<div\${
             _ssrRenderAttrs(_attrs)
-          }><div style=\\"\${
+          }><div style="\${
             _ssrRenderStyle([
-              {\\"color\\":\\"red\\"},
-              (_ctx.foo) ? null : { display: \\"none\\" }
+              {"color":"red"},
+              (_ctx.foo) ? null : { display: "none" }
             ])
-          }\\"></div></div>\`)
+          }"></div></div>\`)
         }"
       `)
   })
@@ -55,17 +55,17 @@ describe('ssr: v-show', () => {
     expect(
       compileWithWrapper(`<div :style="{ color: 'red' }" v-show="foo"/>`).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><div style=\\"\${
+        }><div style="\${
           _ssrRenderStyle([
             { color: 'red' },
-            (_ctx.foo) ? null : { display: \\"none\\" }
+            (_ctx.foo) ? null : { display: "none" }
           ])
-        }\\"></div></div>\`)
+        }"></div></div>\`)
       }"
     `)
   })
@@ -76,18 +76,18 @@ describe('ssr: v-show', () => {
         `<div style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><div style=\\"\${
+        }><div style="\${
           _ssrRenderStyle([
-            {\\"color\\":\\"red\\"},
+            {"color":"red"},
             { fontSize: 14 },
-            (_ctx.foo) ? null : { display: \\"none\\" }
+            (_ctx.foo) ? null : { display: "none" }
           ])
-        }\\"></div></div>\`)
+        }"></div></div>\`)
       }"
     `)
   })
@@ -98,8 +98,8 @@ describe('ssr: v-show', () => {
         `<div v-bind="baz" style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require(\\"vue\\")
-      const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+      "const { mergeProps: _mergeProps } = require("vue")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
@@ -107,9 +107,9 @@ describe('ssr: v-show', () => {
         }><div\${
           _ssrRenderAttrs(_mergeProps(_ctx.baz, {
             style: [
-              {\\"color\\":\\"red\\"},
+              {"color":"red"},
               { fontSize: 14 },
-              (_ctx.foo) ? null : { display: \\"none\\" }
+              (_ctx.foo) ? null : { display: "none" }
             ]
           }))
         }></div></div>\`)
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 7ea607d3380..2b85cc974a4 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -294,7 +294,7 @@ describe('SSR hydration', () => {
 
     const teleportHtml = ctx.teleports!['#teleport2']
     expect(teleportHtml).toMatchInlineSnapshot(
-      '"<span>foo</span><span class=\\"foo\\"></span><!--teleport anchor--><span>foo2</span><span class=\\"foo2\\"></span><!--teleport anchor-->"'
+      `"<span>foo</span><span class="foo"></span><!--teleport anchor--><span>foo2</span><span class="foo2"></span><!--teleport anchor-->"`
     )
 
     teleportContainer.innerHTML = teleportHtml
@@ -331,7 +331,7 @@ describe('SSR hydration', () => {
     msg.value = 'bar'
     await nextTick()
     expect(teleportContainer.innerHTML).toMatchInlineSnapshot(
-      '"<span>bar</span><span class=\\"bar\\"></span><!--teleport anchor--><span>bar2</span><span class=\\"bar2\\"></span><!--teleport anchor-->"'
+      `"<span>bar</span><span class="bar"></span><!--teleport anchor--><span>bar2</span><span class="bar2"></span><!--teleport anchor-->"`
     )
   })
 
@@ -354,7 +354,7 @@ describe('SSR hydration', () => {
     const ctx: SSRContext = {}
     const mainHtml = await renderToString(h(Comp), ctx)
     expect(mainHtml).toMatchInlineSnapshot(
-      '"<!--[--><div>foo</div><!--teleport start--><span>foo</span><span class=\\"foo\\"></span><!--teleport end--><div class=\\"foo2\\">bar</div><!--]-->"'
+      `"<!--[--><div>foo</div><!--teleport start--><span>foo</span><span class="foo"></span><!--teleport end--><div class="foo2">bar</div><!--]-->"`
     )
 
     const teleportHtml = ctx.teleports!['#teleport3']
@@ -393,7 +393,7 @@ describe('SSR hydration', () => {
     msg.value = 'bar'
     await nextTick()
     expect(container.innerHTML).toMatchInlineSnapshot(
-      '"<!--[--><div>foo</div><!--teleport start--><span>bar</span><span class=\\"bar\\"></span><!--teleport end--><div class=\\"bar2\\">bar</div><!--]-->"'
+      `"<!--[--><div>foo</div><!--teleport start--><span>bar</span><span class="bar"></span><!--teleport end--><div class="bar2">bar</div><!--]-->"`
     )
   })
 
diff --git a/packages/shared/__tests__/__snapshots__/codeframe.spec.ts.snap b/packages/shared/__tests__/__snapshots__/codeframe.spec.ts.snap
index 762e32694d3..4caa583461d 100644
--- a/packages/shared/__tests__/__snapshots__/codeframe.spec.ts.snap
+++ b/packages/shared/__tests__/__snapshots__/codeframe.spec.ts.snap
@@ -1,62 +1,62 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler: codeframe > line in middle 1`] = `
-"2  |    <template key=\\"one\\"></template>
+"2  |    <template key="one"></template>
 3  |    <ul>
-4  |      <li v-for=\\"foobar\\">hi</li>
+4  |      <li v-for="foobar">hi</li>
    |          ^^^^^^^^^^^^^^
 5  |    </ul>
-6  |    <template key=\\"two\\"></template>"
+6  |    <template key="two"></template>"
 `;
 
 exports[`compiler: codeframe > line near bottom 1`] = `
-"4  |      <li v-for=\\"foobar\\">hi</li>
+"4  |      <li v-for="foobar">hi</li>
 5  |    </ul>
-6  |    <template key=\\"two\\"></template>
+6  |    <template key="two"></template>
    |              ^^^^^^^^^
 7  |  </div>"
 `;
 
 exports[`compiler: codeframe > line near top 1`] = `
 "1  |  <div>
-2  |    <template key=\\"one\\"></template>
+2  |    <template key="one"></template>
    |              ^^^^^^^^^
 3  |    <ul>
-4  |      <li v-for=\\"foobar\\">hi</li>"
+4  |      <li v-for="foobar">hi</li>"
 `;
 
 exports[`compiler: codeframe > multi-line highlights 1`] = `
-"1  |  <div attr=\\"some
+"1  |  <div attr="some
    |       ^^^^^^^^^^
 2  |    multiline
    |  ^^^^^^^^^^^
 3  |  attr
    |  ^^^^
-4  |  \\">
+4  |  ">
    |  ^"
 `;
 
 exports[`compiler: codeframe > newline sequences - unix 1`] = `
-"8  |          <input name=\\"email\\" type=\\"text\\"/>
+"8  |          <input name="email" type="text"/>
 9  |        </div>
-10 |        <div id=\\"hook\\">
+10 |        <div id="hook">
    |        ^^^^^^^^^^^^^^^
-11 |          <label for=\\"password\\">Password</label>
+11 |          <label for="password">Password</label>
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-12 |          <input name=\\"password\\" type=\\"password\\"/>
+12 |          <input name="password" type="password"/>
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 13 |        </div>
    |  ^^^^^^^^^^^^"
 `;
 
 exports[`compiler: codeframe > newline sequences - windows 1`] = `
-"8  |          <input name=\\"email\\" type=\\"text\\"/>
+"8  |          <input name="email" type="text"/>
 9  |        </div>
-10 |        <div id=\\"hook\\">
+10 |        <div id="hook">
    |        ^^^^^^^^^^^^^^^
-11 |          <label for=\\"password\\">Password</label>
+11 |          <label for="password">Password</label>
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-12 |          <input name=\\"password\\" type=\\"password\\"/>
+12 |          <input name="password" type="password"/>
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 13 |        </div>
    |  ^^^^^^^^^^^^"
diff --git a/packages/shared/__tests__/toDisplayString.spec.ts b/packages/shared/__tests__/toDisplayString.spec.ts
index 5255c0e400b..4d28714252c 100644
--- a/packages/shared/__tests__/toDisplayString.spec.ts
+++ b/packages/shared/__tests__/toDisplayString.spec.ts
@@ -92,7 +92,7 @@ describe('toDisplayString', () => {
     expect(toDisplayString(div)).toMatch('[object HTMLDivElement]')
     expect(toDisplayString({ div })).toMatchInlineSnapshot(`
       "{
-        \\"div\\": \\"[object HTMLDivElement]\\"
+        "div": "[object HTMLDivElement]"
       }"
     `)
   })
@@ -106,28 +106,28 @@ describe('toDisplayString', () => {
 
     expect(toDisplayString(m)).toMatchInlineSnapshot(`
       "{
-        \\"Map(2)\\": {
-          \\"1 =>\\": \\"foo\\",
-          \\"[object Object] =>\\": {
-            \\"foo\\": \\"bar\\",
-            \\"qux\\": 2
+        "Map(2)": {
+          "1 =>": "foo",
+          "[object Object] =>": {
+            "foo": "bar",
+            "qux": 2
           }
         }
       }"
     `)
     expect(toDisplayString(s)).toMatchInlineSnapshot(`
       "{
-        \\"Set(3)\\": [
+        "Set(3)": [
           1,
           {
-            \\"foo\\": \\"bar\\"
+            "foo": "bar"
           },
           {
-            \\"Map(2)\\": {
-              \\"1 =>\\": \\"foo\\",
-              \\"[object Object] =>\\": {
-                \\"foo\\": \\"bar\\",
-                \\"qux\\": 2
+            "Map(2)": {
+              "1 =>": "foo",
+              "[object Object] =>": {
+                "foo": "bar",
+                "qux": 2
               }
             }
           }
@@ -142,27 +142,27 @@ describe('toDisplayString', () => {
       })
     ).toMatchInlineSnapshot(`
       "{
-        \\"m\\": {
-          \\"Map(2)\\": {
-            \\"1 =>\\": \\"foo\\",
-            \\"[object Object] =>\\": {
-              \\"foo\\": \\"bar\\",
-              \\"qux\\": 2
+        "m": {
+          "Map(2)": {
+            "1 =>": "foo",
+            "[object Object] =>": {
+              "foo": "bar",
+              "qux": 2
             }
           }
         },
-        \\"s\\": {
-          \\"Set(3)\\": [
+        "s": {
+          "Set(3)": [
             1,
             {
-              \\"foo\\": \\"bar\\"
+              "foo": "bar"
             },
             {
-              \\"Map(2)\\": {
-                \\"1 =>\\": \\"foo\\",
-                \\"[object Object] =>\\": {
-                  \\"foo\\": \\"bar\\",
-                  \\"qux\\": 2
+              "Map(2)": {
+                "1 =>": "foo",
+                "[object Object] =>": {
+                  "foo": "bar",
+                  "qux": 2
                 }
               }
             }
diff --git a/packages/vue-compat/__tests__/componentFunctional.spec.ts b/packages/vue-compat/__tests__/componentFunctional.spec.ts
index 8ee0b3cd96b..9932595696d 100644
--- a/packages/vue-compat/__tests__/componentFunctional.spec.ts
+++ b/packages/vue-compat/__tests__/componentFunctional.spec.ts
@@ -52,7 +52,7 @@ describe('COMPONENT_FUNCTIONAL', () => {
     expect(vm.$el.querySelector('.inject').textContent).toBe('123')
     expect(vm.$el.querySelector('.slot').textContent).toBe('hello')
     expect(vm.$el.outerHTML).toMatchInlineSnapshot(
-      '"<div id=\\"foo\\" class=\\"foo\\"><div class=\\"inject\\">123</div><div class=\\"slot\\">hello</div></div>"'
+      `"<div id="foo" class="foo"><div class="inject">123</div><div class="slot">hello</div></div>"`
     )
 
     expect(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 67072a042fe..6f27cb37101 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -43,7 +43,7 @@ importers:
         version: 6.13.0(eslint@8.54.0)(typescript@5.2.2)
       '@vitest/coverage-istanbul':
         specifier: ^0.34.6
-        version: 0.34.6(vitest@0.34.6)
+        version: 0.34.6(vitest@1.0.1)
       '@vue/consolidate':
         specifier: 0.17.3
         version: 0.17.3
@@ -153,8 +153,8 @@ importers:
         specifier: ^5.0.0
         version: 5.0.0(@types/node@20.10.3)(terser@5.22.0)
       vitest:
-        specifier: ^0.34.6
-        version: 0.34.6(jsdom@22.1.0)(terser@5.22.0)
+        specifier: ^1.0.0
+        version: 1.0.1(@types/node@20.10.3)(jsdom@22.1.0)(terser@5.22.0)
 
   packages/compiler-core:
     dependencies:
@@ -1534,16 +1534,6 @@ packages:
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
     dev: true
 
-  /@types/chai-subset@1.3.4:
-    resolution: {integrity: sha512-CCWNXrJYSUIojZ1149ksLl3AN9cmZ5djf+yUoVVV+NuYrtydItQVlL2ZDqyC6M6O9LWRnVf8yYDxbXHO2TfQZg==}
-    dependencies:
-      '@types/chai': 4.3.9
-    dev: true
-
-  /@types/chai@4.3.9:
-    resolution: {integrity: sha512-69TtiDzu0bcmKQv3yg1Zx409/Kd7r0b5F1PfpYJfSHzLGtB53547V4u+9iqKYsTu/O2ai6KTb0TInNpvuQ3qmg==}
-    dev: true
-
   /@types/estree@1.0.3:
     resolution: {integrity: sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==}
     dev: true
@@ -1722,7 +1712,7 @@ packages:
       vue: link:packages/vue
     dev: true
 
-  /@vitest/coverage-istanbul@0.34.6(vitest@0.34.6):
+  /@vitest/coverage-istanbul@0.34.6(vitest@1.0.1):
     resolution: {integrity: sha512-5KaBNZPDSk2ybavC3rZ1pWGniw7sJ5usuwVGRUYzJwiBfWvnLpuUer7bjw7qUCRGdKJXrBgb/Dsgif9rkwMX/A==}
     peerDependencies:
       vitest: '>=0.32.0 <1'
@@ -1734,43 +1724,43 @@ packages:
       istanbul-reports: 3.1.6
       picocolors: 1.0.0
       test-exclude: 6.0.0
-      vitest: 0.34.6(jsdom@22.1.0)(terser@5.22.0)
+      vitest: 1.0.1(@types/node@20.10.3)(jsdom@22.1.0)(terser@5.22.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitest/expect@0.34.6:
-    resolution: {integrity: sha512-QUzKpUQRc1qC7qdGo7rMK3AkETI7w18gTCUrsNnyjjJKYiuUB9+TQK3QnR1unhCnWRC0AbKv2omLGQDF/mIjOw==}
+  /@vitest/expect@1.0.1:
+    resolution: {integrity: sha512-3cdrb/eKD/0tygDX75YscuHEHMUJ70u3UoLSq2eqhWks57AyzvsDQbyn53IhZ0tBN7gA8Jj2VhXiOV2lef7thw==}
     dependencies:
-      '@vitest/spy': 0.34.6
-      '@vitest/utils': 0.34.6
+      '@vitest/spy': 1.0.1
+      '@vitest/utils': 1.0.1
       chai: 4.3.10
     dev: true
 
-  /@vitest/runner@0.34.6:
-    resolution: {integrity: sha512-1CUQgtJSLF47NnhN+F9X2ycxUP0kLHQ/JWvNHbeBfwW8CzEGgeskzNnHDyv1ieKTltuR6sdIHV+nmR6kPxQqzQ==}
+  /@vitest/runner@1.0.1:
+    resolution: {integrity: sha512-/+z0vhJ0MfRPT3AyTvAK6m57rzlew/ct8B2a4LMv7NhpPaiI2QLGyOBMB3lcioWdJHjRuLi9aYppfOv0B5aRQA==}
     dependencies:
-      '@vitest/utils': 0.34.6
-      p-limit: 4.0.0
+      '@vitest/utils': 1.0.1
+      p-limit: 5.0.0
       pathe: 1.1.1
     dev: true
 
-  /@vitest/snapshot@0.34.6:
-    resolution: {integrity: sha512-B3OZqYn6k4VaN011D+ve+AA4whM4QkcwcrwaKwAbyyvS/NB1hCWjFIBQxAQQSQir9/RtyAAGuq+4RJmbn2dH4w==}
+  /@vitest/snapshot@1.0.1:
+    resolution: {integrity: sha512-wIPtPDGSxEZ+DpNMc94AsybX6LV6uN6sosf5TojyP1m2QbKwiRuLV/5RSsjt1oWViHsTj8mlcwrQQ1zHGO0fMw==}
     dependencies:
       magic-string: 0.30.5
       pathe: 1.1.1
       pretty-format: 29.7.0
     dev: true
 
-  /@vitest/spy@0.34.6:
-    resolution: {integrity: sha512-xaCvneSaeBw/cz8ySmF7ZwGvL0lBjfvqc1LpQ/vcdHEvpLn3Ff1vAvjw+CoGn0802l++5L/pxb7whwcWAw+DUQ==}
+  /@vitest/spy@1.0.1:
+    resolution: {integrity: sha512-yXwm1uKhBVr/5MhVeSmtNqK+0q2RXIchJt8kokEKdrWLtkPeDgdbZ6SjR1VQGZuNdWL6sSBnLayIyVvcS0qLfA==}
     dependencies:
       tinyspy: 2.2.0
     dev: true
 
-  /@vitest/utils@0.34.6:
-    resolution: {integrity: sha512-IG5aDD8S6zlvloDsnzHw0Ut5xczlF+kv2BOTo+iXfPr54Yhi5qbVOgGB1hZaVq4iJ4C/MZ2J0y15IlsV/ZcI0A==}
+  /@vitest/utils@1.0.1:
+    resolution: {integrity: sha512-MGPCHkzXbbAyscrhwGzh8uP1HPrTYLWaj1WTDtWSGrpe2yJWLRN9mF9ooKawr6NMOg9vTBtg2JqWLfuLC7Dknw==}
     dependencies:
       diff-sequences: 29.6.3
       loupe: 2.3.7
@@ -1818,8 +1808,8 @@ packages:
       acorn: 8.10.0
     dev: true
 
-  /acorn-walk@8.2.0:
-    resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
+  /acorn-walk@8.3.0:
+    resolution: {integrity: sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==}
     engines: {node: '>=0.4.0'}
     dev: true
 
@@ -4108,9 +4098,12 @@ packages:
     engines: {node: '>= 12.13.0'}
     dev: true
 
-  /local-pkg@0.4.3:
-    resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
+  /local-pkg@0.5.0:
+    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
     engines: {node: '>=14'}
+    dependencies:
+      mlly: 1.4.2
+      pkg-types: 1.0.3
     dev: true
 
   /locate-path@6.0.0:
@@ -4503,6 +4496,13 @@ packages:
       yocto-queue: 1.0.0
     dev: true
 
+  /p-limit@5.0.0:
+    resolution: {integrity: sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==}
+    engines: {node: '>=18'}
+    dependencies:
+      yocto-queue: 1.0.0
+    dev: true
+
   /p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
@@ -5158,7 +5158,7 @@ packages:
       rollup: 4.1.4
       typescript: 5.2.2
     optionalDependencies:
-      '@babel/code-frame': 7.22.13
+      '@babel/code-frame': 7.23.5
     dev: true
 
   /rollup-plugin-esbuild@6.1.0(esbuild@0.19.5)(rollup@4.1.4):
@@ -5511,8 +5511,8 @@ packages:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
     dev: true
 
-  /std-env@3.4.3:
-    resolution: {integrity: sha512-f9aPhy8fYBuMN+sNfakZV18U39PbalgjXG3lLB9WkaYTxijru61wb57V9wxxNthXM5Sd88ETBWi29qLAsHO52Q==}
+  /std-env@3.6.0:
+    resolution: {integrity: sha512-aFZ19IgVmhdB2uX599ve2kE6BIE3YMnQ6Gp6BURhW/oIzpXGKr878TQfAQZn1+i0Flcc/UKUy1gOlcfaUBCryg==}
     dev: true
 
   /streamx@2.15.1:
@@ -5722,8 +5722,8 @@ packages:
     resolution: {integrity: sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==}
     dev: true
 
-  /tinypool@0.7.0:
-    resolution: {integrity: sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==}
+  /tinypool@0.8.1:
+    resolution: {integrity: sha512-zBTCK0cCgRROxvs9c0CGK838sPkeokNGdQVUUwHAbynHFlmyJYj825f/oRs528HaIJ97lo0pLIlDUzwN+IorWg==}
     engines: {node: '>=14.0.0'}
     dev: true
 
@@ -5983,14 +5983,13 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /vite-node@0.34.6(@types/node@20.10.3)(terser@5.22.0):
-    resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
-    engines: {node: '>=v14.18.0'}
+  /vite-node@1.0.1(@types/node@20.10.3)(terser@5.22.0):
+    resolution: {integrity: sha512-Y2Jnz4cr2azsOMMYuVPrQkp3KMnS/0WV8ezZjCy4hU7O5mUHCAVOnFmoEvs1nvix/4mYm74Len8bYRWZJMNP6g==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     dependencies:
       cac: 6.7.14
       debug: 4.3.4
-      mlly: 1.4.2
       pathe: 1.1.1
       picocolors: 1.0.0
       vite: 5.0.0(@types/node@20.10.3)(terser@5.22.0)
@@ -6042,22 +6041,22 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vitest@0.34.6(jsdom@22.1.0)(terser@5.22.0):
-    resolution: {integrity: sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==}
-    engines: {node: '>=v14.18.0'}
+  /vitest@1.0.1(@types/node@20.10.3)(jsdom@22.1.0)(terser@5.22.0):
+    resolution: {integrity: sha512-MHsOj079S28hDsvdDvyD1pRj4dcS51EC5Vbe0xvOYX+WryP8soiK2dm8oULi+oA/8Xa/h6GoJEMTmcmBy5YM+Q==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
-      '@vitest/browser': '*'
-      '@vitest/ui': '*'
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': ^1.0.0
+      '@vitest/ui': ^1.0.0
       happy-dom: '*'
       jsdom: '*'
-      playwright: '*'
-      safaridriver: '*'
-      webdriverio: '*'
     peerDependenciesMeta:
       '@edge-runtime/vm':
         optional: true
+      '@types/node':
+        optional: true
       '@vitest/browser':
         optional: true
       '@vitest/ui':
@@ -6066,37 +6065,29 @@ packages:
         optional: true
       jsdom:
         optional: true
-      playwright:
-        optional: true
-      safaridriver:
-        optional: true
-      webdriverio:
-        optional: true
     dependencies:
-      '@types/chai': 4.3.9
-      '@types/chai-subset': 1.3.4
       '@types/node': 20.10.3
-      '@vitest/expect': 0.34.6
-      '@vitest/runner': 0.34.6
-      '@vitest/snapshot': 0.34.6
-      '@vitest/spy': 0.34.6
-      '@vitest/utils': 0.34.6
-      acorn: 8.10.0
-      acorn-walk: 8.2.0
+      '@vitest/expect': 1.0.1
+      '@vitest/runner': 1.0.1
+      '@vitest/snapshot': 1.0.1
+      '@vitest/spy': 1.0.1
+      '@vitest/utils': 1.0.1
+      acorn-walk: 8.3.0
       cac: 6.7.14
       chai: 4.3.10
       debug: 4.3.4
+      execa: 8.0.1
       jsdom: 22.1.0
-      local-pkg: 0.4.3
+      local-pkg: 0.5.0
       magic-string: 0.30.5
       pathe: 1.1.1
       picocolors: 1.0.0
-      std-env: 3.4.3
+      std-env: 3.6.0
       strip-literal: 1.3.0
       tinybench: 2.5.1
-      tinypool: 0.7.0
+      tinypool: 0.8.1
       vite: 5.0.0(@types/node@20.10.3)(terser@5.22.0)
-      vite-node: 0.34.6(@types/node@20.10.3)(terser@5.22.0)
+      vite-node: 1.0.1(@types/node@20.10.3)(terser@5.22.0)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less

From 8e27692029a4645cd54287f776c0420f2b82740b Mon Sep 17 00:00:00 2001
From: nandi95 <41805560+nandi95@users.noreply.github.com>
Date: Tue, 5 Dec 2023 09:14:17 +0000
Subject: [PATCH 35/47] feat(runtime-core): provide full props to props
 validator functions (#3258)

---
 .../__tests__/componentProps.spec.ts          | 50 +++++++++++++++++++
 packages/runtime-core/src/componentProps.ts   |  9 ++--
 2 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/packages/runtime-core/__tests__/componentProps.spec.ts b/packages/runtime-core/__tests__/componentProps.spec.ts
index 885e80090a1..3a16840b4f3 100644
--- a/packages/runtime-core/__tests__/componentProps.spec.ts
+++ b/packages/runtime-core/__tests__/componentProps.spec.ts
@@ -282,6 +282,56 @@ describe('component props', () => {
     expect(root.innerHTML).toBe('<div id="b">2</div>')
   })
 
+  describe('validator', () => {
+    test('validator should be called with two arguments', async () => {
+      const mockFn = vi.fn((...args: any[]) => true)
+      const Comp = defineComponent({
+        props: {
+          foo: {
+            type: Number,
+            validator: (value, props) => mockFn(value, props)
+          },
+          bar: {
+            type: Number
+          }
+        },
+        template: `<div />`
+      })
+
+      // Note this one is using the main Vue render so it can compile template
+      // on the fly
+      const root = document.createElement('div')
+      domRender(h(Comp, { foo: 1, bar: 2 }), root)
+      expect(mockFn).toHaveBeenCalledWith(1, { foo: 1, bar: 2 })
+    })
+
+    test('validator should not be able to mutate other props', async () => {
+      const mockFn = vi.fn((...args: any[]) => true)
+      const Comp = defineComponent({
+        props: {
+          foo: {
+            type: Number,
+            validator: (value, props) => !!(props.bar = 1)
+          },
+          bar: {
+            type: Number,
+            validator: value => mockFn(value)
+          }
+        },
+        template: `<div />`
+      })
+
+      // Note this one is using the main Vue render so it can compile template
+      // on the fly
+      const root = document.createElement('div')
+      domRender(h(Comp, { foo: 1, bar: 2 }), root)
+      expect(
+        `Set operation on key "bar" failed: target is readonly.`
+      ).toHaveBeenWarnedLast()
+      expect(mockFn).toHaveBeenCalledWith(2)
+    })
+  })
+
   test('warn props mutation', () => {
     let instance: ComponentInternalInstance
     let setupProps: any
diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts
index bbe88bf7b82..4b7be8a8e73 100644
--- a/packages/runtime-core/src/componentProps.ts
+++ b/packages/runtime-core/src/componentProps.ts
@@ -2,7 +2,8 @@ import {
   toRaw,
   shallowReactive,
   trigger,
-  TriggerOpTypes
+  TriggerOpTypes,
+  shallowReadonly
 } from '@vue/reactivity'
 import {
   EMPTY_OBJ,
@@ -57,7 +58,7 @@ export interface PropOptions<T = any, D = T> {
   type?: PropType<T> | true | null
   required?: boolean
   default?: D | DefaultFactory<D> | null | undefined | object
-  validator?(value: unknown): boolean
+  validator?(value: unknown, props: Data): boolean
   /**
    * @internal
    */
@@ -634,6 +635,7 @@ function validateProps(
       key,
       resolvedValues[key],
       opt,
+      __DEV__ ? shallowReadonly(resolvedValues) : resolvedValues,
       !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key))
     )
   }
@@ -646,6 +648,7 @@ function validateProp(
   name: string,
   value: unknown,
   prop: PropOptions,
+  props: Data,
   isAbsent: boolean
 ) {
   const { type, required, validator, skipCheck } = prop
@@ -675,7 +678,7 @@ function validateProp(
     }
   }
   // custom validator
-  if (validator && !validator(value)) {
+  if (validator && !validator(value, props)) {
     warn('Invalid prop: custom validator check failed for prop "' + name + '".')
   }
 }

From 0dc875d53e5d869b44d0c1a70736ec859337b58f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Wed, 6 Dec 2023 14:41:21 +0800
Subject: [PATCH 36/47] fix(compiler-core): use the same resolved options for
 all compile stages (#9760)

---
 packages/compiler-core/src/compile.ts | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/compiler-core/src/compile.ts b/packages/compiler-core/src/compile.ts
index 6ae90907f97..d5a9b0194be 100644
--- a/packages/compiler-core/src/compile.ts
+++ b/packages/compiler-core/src/compile.ts
@@ -82,7 +82,10 @@ export function baseCompile(
     onError(createCompilerError(ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED))
   }
 
-  const ast = isString(source) ? baseParse(source, options) : source
+  const resolvedOptions = extend({}, options, {
+    prefixIdentifiers
+  })
+  const ast = isString(source) ? baseParse(source, resolvedOptions) : source
   const [nodeTransforms, directiveTransforms] =
     getBaseTransformPreset(prefixIdentifiers)
 
@@ -95,8 +98,7 @@ export function baseCompile(
 
   transform(
     ast,
-    extend({}, options, {
-      prefixIdentifiers,
+    extend({}, resolvedOptions, {
       nodeTransforms: [
         ...nodeTransforms,
         ...(options.nodeTransforms || []) // user transforms
@@ -109,10 +111,5 @@ export function baseCompile(
     })
   )
 
-  return generate(
-    ast,
-    extend({}, options, {
-      prefixIdentifiers
-    })
-  )
+  return generate(ast, resolvedOptions)
 }

From 5b2bd1df78e8ff524c3a184adaa284681aba6574 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Fri, 8 Dec 2023 15:22:27 +0800
Subject: [PATCH 37/47] feat(compiler-sfc): support import attributes and
 `using` syntax (#8786)

---
 .../__snapshots__/compileScript.spec.ts.snap  | 28 +++++++++++++++
 .../__tests__/compileScript.spec.ts           | 34 +++++++++++++++++++
 packages/compiler-sfc/__tests__/utils.ts      |  5 ++-
 packages/compiler-sfc/src/rewriteDefault.ts   |  3 +-
 packages/compiler-sfc/src/script/context.ts   | 15 ++++++--
 5 files changed, 81 insertions(+), 4 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index b2c6904fbac..01267cd42c7 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -1483,3 +1483,31 @@ _sfc_.setup = __setup__
   : __injectCSSVars__
 "
 `;
+
+exports[`SFC genDefaultAs > parser plugins > import attributes (user override for deprecated syntax) 1`] = `
+"import { foo } from './foo.js' assert { type: 'foobar' }
+        
+export default {
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        
+return { get foo() { return foo } }
+}
+
+}"
+`;
+
+exports[`SFC genDefaultAs > parser plugins > import attributes 1`] = `
+"import { foo } from './foo.js' with { type: 'foobar' }
+        
+export default {
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        
+return { get foo() { return foo } }
+}
+
+}"
+`;
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 6eef8d51e63..96338b022f3 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -1600,4 +1600,38 @@ describe('SFC genDefaultAs', () => {
       foo: BindingTypes.SETUP_REF
     })
   })
+
+  describe('parser plugins', () => {
+    test('import attributes', () => {
+      const { content } = compile(`
+        <script setup>
+        import { foo } from './foo.js' with { type: 'foobar' }
+        </script>
+      `)
+      assertCode(content)
+
+      expect(() =>
+        compile(`
+      <script setup>
+        import { foo } from './foo.js' assert { type: 'foobar' }
+        </script>`)
+      ).toThrow()
+    })
+
+    test('import attributes (user override for deprecated syntax)', () => {
+      const { content } = compile(
+        `
+        <script setup>
+        import { foo } from './foo.js' assert { type: 'foobar' }
+        </script>
+      `,
+        {
+          babelParserPlugins: [
+            ['importAttributes', { deprecatedAssertSyntax: true }]
+          ]
+        }
+      )
+      assertCode(content)
+    })
+  })
 })
diff --git a/packages/compiler-sfc/__tests__/utils.ts b/packages/compiler-sfc/__tests__/utils.ts
index 13e12d765a2..5fcc6f0b7f8 100644
--- a/packages/compiler-sfc/__tests__/utils.ts
+++ b/packages/compiler-sfc/__tests__/utils.ts
@@ -28,7 +28,10 @@ export function assertCode(code: string) {
   try {
     babelParse(code, {
       sourceType: 'module',
-      plugins: ['typescript']
+      plugins: [
+        'typescript',
+        ['importAttributes', { deprecatedAssertSyntax: true }]
+      ]
     })
   } catch (e: any) {
     console.log(code)
diff --git a/packages/compiler-sfc/src/rewriteDefault.ts b/packages/compiler-sfc/src/rewriteDefault.ts
index 277eedce011..cb1826b4a83 100644
--- a/packages/compiler-sfc/src/rewriteDefault.ts
+++ b/packages/compiler-sfc/src/rewriteDefault.ts
@@ -2,6 +2,7 @@ import { parse } from '@babel/parser'
 import MagicString from 'magic-string'
 import type { ParserPlugin } from '@babel/parser'
 import type { Identifier, Statement } from '@babel/types'
+import { resolveParserPlugins } from './script/context'
 
 export function rewriteDefault(
   input: string,
@@ -10,7 +11,7 @@ export function rewriteDefault(
 ): string {
   const ast = parse(input, {
     sourceType: 'module',
-    plugins: parserPlugins
+    plugins: resolveParserPlugins('js', parserPlugins)
   }).program.body
   const s = new MagicString(input)
 
diff --git a/packages/compiler-sfc/src/script/context.ts b/packages/compiler-sfc/src/script/context.ts
index b05b8d910ee..900cf109260 100644
--- a/packages/compiler-sfc/src/script/context.ts
+++ b/packages/compiler-sfc/src/script/context.ts
@@ -1,6 +1,6 @@
 import { CallExpression, Node, ObjectPattern, Program } from '@babel/types'
 import { SFCDescriptor } from '../parse'
-import { generateCodeFrame } from '@vue/shared'
+import { generateCodeFrame, isArray } from '@vue/shared'
 import { parse as babelParse, ParserPlugin } from '@babel/parser'
 import { ImportBinding, SFCScriptCompileOptions } from '../compileScript'
 import { PropsDestructureBindings } from './defineProps'
@@ -155,6 +155,17 @@ export function resolveParserPlugins(
   dts = false
 ) {
   const plugins: ParserPlugin[] = []
+  if (
+    !userPlugins ||
+    !userPlugins.some(
+      p =>
+        p === 'importAssertions' ||
+        p === 'importAttributes' ||
+        (isArray(p) && p[0] === 'importAttributes')
+    )
+  ) {
+    plugins.push('importAttributes')
+  }
   if (lang === 'jsx' || lang === 'tsx') {
     plugins.push('jsx')
   } else if (userPlugins) {
@@ -163,7 +174,7 @@ export function resolveParserPlugins(
     userPlugins = userPlugins.filter(p => p !== 'jsx')
   }
   if (lang === 'ts' || lang === 'tsx') {
-    plugins.push(['typescript', { dts }])
+    plugins.push(['typescript', { dts }], 'explicitResourceManagement')
     if (!userPlugins || !userPlugins.includes('decorators')) {
       plugins.push('decorators-legacy')
     }

From 638f1abbb632000553e2b7d75e87c95d8ca192d6 Mon Sep 17 00:00:00 2001
From: Adrien Foulon <6115458+Tofandel@users.noreply.github.com>
Date: Fri, 8 Dec 2023 08:23:50 +0100
Subject: [PATCH 38/47] feat(compiler-core): add current filename to
 TransformContext (#8950)

---
 .../compiler-core/__tests__/transform.spec.ts | 20 +++++++++++++++++++
 packages/compiler-core/src/transform.ts       |  3 ++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-core/__tests__/transform.spec.ts b/packages/compiler-core/__tests__/transform.spec.ts
index f0e91108e43..7657e74f7e8 100644
--- a/packages/compiler-core/__tests__/transform.spec.ts
+++ b/packages/compiler-core/__tests__/transform.spec.ts
@@ -200,6 +200,26 @@ describe('compiler: transform', () => {
     expect((ast as any).children[0].props[0].exp.content).toBe(`_hoisted_1`)
     expect((ast as any).children[1].props[0].exp.content).toBe(`_hoisted_2`)
   })
+  
+  test('context.filename and selfName', () => {
+    const ast = baseParse(`<div />`)
+    
+    const calls: any[] = []
+    const plugin: NodeTransform = (node, context) => {
+      calls.push({ ...context })
+    }
+    
+    transform(ast, {
+      filename: '/the/fileName.vue',
+      nodeTransforms: [plugin]
+    })
+    
+    expect(calls.length).toBe(2)
+    expect(calls[1]).toMatchObject({
+      filename: '/the/fileName.vue',
+      selfName: 'FileName'
+    })
+  })
 
   test('onError option', () => {
     const ast = baseParse(`<div/>`)
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index f128b3b6e9d..3a568a07298 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -84,7 +84,7 @@ export interface ImportItem {
 
 export interface TransformContext
   extends Required<
-      Omit<TransformOptions, 'filename' | keyof CompilerCompatOptions>
+      Omit<TransformOptions, keyof CompilerCompatOptions>
     >,
     CompilerCompatOptions {
   selfName: string | null
@@ -153,6 +153,7 @@ export function createTransformContext(
   const nameMatch = filename.replace(/\?.*$/, '').match(/([^/\\]+)\.\w+$/)
   const context: TransformContext = {
     // options
+    filename,
     selfName: nameMatch && capitalize(camelize(nameMatch[1])),
     prefixIdentifiers,
     hoistStatic,

From 2ffc1e8cfdc6ec9c45c4a4dd8e3081b2aa138f1e Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 8 Dec 2023 15:49:09 +0800
Subject: [PATCH 39/47] feat(ssr): improve ssr hydration mismatch checks
 (#5953)

- Include the actual element in the warning message
- Also warn class/style/attribute mismatches

Note: class/style/attribute mismatches are check-only and will not be
rectified.

close #5063
---
 .../compiler-core/__tests__/transform.spec.ts |   8 +-
 packages/compiler-core/src/transform.ts       |   4 +-
 .../runtime-core/__tests__/hydration.spec.ts  |  62 ++++-
 packages/runtime-core/src/hydration.ts        | 225 ++++++++++++------
 4 files changed, 213 insertions(+), 86 deletions(-)

diff --git a/packages/compiler-core/__tests__/transform.spec.ts b/packages/compiler-core/__tests__/transform.spec.ts
index 7657e74f7e8..33b80ff9043 100644
--- a/packages/compiler-core/__tests__/transform.spec.ts
+++ b/packages/compiler-core/__tests__/transform.spec.ts
@@ -200,20 +200,20 @@ describe('compiler: transform', () => {
     expect((ast as any).children[0].props[0].exp.content).toBe(`_hoisted_1`)
     expect((ast as any).children[1].props[0].exp.content).toBe(`_hoisted_2`)
   })
-  
+
   test('context.filename and selfName', () => {
     const ast = baseParse(`<div />`)
-    
+
     const calls: any[] = []
     const plugin: NodeTransform = (node, context) => {
       calls.push({ ...context })
     }
-    
+
     transform(ast, {
       filename: '/the/fileName.vue',
       nodeTransforms: [plugin]
     })
-    
+
     expect(calls.length).toBe(2)
     expect(calls[1]).toMatchObject({
       filename: '/the/fileName.vue',
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 3a568a07298..7da34bedb9b 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -83,9 +83,7 @@ export interface ImportItem {
 }
 
 export interface TransformContext
-  extends Required<
-      Omit<TransformOptions, keyof CompilerCompatOptions>
-    >,
+  extends Required<Omit<TransformOptions, keyof CompilerCompatOptions>>,
     CompilerCompatOptions {
   selfName: string | null
   root: RootNode
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 2b85cc974a4..a5f056f385c 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -981,7 +981,7 @@ describe('SSR hydration', () => {
 
   test('force hydrate select option with non-string value bindings', () => {
     const { container } = mountWithHydration(
-      '<select><option :value="true">ok</option></select>',
+      '<select><option value="true">ok</option></select>',
       () =>
         h('select', [
           // hoisted because bound value is a constant...
@@ -1066,7 +1066,7 @@ describe('SSR hydration', () => {
       </div>
     `)
     expect(vnode.el).toBe(container.firstChild)
-    expect(`mismatch`).not.toHaveBeenWarned()
+    // expect(`mismatch`).not.toHaveBeenWarned()
   })
 
   test('transition appear with v-if', () => {
@@ -1126,7 +1126,7 @@ describe('SSR hydration', () => {
         h('div', 'bar')
       )
       expect(container.innerHTML).toBe('<div>bar</div>')
-      expect(`Hydration text content mismatch in <div>`).toHaveBeenWarned()
+      expect(`Hydration text content mismatch`).toHaveBeenWarned()
     })
 
     test('not enough children', () => {
@@ -1136,7 +1136,7 @@ describe('SSR hydration', () => {
       expect(container.innerHTML).toBe(
         '<div><span>foo</span><span>bar</span></div>'
       )
-      expect(`Hydration children mismatch in <div>`).toHaveBeenWarned()
+      expect(`Hydration children mismatch`).toHaveBeenWarned()
     })
 
     test('too many children', () => {
@@ -1145,7 +1145,7 @@ describe('SSR hydration', () => {
         () => h('div', [h('span', 'foo')])
       )
       expect(container.innerHTML).toBe('<div><span>foo</span></div>')
-      expect(`Hydration children mismatch in <div>`).toHaveBeenWarned()
+      expect(`Hydration children mismatch`).toHaveBeenWarned()
     })
 
     test('complete mismatch', () => {
@@ -1219,5 +1219,57 @@ describe('SSR hydration', () => {
       expect(container.innerHTML).toBe('<div><!--hi--></div>')
       expect(`Hydration node mismatch`).toHaveBeenWarned()
     })
+
+    test('class mismatch', () => {
+      mountWithHydration(`<div class="foo bar"></div>`, () =>
+        h('div', { class: ['foo', 'bar'] })
+      )
+      mountWithHydration(`<div class="foo bar"></div>`, () =>
+        h('div', { class: { foo: true, bar: true } })
+      )
+      mountWithHydration(`<div class="foo bar"></div>`, () =>
+        h('div', { class: 'foo bar' })
+      )
+      expect(`Hydration class mismatch`).not.toHaveBeenWarned()
+      mountWithHydration(`<div class="foo bar"></div>`, () =>
+        h('div', { class: 'foo' })
+      )
+      expect(`Hydration class mismatch`).toHaveBeenWarned()
+    })
+
+    test('style mismatch', () => {
+      mountWithHydration(`<div style="color:red;"></div>`, () =>
+        h('div', { style: { color: 'red' } })
+      )
+      mountWithHydration(`<div style="color:red;"></div>`, () =>
+        h('div', { style: `color:red;` })
+      )
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+      mountWithHydration(`<div style="color:red;"></div>`, () =>
+        h('div', { style: { color: 'green' } })
+      )
+      expect(`Hydration style mismatch`).toHaveBeenWarned()
+    })
+
+    test('attr mismatch', () => {
+      mountWithHydration(`<div id="foo"></div>`, () => h('div', { id: 'foo' }))
+      mountWithHydration(`<div spellcheck></div>`, () =>
+        h('div', { spellcheck: '' })
+      )
+      // boolean
+      mountWithHydration(`<select multiple></div>`, () =>
+        h('select', { multiple: true })
+      )
+      mountWithHydration(`<select multiple></div>`, () =>
+        h('select', { multiple: 'multiple' })
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+      mountWithHydration(`<div></div>`, () => h('div', { id: 'foo' }))
+      expect(`Hydration attribute mismatch`).toHaveBeenWarned()
+
+      mountWithHydration(`<div id="bar"></div>`, () => h('div', { id: 'foo' }))
+      expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(2)
+    })
   })
 })
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index d79c09d3d36..35ab851953a 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -14,7 +14,20 @@ import { flushPostFlushCbs } from './scheduler'
 import { ComponentInternalInstance } from './component'
 import { invokeDirectiveHook } from './directives'
 import { warn } from './warning'
-import { PatchFlags, ShapeFlags, isReservedProp, isOn } from '@vue/shared'
+import {
+  PatchFlags,
+  ShapeFlags,
+  isReservedProp,
+  isOn,
+  normalizeClass,
+  normalizeStyle,
+  stringifyStyle,
+  isBooleanAttr,
+  isString,
+  includeBooleanAttr,
+  isKnownHtmlAttr,
+  isKnownSvgAttr
+} from '@vue/shared'
 import { needTransition, RendererInternals } from './renderer'
 import { setRef } from './rendererTemplateRef'
 import {
@@ -148,11 +161,12 @@ export function createHydrationFunctions(
             hasMismatch = true
             __DEV__ &&
               warn(
-                `Hydration text mismatch:` +
-                  `\n- Server rendered: ${JSON.stringify(
+                `Hydration text mismatch in`,
+                node.parentNode,
+                `\n  - rendered on server: ${JSON.stringify(vnode.children)}` +
+                  `\n  - expected on client: ${JSON.stringify(
                     (node as Text).data
-                  )}` +
-                  `\n- Client rendered: ${JSON.stringify(vnode.children)}`
+                  )}`
               )
             ;(node as Text).data = vnode.children as string
           }
@@ -344,51 +358,6 @@ export function createHydrationFunctions(
       if (dirs) {
         invokeDirectiveHook(vnode, null, parentComponent, 'created')
       }
-      // props
-      if (props) {
-        if (
-          forcePatch ||
-          !optimized ||
-          patchFlag & (PatchFlags.FULL_PROPS | PatchFlags.NEED_HYDRATION)
-        ) {
-          for (const key in props) {
-            if (
-              (forcePatch &&
-                (key.endsWith('value') || key === 'indeterminate')) ||
-              (isOn(key) && !isReservedProp(key)) ||
-              // force hydrate v-bind with .prop modifiers
-              key[0] === '.'
-            ) {
-              patchProp(
-                el,
-                key,
-                null,
-                props[key],
-                false,
-                undefined,
-                parentComponent
-              )
-            }
-          }
-        } else if (props.onClick) {
-          // Fast path for click listeners (which is most often) to avoid
-          // iterating through props.
-          patchProp(
-            el,
-            'onClick',
-            null,
-            props.onClick,
-            false,
-            undefined,
-            parentComponent
-          )
-        }
-      }
-      // vnode / directive hooks
-      let vnodeHooks: VNodeHook | null | undefined
-      if ((vnodeHooks = props && props.onVnodeBeforeMount)) {
-        invokeVNodeHook(vnodeHooks, parentComponent, vnode)
-      }
 
       // handle appear transition
       let needCallTransitionHooks = false
@@ -411,21 +380,6 @@ export function createHydrationFunctions(
         vnode.el = el = content
       }
 
-      if (dirs) {
-        invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')
-      }
-
-      if (
-        (vnodeHooks = props && props.onVnodeMounted) ||
-        dirs ||
-        needCallTransitionHooks
-      ) {
-        queueEffectWithSuspense(() => {
-          vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode)
-          needCallTransitionHooks && transition!.enter(el)
-          dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted')
-        }, parentSuspense)
-      }
       // children
       if (
         shapeFlag & ShapeFlags.ARRAY_CHILDREN &&
@@ -446,8 +400,9 @@ export function createHydrationFunctions(
           hasMismatch = true
           if (__DEV__ && !hasWarned) {
             warn(
-              `Hydration children mismatch in <${vnode.type as string}>: ` +
-                `server rendered element contains more child nodes than client vdom.`
+              `Hydration children mismatch on`,
+              el,
+              `\nServer rendered element contains more child nodes than client vdom.`
             )
             hasWarned = true
           }
@@ -461,16 +416,82 @@ export function createHydrationFunctions(
           hasMismatch = true
           __DEV__ &&
             warn(
-              `Hydration text content mismatch in <${
-                vnode.type as string
-              }>:\n` +
-                `- Server rendered: ${el.textContent}\n` +
-                `- Client rendered: ${vnode.children as string}`
+              `Hydration text content mismatch on`,
+              el,
+              `\n  - rendered on server: ${vnode.children as string}` +
+                `\n  - expected on client: ${el.textContent}`
             )
           el.textContent = vnode.children as string
         }
       }
+
+      // props
+      if (props) {
+        if (
+          __DEV__ ||
+          forcePatch ||
+          !optimized ||
+          patchFlag & (PatchFlags.FULL_PROPS | PatchFlags.NEED_HYDRATION)
+        ) {
+          for (const key in props) {
+            // check hydration mismatch
+            if (__DEV__ && propHasMismatch(el, key, props[key])) {
+              hasMismatch = true
+            }
+            if (
+              (forcePatch &&
+                (key.endsWith('value') || key === 'indeterminate')) ||
+              (isOn(key) && !isReservedProp(key)) ||
+              // force hydrate v-bind with .prop modifiers
+              key[0] === '.'
+            ) {
+              patchProp(
+                el,
+                key,
+                null,
+                props[key],
+                false,
+                undefined,
+                parentComponent
+              )
+            }
+          }
+        } else if (props.onClick) {
+          // Fast path for click listeners (which is most often) to avoid
+          // iterating through props.
+          patchProp(
+            el,
+            'onClick',
+            null,
+            props.onClick,
+            false,
+            undefined,
+            parentComponent
+          )
+        }
+      }
+
+      // vnode / directive hooks
+      let vnodeHooks: VNodeHook | null | undefined
+      if ((vnodeHooks = props && props.onVnodeBeforeMount)) {
+        invokeVNodeHook(vnodeHooks, parentComponent, vnode)
+      }
+      if (dirs) {
+        invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')
+      }
+      if (
+        (vnodeHooks = props && props.onVnodeMounted) ||
+        dirs ||
+        needCallTransitionHooks
+      ) {
+        queueEffectWithSuspense(() => {
+          vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode)
+          needCallTransitionHooks && transition!.enter(el)
+          dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted')
+        }, parentSuspense)
+      }
     }
+
     return el.nextSibling
   }
 
@@ -506,8 +527,9 @@ export function createHydrationFunctions(
         hasMismatch = true
         if (__DEV__ && !hasWarned) {
           warn(
-            `Hydration children mismatch in <${container.tagName.toLowerCase()}>: ` +
-              `server rendered element contains fewer child nodes than client vdom.`
+            `Hydration children mismatch on`,
+            container,
+            `\nServer rendered element contains fewer child nodes than client vdom.`
           )
           hasWarned = true
         }
@@ -670,3 +692,58 @@ export function createHydrationFunctions(
 
   return [hydrate, hydrateNode] as const
 }
+
+/**
+ * Dev only
+ */
+function propHasMismatch(el: Element, key: string, clientValue: any): boolean {
+  let mismatchType: string | undefined
+  let mismatchKey: string | undefined
+  let actual: any
+  let expected: any
+  if (key === 'class') {
+    actual = el.className
+    expected = normalizeClass(clientValue)
+    if (actual !== expected) {
+      mismatchType = mismatchKey = `class`
+    }
+  } else if (key === 'style') {
+    actual = el.getAttribute('style')
+    expected = isString(clientValue)
+      ? clientValue
+      : stringifyStyle(normalizeStyle(clientValue))
+    if (actual !== expected) {
+      mismatchType = mismatchKey = 'style'
+    }
+  } else if (
+    (el instanceof SVGElement && isKnownSvgAttr(key)) ||
+    (el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key)))
+  ) {
+    actual = el.hasAttribute(key) && el.getAttribute(key)
+    expected = isBooleanAttr(key)
+      ? includeBooleanAttr(clientValue)
+        ? ''
+        : false
+      : String(clientValue)
+    if (actual !== expected) {
+      mismatchType = `attribute`
+      mismatchKey = key
+    }
+  }
+
+  if (mismatchType) {
+    const format = (v: any) =>
+      v === false ? `(not rendered)` : `${mismatchKey}="${v}"`
+    warn(
+      `Hydration ${mismatchType} mismatch on`,
+      el,
+      `\n  - rendered on server: ${format(actual)}` +
+        `\n  - expected on client: ${format(expected)}` +
+        `\n  Note: this mismatch is check-only. The DOM will not be rectified ` +
+        `in production due to performance overhead.` +
+        `\n  You should fix the source of the mismatch.`
+    )
+    return true
+  }
+  return false
+}

From bc7698dbfed9b5327a93565f9df336ae5a94d605 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Fri, 8 Dec 2023 14:11:15 +0530
Subject: [PATCH 40/47] feat(ssr): add
 `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__` feature flag (#9550)

---
 packages/global.d.ts                      |  1 +
 packages/runtime-core/src/featureFlags.ts |  5 +++++
 packages/runtime-core/src/hydration.ts    | 20 +++++++++++++-------
 packages/vue/README.md                    |  1 +
 rollup.config.js                          |  3 +++
 scripts/dev.js                            |  3 ++-
 scripts/usage-size.ts                     |  1 +
 vitest.config.ts                          |  1 +
 8 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/global.d.ts b/packages/global.d.ts
index f53d7b71acd..65f36d34775 100644
--- a/packages/global.d.ts
+++ b/packages/global.d.ts
@@ -17,6 +17,7 @@ declare var __COMPAT__: boolean
 declare var __FEATURE_OPTIONS_API__: boolean
 declare var __FEATURE_PROD_DEVTOOLS__: boolean
 declare var __FEATURE_SUSPENSE__: boolean
+declare var __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: boolean
 
 // for tests
 declare namespace jest {
diff --git a/packages/runtime-core/src/featureFlags.ts b/packages/runtime-core/src/featureFlags.ts
index e878407bcc8..267e69eef5c 100644
--- a/packages/runtime-core/src/featureFlags.ts
+++ b/packages/runtime-core/src/featureFlags.ts
@@ -20,6 +20,11 @@ export function initFeatureFlags() {
     getGlobalThis().__VUE_PROD_DEVTOOLS__ = false
   }
 
+  if (typeof __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__ !== 'boolean') {
+    __DEV__ && needWarn.push(`__VUE_PROD_HYDRATION_MISMATCH_DETAILS__`)
+    getGlobalThis().__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false
+  }
+
   if (__DEV__ && needWarn.length) {
     const multi = needWarn.length > 1
     console.warn(
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 35ab851953a..245d586a2c3 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -81,7 +81,7 @@ export function createHydrationFunctions(
 
   const hydrate: RootHydrateFunction = (vnode, container) => {
     if (!container.hasChildNodes()) {
-      __DEV__ &&
+      ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
         warn(
           `Attempting to hydrate existing markup but container is empty. ` +
             `Performing full mount instead.`
@@ -159,7 +159,7 @@ export function createHydrationFunctions(
         } else {
           if ((node as Text).data !== vnode.children) {
             hasMismatch = true
-            __DEV__ &&
+            ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
               warn(
                 `Hydration text mismatch in`,
                 node.parentNode,
@@ -326,7 +326,7 @@ export function createHydrationFunctions(
             rendererInternals,
             hydrateNode
           )
-        } else if (__DEV__) {
+        } else if (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) {
           warn('Invalid HostVNode type:', type, `(${typeof type})`)
         }
     }
@@ -398,7 +398,10 @@ export function createHydrationFunctions(
         let hasWarned = false
         while (next) {
           hasMismatch = true
-          if (__DEV__ && !hasWarned) {
+          if (
+            (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+            !hasWarned
+          ) {
             warn(
               `Hydration children mismatch on`,
               el,
@@ -414,7 +417,7 @@ export function createHydrationFunctions(
       } else if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
         if (el.textContent !== vnode.children) {
           hasMismatch = true
-          __DEV__ &&
+          ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
             warn(
               `Hydration text content mismatch on`,
               el,
@@ -525,7 +528,10 @@ export function createHydrationFunctions(
         continue
       } else {
         hasMismatch = true
-        if (__DEV__ && !hasWarned) {
+        if (
+          (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+          !hasWarned
+        ) {
           warn(
             `Hydration children mismatch on`,
             container,
@@ -595,7 +601,7 @@ export function createHydrationFunctions(
     isFragment: boolean
   ): Node | null => {
     hasMismatch = true
-    __DEV__ &&
+    ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
       warn(
         `Hydration node mismatch:\n- Client vnode:`,
         vnode.type,
diff --git a/packages/vue/README.md b/packages/vue/README.md
index a98bd997487..c41162cc1c6 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -37,6 +37,7 @@ Starting with 3.0.0-rc.3, `esm-bundler` builds now exposes global feature flags
 
 - `__VUE_OPTIONS_API__` (enable/disable Options API support, default: `true`)
 - `__VUE_PROD_DEVTOOLS__` (enable/disable devtools support in production, default: `false`)
+- `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__` (enable/disable detailed warnings for hydration mismatches in production, default: `false`)
 
 The build will work without configuring these flags, however it is **strongly recommended** to properly configure them in order to get proper tree-shaking in the final bundle. To configure these flags:
 
diff --git a/rollup.config.js b/rollup.config.js
index b7d38e4527a..3703faae280 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -180,6 +180,9 @@ function createConfig(format, output, plugins = []) {
         : `true`,
       __FEATURE_PROD_DEVTOOLS__: isBundlerESMBuild
         ? `__VUE_PROD_DEVTOOLS__`
+        : `false`,
+      __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: isBundlerESMBuild
+        ? `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__`
         : `false`
     }
 
diff --git a/scripts/dev.js b/scripts/dev.js
index 4820723778d..5f996a29831 100644
--- a/scripts/dev.js
+++ b/scripts/dev.js
@@ -124,7 +124,8 @@ esbuild
       __COMPAT__: String(target === 'vue-compat'),
       __FEATURE_SUSPENSE__: `true`,
       __FEATURE_OPTIONS_API__: `true`,
-      __FEATURE_PROD_DEVTOOLS__: `false`
+      __FEATURE_PROD_DEVTOOLS__: `false`,
+      __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: `false`
     }
   })
   .then(ctx => ctx.watch())
diff --git a/scripts/usage-size.ts b/scripts/usage-size.ts
index 1a1013b7847..31ee85daebb 100644
--- a/scripts/usage-size.ts
+++ b/scripts/usage-size.ts
@@ -71,6 +71,7 @@ async function generateBundle(preset: Preset) {
       replace({
         'process.env.NODE_ENV': '"production"',
         __VUE_PROD_DEVTOOLS__: 'false',
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
         __VUE_OPTIONS_API__: 'true',
         preventAssignment: true
       })
diff --git a/vitest.config.ts b/vitest.config.ts
index e5d5f59345f..ced861a0373 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -15,6 +15,7 @@ export default defineConfig({
     __FEATURE_OPTIONS_API__: true,
     __FEATURE_SUSPENSE__: true,
     __FEATURE_PROD_DEVTOOLS__: false,
+    __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
     __COMPAT__: true
   },
   resolve: {

From d42b6ba3f530746eb1221eb7a4be0f44eb56f7d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20G=C3=BCndel?=
 <5798652+sto3psl@users.noreply.github.com>
Date: Fri, 8 Dec 2023 11:25:01 +0100
Subject: [PATCH 41/47] feat: MathML support (#7836)

close #7820
---
 packages/compiler-dom/src/parserOptions.ts    |   4 +-
 packages/runtime-core/src/apiCreateApp.ts     |  22 ++-
 packages/runtime-core/src/compat/global.ts    |  14 +-
 .../runtime-core/src/components/KeepAlive.ts  |  15 +-
 .../runtime-core/src/components/Suspense.ts   |  51 ++---
 .../runtime-core/src/components/Teleport.ts   |  27 ++-
 packages/runtime-core/src/hydration.ts        |  24 ++-
 packages/runtime-core/src/index.ts            |   3 +-
 packages/runtime-core/src/renderer.ts         | 182 ++++++++++--------
 .../runtime-dom/__tests__/nodeOps.spec.ts     |  22 ++-
 .../runtime-dom/__tests__/patchAttrs.spec.ts  |   6 +-
 .../runtime-dom/__tests__/patchClass.spec.ts  |   2 +-
 packages/runtime-dom/src/index.ts             |  24 ++-
 packages/runtime-dom/src/nodeOps.ts           |  26 ++-
 packages/runtime-dom/src/patchProp.ts         |   3 +-
 packages/shared/src/domTagConfig.ts           |  12 ++
 .../vue/__tests__/mathmlNamespace.spec.ts     |  80 ++++++++
 packages/vue/__tests__/svgNamespace.spec.ts   |  10 +-
 scripts/setupVitest.ts                        |   2 +
 19 files changed, 372 insertions(+), 157 deletions(-)
 create mode 100644 packages/vue/__tests__/mathmlNamespace.spec.ts

diff --git a/packages/compiler-dom/src/parserOptions.ts b/packages/compiler-dom/src/parserOptions.ts
index 2b5e9f01084..244251b9ba9 100644
--- a/packages/compiler-dom/src/parserOptions.ts
+++ b/packages/compiler-dom/src/parserOptions.ts
@@ -1,12 +1,12 @@
 import { ParserOptions, NodeTypes, Namespaces } from '@vue/compiler-core'
-import { isVoidTag, isHTMLTag, isSVGTag } from '@vue/shared'
+import { isVoidTag, isHTMLTag, isSVGTag, isMathMLTag } from '@vue/shared'
 import { TRANSITION, TRANSITION_GROUP } from './runtimeHelpers'
 import { decodeHtmlBrowser } from './decodeHtmlBrowser'
 
 export const parserOptions: ParserOptions = {
   parseMode: 'html',
   isVoidTag,
-  isNativeTag: tag => isHTMLTag(tag) || isSVGTag(tag),
+  isNativeTag: tag => isHTMLTag(tag) || isSVGTag(tag) || isMathMLTag(tag),
   isPreTag: tag => tag === 'pre',
   decodeEntities: __BROWSER__ ? decodeHtmlBrowser : undefined,
 
diff --git a/packages/runtime-core/src/apiCreateApp.ts b/packages/runtime-core/src/apiCreateApp.ts
index 7c0a15b2e98..423c81d7441 100644
--- a/packages/runtime-core/src/apiCreateApp.ts
+++ b/packages/runtime-core/src/apiCreateApp.ts
@@ -16,7 +16,7 @@ import {
   ComponentPublicInstance
 } from './componentPublicInstance'
 import { Directive, validateDirectiveName } from './directives'
-import { RootRenderFunction } from './renderer'
+import { ElementNamespace, RootRenderFunction } from './renderer'
 import { InjectionKey } from './apiInject'
 import { warn } from './warning'
 import { createVNode, cloneVNode, VNode } from './vnode'
@@ -47,7 +47,7 @@ export interface App<HostElement = any> {
   mount(
     rootContainer: HostElement | string,
     isHydrate?: boolean,
-    isSVG?: boolean
+    namespace?: boolean | ElementNamespace
   ): ComponentPublicInstance
   unmount(): void
   provide<T>(key: InjectionKey<T> | string, value: T): this
@@ -297,7 +297,7 @@ export function createAppAPI<HostElement>(
       mount(
         rootContainer: HostElement,
         isHydrate?: boolean,
-        isSVG?: boolean
+        namespace?: boolean | ElementNamespace
       ): any {
         if (!isMounted) {
           // #5571
@@ -313,17 +313,29 @@ export function createAppAPI<HostElement>(
           // this will be set on the root instance on initial mount.
           vnode.appContext = context
 
+          if (namespace === true) {
+            namespace = 'svg'
+          } else if (namespace === false) {
+            namespace = undefined
+          }
+
           // HMR root reload
           if (__DEV__) {
             context.reload = () => {
-              render(cloneVNode(vnode), rootContainer, isSVG)
+              // casting to ElementNamespace because TS doesn't guarantee type narrowing
+              // over function boundaries
+              render(
+                cloneVNode(vnode),
+                rootContainer,
+                namespace as ElementNamespace
+              )
             }
           }
 
           if (isHydrate && hydrate) {
             hydrate(vnode as VNode<Node, Element>, rootContainer as any)
           } else {
-            render(vnode, rootContainer, isSVG)
+            render(vnode, rootContainer, namespace)
           }
           isMounted = true
           app._container = rootContainer
diff --git a/packages/runtime-core/src/compat/global.ts b/packages/runtime-core/src/compat/global.ts
index 2efceb87fa6..0379bb67e8e 100644
--- a/packages/runtime-core/src/compat/global.ts
+++ b/packages/runtime-core/src/compat/global.ts
@@ -17,7 +17,7 @@ import {
 } from '@vue/shared'
 import { warn } from '../warning'
 import { cloneVNode, createVNode } from '../vnode'
-import { RootRenderFunction } from '../renderer'
+import { ElementNamespace, RootRenderFunction } from '../renderer'
 import {
   App,
   AppConfig,
@@ -503,7 +503,13 @@ function installCompatMount(
         container = selectorOrEl || document.createElement('div')
       }
 
-      const isSVG = container instanceof SVGElement
+      let namespace: ElementNamespace
+      if (container instanceof SVGElement) namespace = 'svg'
+      else if (
+        typeof MathMLElement === 'function' &&
+        container instanceof MathMLElement
+      )
+        namespace = 'mathml'
 
       // HMR root reload
       if (__DEV__) {
@@ -511,7 +517,7 @@ function installCompatMount(
           const cloned = cloneVNode(vnode)
           // compat mode will use instance if not reset to null
           cloned.component = null
-          render(cloned, container, isSVG)
+          render(cloned, container, namespace)
         }
       }
 
@@ -538,7 +544,7 @@ function installCompatMount(
       container.innerHTML = ''
 
       // TODO hydration
-      render(vnode, container, isSVG)
+      render(vnode, container, namespace)
 
       if (container instanceof Element) {
         container.removeAttribute('v-cloak')
diff --git a/packages/runtime-core/src/components/KeepAlive.ts b/packages/runtime-core/src/components/KeepAlive.ts
index 8c1b6318887..8f9a94f1109 100644
--- a/packages/runtime-core/src/components/KeepAlive.ts
+++ b/packages/runtime-core/src/components/KeepAlive.ts
@@ -37,7 +37,8 @@ import {
   queuePostRenderEffect,
   MoveType,
   RendererElement,
-  RendererNode
+  RendererNode,
+  ElementNamespace
 } from '../renderer'
 import { setTransitionHooks } from './BaseTransition'
 import { ComponentRenderContext } from '../componentPublicInstance'
@@ -64,7 +65,7 @@ export interface KeepAliveContext extends ComponentRenderContext {
     vnode: VNode,
     container: RendererElement,
     anchor: RendererNode | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     optimized: boolean
   ) => void
   deactivate: (vnode: VNode) => void
@@ -125,7 +126,13 @@ const KeepAliveImpl: ComponentOptions = {
     } = sharedContext
     const storageContainer = createElement('div')
 
-    sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {
+    sharedContext.activate = (
+      vnode,
+      container,
+      anchor,
+      namespace,
+      optimized
+    ) => {
       const instance = vnode.component!
       move(vnode, container, anchor, MoveType.ENTER, parentSuspense)
       // in case props have changed
@@ -136,7 +143,7 @@ const KeepAliveImpl: ComponentOptions = {
         anchor,
         instance,
         parentSuspense,
-        isSVG,
+        namespace,
         vnode.slotScopeIds,
         optimized
       )
diff --git a/packages/runtime-core/src/components/Suspense.ts b/packages/runtime-core/src/components/Suspense.ts
index 5e5521b09be..3668418090b 100644
--- a/packages/runtime-core/src/components/Suspense.ts
+++ b/packages/runtime-core/src/components/Suspense.ts
@@ -18,7 +18,8 @@ import {
   MoveType,
   SetupRenderEffectFn,
   RendererNode,
-  RendererElement
+  RendererElement,
+  ElementNamespace
 } from '../renderer'
 import { queuePostFlushCb } from '../scheduler'
 import { filterSingleRoot, updateHOCHostEl } from '../componentRenderUtils'
@@ -63,7 +64,7 @@ export const SuspenseImpl = {
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
     optimized: boolean,
     // platform-specific impl passed from renderer
@@ -76,7 +77,7 @@ export const SuspenseImpl = {
         anchor,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized,
         rendererInternals
@@ -88,7 +89,7 @@ export const SuspenseImpl = {
         container,
         anchor,
         parentComponent,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized,
         rendererInternals
@@ -130,7 +131,7 @@ function mountSuspense(
   anchor: RendererNode | null,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
   optimized: boolean,
   rendererInternals: RendererInternals
@@ -147,7 +148,7 @@ function mountSuspense(
     container,
     hiddenContainer,
     anchor,
-    isSVG,
+    namespace,
     slotScopeIds,
     optimized,
     rendererInternals
@@ -161,7 +162,7 @@ function mountSuspense(
     null,
     parentComponent,
     suspense,
-    isSVG,
+    namespace,
     slotScopeIds
   )
   // now check if we have encountered any async deps
@@ -179,7 +180,7 @@ function mountSuspense(
       anchor,
       parentComponent,
       null, // fallback tree will not have suspense context
-      isSVG,
+      namespace,
       slotScopeIds
     )
     setActiveBranch(suspense, vnode.ssFallback!)
@@ -195,7 +196,7 @@ function patchSuspense(
   container: RendererElement,
   anchor: RendererNode | null,
   parentComponent: ComponentInternalInstance | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
   optimized: boolean,
   { p: patch, um: unmount, o: { createElement } }: RendererInternals
@@ -218,7 +219,7 @@ function patchSuspense(
         null,
         parentComponent,
         suspense,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized
       )
@@ -232,7 +233,7 @@ function patchSuspense(
           anchor,
           parentComponent,
           null, // fallback tree will not have suspense context
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         )
@@ -267,7 +268,7 @@ function patchSuspense(
           null,
           parentComponent,
           suspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         )
@@ -281,7 +282,7 @@ function patchSuspense(
             anchor,
             parentComponent,
             null, // fallback tree will not have suspense context
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           )
@@ -296,7 +297,7 @@ function patchSuspense(
           anchor,
           parentComponent,
           suspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         )
@@ -311,7 +312,7 @@ function patchSuspense(
           null,
           parentComponent,
           suspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         )
@@ -330,7 +331,7 @@ function patchSuspense(
         anchor,
         parentComponent,
         suspense,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized
       )
@@ -349,7 +350,7 @@ function patchSuspense(
         null,
         parentComponent,
         suspense,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized
       )
@@ -376,7 +377,7 @@ export interface SuspenseBoundary {
   vnode: VNode<RendererNode, RendererElement, SuspenseProps>
   parent: SuspenseBoundary | null
   parentComponent: ComponentInternalInstance | null
-  isSVG: boolean
+  namespace: ElementNamespace
   container: RendererElement
   hiddenContainer: RendererElement
   anchor: RendererNode | null
@@ -413,7 +414,7 @@ function createSuspenseBoundary(
   container: RendererElement,
   hiddenContainer: RendererElement,
   anchor: RendererNode | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
   optimized: boolean,
   rendererInternals: RendererInternals,
@@ -455,7 +456,7 @@ function createSuspenseBoundary(
     vnode,
     parent: parentSuspense,
     parentComponent,
-    isSVG,
+    namespace,
     container,
     hiddenContainer,
     anchor,
@@ -576,7 +577,7 @@ function createSuspenseBoundary(
         return
       }
 
-      const { vnode, activeBranch, parentComponent, container, isSVG } =
+      const { vnode, activeBranch, parentComponent, container, namespace } =
         suspense
 
       // invoke @fallback event
@@ -594,7 +595,7 @@ function createSuspenseBoundary(
           next(activeBranch!),
           parentComponent,
           null, // fallback tree will not have suspense context
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         )
@@ -675,7 +676,7 @@ function createSuspenseBoundary(
             // consider the comment placeholder case.
             hydratedEl ? null : next(instance.subTree),
             suspense,
-            isSVG,
+            namespace,
             optimized
           )
           if (placeholder) {
@@ -721,7 +722,7 @@ function hydrateSuspense(
   vnode: VNode,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
   optimized: boolean,
   rendererInternals: RendererInternals,
@@ -742,7 +743,7 @@ function hydrateSuspense(
     node.parentNode!,
     document.createElement('div'),
     null,
-    isSVG,
+    namespace,
     slotScopeIds,
     optimized,
     rendererInternals,
diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
index d1327db8ee8..aae7deff336 100644
--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/packages/runtime-core/src/components/Teleport.ts
@@ -6,7 +6,8 @@ import {
   RendererElement,
   RendererNode,
   RendererOptions,
-  traverseStaticChildren
+  traverseStaticChildren,
+  ElementNamespace
 } from '../renderer'
 import { VNode, VNodeArrayChildren, VNodeProps } from '../vnode'
 import { isString, ShapeFlags } from '@vue/shared'
@@ -28,6 +29,9 @@ const isTeleportDisabled = (props: VNode['props']): boolean =>
 const isTargetSVG = (target: RendererElement): boolean =>
   typeof SVGElement !== 'undefined' && target instanceof SVGElement
 
+const isTargetMathML = (target: RendererElement): boolean =>
+  typeof MathMLElement === 'function' && target instanceof MathMLElement
+
 const resolveTarget = <T = RendererElement>(
   props: TeleportProps | null,
   select: RendererOptions['querySelector']
@@ -72,7 +76,7 @@ export const TeleportImpl = {
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
     optimized: boolean,
     internals: RendererInternals
@@ -109,7 +113,11 @@ export const TeleportImpl = {
       if (target) {
         insert(targetAnchor, target)
         // #2652 we could be teleporting from a non-SVG tree into an SVG tree
-        isSVG = isSVG || isTargetSVG(target)
+        if (namespace === 'svg' || isTargetSVG(target)) {
+          namespace = 'svg'
+        } else if (namespace === 'mathml' || isTargetMathML(target)) {
+          namespace = 'mathml'
+        }
       } else if (__DEV__ && !disabled) {
         warn('Invalid Teleport target on mount:', target, `(${typeof target})`)
       }
@@ -124,7 +132,7 @@ export const TeleportImpl = {
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           )
@@ -145,7 +153,12 @@ export const TeleportImpl = {
       const wasDisabled = isTeleportDisabled(n1.props)
       const currentContainer = wasDisabled ? container : target
       const currentAnchor = wasDisabled ? mainAnchor : targetAnchor
-      isSVG = isSVG || isTargetSVG(target)
+
+      if (namespace === 'svg' || isTargetSVG(target)) {
+        namespace = 'svg'
+      } else if (namespace === 'mathml' || isTargetMathML(target)) {
+        namespace = 'mathml'
+      }
 
       if (dynamicChildren) {
         // fast path when the teleport happens to be a block root
@@ -155,7 +168,7 @@ export const TeleportImpl = {
           currentContainer,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds
         )
         // even in block tree mode we need to make sure all root-level nodes
@@ -170,7 +183,7 @@ export const TeleportImpl = {
           currentAnchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           false
         )
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 245d586a2c3..106948a1278 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -52,7 +52,17 @@ enum DOMNodeTypes {
 let hasMismatch = false
 
 const isSVGContainer = (container: Element) =>
-  /svg/.test(container.namespaceURI!) && container.tagName !== 'foreignObject'
+  container.namespaceURI!.includes('svg') &&
+  container.tagName !== 'foreignObject'
+
+const isMathMLContainer = (container: Element) =>
+  container.namespaceURI!.includes('MathML')
+
+const getContainerType = (container: Element): 'svg' | 'mathml' | undefined => {
+  if (isSVGContainer(container)) return 'svg'
+  if (isMathMLContainer(container)) return 'mathml'
+  return undefined
+}
 
 const isComment = (node: Node): node is Comment =>
   node.nodeType === DOMNodeTypes.COMMENT
@@ -277,7 +287,7 @@ export function createHydrationFunctions(
             null,
             parentComponent,
             parentSuspense,
-            isSVGContainer(container),
+            getContainerType(container),
             optimized
           )
 
@@ -320,7 +330,7 @@ export function createHydrationFunctions(
             vnode,
             parentComponent,
             parentSuspense,
-            isSVGContainer(parentNode(node)!),
+            getContainerType(parentNode(node)!),
             slotScopeIds,
             optimized,
             rendererInternals,
@@ -453,7 +463,7 @@ export function createHydrationFunctions(
                 key,
                 null,
                 props[key],
-                false,
+                undefined,
                 undefined,
                 parentComponent
               )
@@ -467,7 +477,7 @@ export function createHydrationFunctions(
             'onClick',
             null,
             props.onClick,
-            false,
+            undefined,
             undefined,
             parentComponent
           )
@@ -547,7 +557,7 @@ export function createHydrationFunctions(
           null,
           parentComponent,
           parentSuspense,
-          isSVGContainer(container),
+          getContainerType(container),
           slotScopeIds
         )
       }
@@ -639,7 +649,7 @@ export function createHydrationFunctions(
       next,
       parentComponent,
       parentSuspense,
-      isSVGContainer(container),
+      getContainerType(container),
       slotScopeIds
     )
     return next
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index fcc460c43d0..f8d21242b83 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -260,7 +260,8 @@ export type {
   RendererElement,
   HydrationRenderer,
   RendererOptions,
-  RootRenderFunction
+  RootRenderFunction,
+  ElementNamespace
 } from './renderer'
 export type { RootHydrateFunction } from './hydration'
 export type { Slot, Slots, SlotsType } from './componentSlots'
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index fc762af3d96..52a3aa1404c 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -83,10 +83,12 @@ export interface HydrationRenderer extends Renderer<Element | ShadowRoot> {
   hydrate: RootHydrateFunction
 }
 
+export type ElementNamespace = 'svg' | 'mathml' | undefined
+
 export type RootRenderFunction<HostElement = RendererElement> = (
   vnode: VNode | null,
   container: HostElement,
-  isSVG?: boolean
+  namespace?: ElementNamespace
 ) => void
 
 export interface RendererOptions<
@@ -98,7 +100,7 @@ export interface RendererOptions<
     key: string,
     prevValue: any,
     nextValue: any,
-    isSVG?: boolean,
+    namespace?: ElementNamespace,
     prevChildren?: VNode<HostNode, HostElement>[],
     parentComponent?: ComponentInternalInstance | null,
     parentSuspense?: SuspenseBoundary | null,
@@ -108,7 +110,7 @@ export interface RendererOptions<
   remove(el: HostNode): void
   createElement(
     type: string,
-    isSVG?: boolean,
+    namespace?: ElementNamespace,
     isCustomizedBuiltIn?: string,
     vnodeProps?: (VNodeProps & { [key: string]: any }) | null
   ): HostElement
@@ -125,7 +127,7 @@ export interface RendererOptions<
     content: string,
     parent: HostElement,
     anchor: HostNode | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     start?: HostNode | null,
     end?: HostNode | null
   ): [HostNode, HostNode]
@@ -170,7 +172,7 @@ type PatchFn = (
   anchor?: RendererNode | null,
   parentComponent?: ComponentInternalInstance | null,
   parentSuspense?: SuspenseBoundary | null,
-  isSVG?: boolean,
+  namespace?: ElementNamespace,
   slotScopeIds?: string[] | null,
   optimized?: boolean
 ) => void
@@ -181,7 +183,7 @@ type MountChildrenFn = (
   anchor: RendererNode | null,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
   optimized: boolean,
   start?: number
@@ -194,7 +196,7 @@ type PatchChildrenFn = (
   anchor: RendererNode | null,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
   optimized: boolean
 ) => void
@@ -205,7 +207,7 @@ type PatchBlockChildrenFn = (
   fallbackContainer: RendererElement,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null
 ) => void
 
@@ -244,7 +246,7 @@ export type MountComponentFn = (
   anchor: RendererNode | null,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   optimized: boolean
 ) => void
 
@@ -261,7 +263,7 @@ export type SetupRenderEffectFn = (
   container: RendererElement,
   anchor: RendererNode | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   optimized: boolean
 ) => void
 
@@ -362,7 +364,7 @@ function baseCreateRenderer(
     anchor = null,
     parentComponent = null,
     parentSuspense = null,
-    isSVG = false,
+    namespace = undefined,
     slotScopeIds = null,
     optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren
   ) => {
@@ -392,9 +394,9 @@ function baseCreateRenderer(
         break
       case Static:
         if (n1 == null) {
-          mountStaticNode(n2, container, anchor, isSVG)
+          mountStaticNode(n2, container, anchor, namespace)
         } else if (__DEV__) {
-          patchStaticNode(n1, n2, container, isSVG)
+          patchStaticNode(n1, n2, container, namespace)
         }
         break
       case Fragment:
@@ -405,7 +407,7 @@ function baseCreateRenderer(
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         )
@@ -419,7 +421,7 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           )
@@ -431,7 +433,7 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           )
@@ -443,7 +445,7 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized,
             internals
@@ -456,7 +458,7 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized,
             internals
@@ -509,7 +511,7 @@ function baseCreateRenderer(
     n2: VNode,
     container: RendererElement,
     anchor: RendererNode | null,
-    isSVG: boolean
+    namespace: ElementNamespace
   ) => {
     // static nodes are only present when used with compiler-dom/runtime-dom
     // which guarantees presence of hostInsertStaticContent.
@@ -517,7 +519,7 @@ function baseCreateRenderer(
       n2.children as string,
       container,
       anchor,
-      isSVG,
+      namespace,
       n2.el,
       n2.anchor
     )
@@ -530,7 +532,7 @@ function baseCreateRenderer(
     n1: VNode,
     n2: VNode,
     container: RendererElement,
-    isSVG: boolean
+    namespace: ElementNamespace
   ) => {
     // static nodes are only patched during dev for HMR
     if (n2.children !== n1.children) {
@@ -542,7 +544,7 @@ function baseCreateRenderer(
         n2.children as string,
         container,
         anchor,
-        isSVG
+        namespace
       )
     } else {
       n2.el = n1.el
@@ -581,11 +583,16 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
     optimized: boolean
   ) => {
-    isSVG = isSVG || n2.type === 'svg'
+    if (n2.type === 'svg') {
+      namespace = 'svg'
+    } else if (n2.type === 'math') {
+      namespace = 'mathml'
+    }
+
     if (n1 == null) {
       mountElement(
         n2,
@@ -593,7 +600,7 @@ function baseCreateRenderer(
         anchor,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized
       )
@@ -603,7 +610,7 @@ function baseCreateRenderer(
         n2,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized
       )
@@ -616,17 +623,17 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
     optimized: boolean
   ) => {
     let el: RendererElement
     let vnodeHook: VNodeHook | undefined | null
-    const { type, props, shapeFlag, transition, dirs } = vnode
+    const { props, shapeFlag, transition, dirs } = vnode
 
     el = vnode.el = hostCreateElement(
       vnode.type as string,
-      isSVG,
+      namespace,
       props && props.is,
       props
     )
@@ -642,7 +649,7 @@ function baseCreateRenderer(
         null,
         parentComponent,
         parentSuspense,
-        isSVG && type !== 'foreignObject',
+        resolveChildrenNamespace(vnode, namespace),
         slotScopeIds,
         optimized
       )
@@ -662,7 +669,7 @@ function baseCreateRenderer(
             key,
             null,
             props[key],
-            isSVG,
+            namespace,
             vnode.children as VNode[],
             parentComponent,
             parentSuspense,
@@ -680,7 +687,7 @@ function baseCreateRenderer(
        * affect non-DOM renderers)
        */
       if ('value' in props) {
-        hostPatchProp(el, 'value', null, props.value)
+        hostPatchProp(el, 'value', null, props.value, namespace)
       }
       if ((vnodeHook = props.onVnodeBeforeMount)) {
         invokeVNodeHook(vnodeHook, parentComponent, vnode)
@@ -764,7 +771,7 @@ function baseCreateRenderer(
     anchor,
     parentComponent,
     parentSuspense,
-    isSVG,
+    namespace: ElementNamespace,
     slotScopeIds,
     optimized,
     start = 0
@@ -780,7 +787,7 @@ function baseCreateRenderer(
         anchor,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized
       )
@@ -792,7 +799,7 @@ function baseCreateRenderer(
     n2: VNode,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
     optimized: boolean
   ) => {
@@ -822,7 +829,6 @@ function baseCreateRenderer(
       dynamicChildren = null
     }
 
-    const areChildrenSVG = isSVG && n2.type !== 'foreignObject'
     if (dynamicChildren) {
       patchBlockChildren(
         n1.dynamicChildren!,
@@ -830,7 +836,7 @@ function baseCreateRenderer(
         el,
         parentComponent,
         parentSuspense,
-        areChildrenSVG,
+        resolveChildrenNamespace(n2, namespace),
         slotScopeIds
       )
       if (__DEV__) {
@@ -846,7 +852,7 @@ function baseCreateRenderer(
         null,
         parentComponent,
         parentSuspense,
-        areChildrenSVG,
+        resolveChildrenNamespace(n2, namespace),
         slotScopeIds,
         false
       )
@@ -866,21 +872,21 @@ function baseCreateRenderer(
           newProps,
           parentComponent,
           parentSuspense,
-          isSVG
+          namespace
         )
       } else {
         // class
         // this flag is matched when the element has dynamic class bindings.
         if (patchFlag & PatchFlags.CLASS) {
           if (oldProps.class !== newProps.class) {
-            hostPatchProp(el, 'class', null, newProps.class, isSVG)
+            hostPatchProp(el, 'class', null, newProps.class, namespace)
           }
         }
 
         // style
         // this flag is matched when the element has dynamic style bindings
         if (patchFlag & PatchFlags.STYLE) {
-          hostPatchProp(el, 'style', oldProps.style, newProps.style, isSVG)
+          hostPatchProp(el, 'style', oldProps.style, newProps.style, namespace)
         }
 
         // props
@@ -903,7 +909,7 @@ function baseCreateRenderer(
                 key,
                 prev,
                 next,
-                isSVG,
+                namespace,
                 n1.children as VNode[],
                 parentComponent,
                 parentSuspense,
@@ -930,7 +936,7 @@ function baseCreateRenderer(
         newProps,
         parentComponent,
         parentSuspense,
-        isSVG
+        namespace
       )
     }
 
@@ -949,7 +955,7 @@ function baseCreateRenderer(
     fallbackContainer,
     parentComponent,
     parentSuspense,
-    isSVG,
+    namespace: ElementNamespace,
     slotScopeIds
   ) => {
     for (let i = 0; i < newChildren.length; i++) {
@@ -979,7 +985,7 @@ function baseCreateRenderer(
         null,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
         true
       )
@@ -993,7 +999,7 @@ function baseCreateRenderer(
     newProps: Data,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean
+    namespace: ElementNamespace
   ) => {
     if (oldProps !== newProps) {
       if (oldProps !== EMPTY_OBJ) {
@@ -1004,7 +1010,7 @@ function baseCreateRenderer(
               key,
               oldProps[key],
               null,
-              isSVG,
+              namespace,
               vnode.children as VNode[],
               parentComponent,
               parentSuspense,
@@ -1025,7 +1031,7 @@ function baseCreateRenderer(
             key,
             prev,
             next,
-            isSVG,
+            namespace,
             vnode.children as VNode[],
             parentComponent,
             parentSuspense,
@@ -1034,7 +1040,7 @@ function baseCreateRenderer(
         }
       }
       if ('value' in newProps) {
-        hostPatchProp(el, 'value', oldProps.value, newProps.value)
+        hostPatchProp(el, 'value', oldProps.value, newProps.value, namespace)
       }
     }
   }
@@ -1046,7 +1052,7 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
     optimized: boolean
   ) => {
@@ -1085,7 +1091,7 @@ function baseCreateRenderer(
         fragmentEndAnchor,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized
       )
@@ -1106,7 +1112,7 @@ function baseCreateRenderer(
           container,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds
         )
         if (__DEV__) {
@@ -1134,7 +1140,7 @@ function baseCreateRenderer(
           fragmentEndAnchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         )
@@ -1149,7 +1155,7 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
     optimized: boolean
   ) => {
@@ -1160,7 +1166,7 @@ function baseCreateRenderer(
           n2,
           container,
           anchor,
-          isSVG,
+          namespace,
           optimized
         )
       } else {
@@ -1170,7 +1176,7 @@ function baseCreateRenderer(
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           optimized
         )
       }
@@ -1185,7 +1191,7 @@ function baseCreateRenderer(
     anchor,
     parentComponent,
     parentSuspense,
-    isSVG,
+    namespace: ElementNamespace,
     optimized
   ) => {
     // 2.x compat may pre-create the component instance before actually
@@ -1245,7 +1251,7 @@ function baseCreateRenderer(
       container,
       anchor,
       parentSuspense,
-      isSVG,
+      namespace,
       optimized
     )
 
@@ -1296,7 +1302,7 @@ function baseCreateRenderer(
     container,
     anchor,
     parentSuspense,
-    isSVG,
+    namespace: ElementNamespace,
     optimized
   ) => {
     const componentUpdateFn = () => {
@@ -1380,7 +1386,7 @@ function baseCreateRenderer(
             anchor,
             instance,
             parentSuspense,
-            isSVG
+            namespace
           )
           if (__DEV__) {
             endMeasure(instance, `patch`)
@@ -1499,7 +1505,7 @@ function baseCreateRenderer(
           getNextHostNode(prevTree),
           instance,
           parentSuspense,
-          isSVG
+          namespace
         )
         if (__DEV__) {
           endMeasure(instance, `patch`)
@@ -1599,7 +1605,7 @@ function baseCreateRenderer(
     anchor,
     parentComponent,
     parentSuspense,
-    isSVG,
+    namespace: ElementNamespace,
     slotScopeIds,
     optimized = false
   ) => {
@@ -1620,7 +1626,7 @@ function baseCreateRenderer(
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         )
@@ -1634,7 +1640,7 @@ function baseCreateRenderer(
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         )
@@ -1663,7 +1669,7 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           )
@@ -1685,7 +1691,7 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           )
@@ -1701,7 +1707,7 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
     optimized: boolean
   ) => {
@@ -1722,7 +1728,7 @@ function baseCreateRenderer(
         null,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized
       )
@@ -1745,7 +1751,7 @@ function baseCreateRenderer(
         anchor,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized,
         commonLength
@@ -1761,7 +1767,7 @@ function baseCreateRenderer(
     parentAnchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
     optimized: boolean
   ) => {
@@ -1786,7 +1792,7 @@ function baseCreateRenderer(
           null,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         )
@@ -1812,7 +1818,7 @@ function baseCreateRenderer(
           null,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         )
@@ -1844,7 +1850,7 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           )
@@ -1947,7 +1953,7 @@ function baseCreateRenderer(
             null,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           )
@@ -1976,7 +1982,7 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           )
@@ -2321,13 +2327,21 @@ function baseCreateRenderer(
     return hostNextSibling((vnode.anchor || vnode.el)!)
   }
 
-  const render: RootRenderFunction = (vnode, container, isSVG) => {
+  const render: RootRenderFunction = (vnode, container, namespace) => {
     if (vnode == null) {
       if (container._vnode) {
         unmount(container._vnode, null, null, true)
       }
     } else {
-      patch(container._vnode || null, vnode, container, null, null, null, isSVG)
+      patch(
+        container._vnode || null,
+        vnode,
+        container,
+        null,
+        null,
+        null,
+        namespace
+      )
     }
     flushPreFlushCbs()
     flushPostFlushCbs()
@@ -2362,6 +2376,20 @@ function baseCreateRenderer(
   }
 }
 
+function resolveChildrenNamespace(
+  { type, props }: VNode,
+  currentNamespace: ElementNamespace
+): ElementNamespace {
+  return (currentNamespace === 'svg' && type === 'foreignObject') ||
+    (currentNamespace === 'mathml' &&
+      type === 'annotation-xml' &&
+      props &&
+      props.encoding &&
+      props.encoding.includes('html'))
+    ? undefined
+    : currentNamespace
+}
+
 function toggleRecurse(
   { effect, update }: ComponentInternalInstance,
   allowed: boolean
diff --git a/packages/runtime-dom/__tests__/nodeOps.spec.ts b/packages/runtime-dom/__tests__/nodeOps.spec.ts
index 2573974c955..87adafd6696 100644
--- a/packages/runtime-dom/__tests__/nodeOps.spec.ts
+++ b/packages/runtime-dom/__tests__/nodeOps.spec.ts
@@ -2,7 +2,7 @@ import { nodeOps, svgNS } from '../src/nodeOps'
 
 describe('runtime-dom: node-ops', () => {
   test("the <select>'s multiple attr should be set in createElement", () => {
-    const el = nodeOps.createElement('select', false, undefined, {
+    const el = nodeOps.createElement('select', undefined, undefined, {
       multiple: ''
     }) as HTMLSelectElement
     const option1 = nodeOps.createElement('option') as HTMLOptionElement
@@ -21,7 +21,12 @@ describe('runtime-dom: node-ops', () => {
     test('fresh insertion', () => {
       const content = `<div>one</div><div>two</div>three`
       const parent = document.createElement('div')
-      const nodes = nodeOps.insertStaticContent!(content, parent, null, false)
+      const nodes = nodeOps.insertStaticContent!(
+        content,
+        parent,
+        null,
+        undefined
+      )
       expect(parent.innerHTML).toBe(content)
       expect(nodes[0]).toBe(parent.firstChild)
       expect(nodes[1]).toBe(parent.lastChild)
@@ -33,7 +38,12 @@ describe('runtime-dom: node-ops', () => {
       const parent = document.createElement('div')
       parent.innerHTML = existing
       const anchor = parent.firstChild
-      const nodes = nodeOps.insertStaticContent!(content, parent, anchor, false)
+      const nodes = nodeOps.insertStaticContent!(
+        content,
+        parent,
+        anchor,
+        undefined
+      )
       expect(parent.innerHTML).toBe(content + existing)
       expect(nodes[0]).toBe(parent.firstChild)
       expect(nodes[1]).toBe(parent.childNodes[parent.childNodes.length - 2])
@@ -46,7 +56,7 @@ describe('runtime-dom: node-ops', () => {
         content,
         parent,
         null,
-        true
+        'svg'
       )
       expect(parent.innerHTML).toBe(content)
       expect(first).toBe(parent.firstChild)
@@ -65,7 +75,7 @@ describe('runtime-dom: node-ops', () => {
         content,
         parent,
         anchor,
-        true
+        'svg'
       )
       expect(parent.innerHTML).toBe(content + existing)
       expect(first).toBe(parent.firstChild)
@@ -88,7 +98,7 @@ describe('runtime-dom: node-ops', () => {
         content,
         parent,
         anchor,
-        false,
+        undefined,
         cached.firstChild,
         cached.lastChild
       )
diff --git a/packages/runtime-dom/__tests__/patchAttrs.spec.ts b/packages/runtime-dom/__tests__/patchAttrs.spec.ts
index b78dd44c634..f06fb4a5ea6 100644
--- a/packages/runtime-dom/__tests__/patchAttrs.spec.ts
+++ b/packages/runtime-dom/__tests__/patchAttrs.spec.ts
@@ -4,15 +4,15 @@ import { xlinkNS } from '../src/modules/attrs'
 describe('runtime-dom: attrs patching', () => {
   test('xlink attributes', () => {
     const el = document.createElementNS('http://www.w3.org/2000/svg', 'use')
-    patchProp(el, 'xlink:href', null, 'a', true)
+    patchProp(el, 'xlink:href', null, 'a', 'svg')
     expect(el.getAttributeNS(xlinkNS, 'href')).toBe('a')
-    patchProp(el, 'xlink:href', 'a', null, true)
+    patchProp(el, 'xlink:href', 'a', null, 'svg')
     expect(el.getAttributeNS(xlinkNS, 'href')).toBe(null)
   })
 
   test('textContent attributes /w svg', () => {
     const el = document.createElementNS('http://www.w3.org/2000/svg', 'use')
-    patchProp(el, 'textContent', null, 'foo', true)
+    patchProp(el, 'textContent', null, 'foo', 'svg')
     expect(el.attributes.length).toBe(0)
     expect(el.innerHTML).toBe('foo')
   })
diff --git a/packages/runtime-dom/__tests__/patchClass.spec.ts b/packages/runtime-dom/__tests__/patchClass.spec.ts
index c8da741677a..7af4c885cbe 100644
--- a/packages/runtime-dom/__tests__/patchClass.spec.ts
+++ b/packages/runtime-dom/__tests__/patchClass.spec.ts
@@ -25,7 +25,7 @@ describe('runtime-dom: class patching', () => {
 
   test('svg', () => {
     const el = document.createElementNS(svgNS, 'svg')
-    patchProp(el, 'class', null, 'foo', true)
+    patchProp(el, 'class', null, 'foo', 'svg')
     expect(el.getAttribute('class')).toBe('foo')
   })
 })
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index ad818a34bb7..124789100e2 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -10,7 +10,8 @@ import {
   RootHydrateFunction,
   isRuntimeOnly,
   DeprecationTypes,
-  compatUtils
+  compatUtils,
+  ElementNamespace
 } from '@vue/runtime-core'
 import { nodeOps } from './nodeOps'
 import { patchProp } from './patchProp'
@@ -21,7 +22,8 @@ import {
   isHTMLTag,
   isSVGTag,
   extend,
-  NOOP
+  NOOP,
+  isMathMLTag
 } from '@vue/shared'
 
 declare module '@vue/reactivity' {
@@ -99,7 +101,7 @@ export const createApp = ((...args) => {
 
     // clear content before mounting
     container.innerHTML = ''
-    const proxy = mount(container, false, container instanceof SVGElement)
+    const proxy = mount(container, false, resolveRootNamespace(container))
     if (container instanceof Element) {
       container.removeAttribute('v-cloak')
       container.setAttribute('data-v-app', '')
@@ -122,18 +124,30 @@ export const createSSRApp = ((...args) => {
   app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
     const container = normalizeContainer(containerOrSelector)
     if (container) {
-      return mount(container, true, container instanceof SVGElement)
+      return mount(container, true, resolveRootNamespace(container))
     }
   }
 
   return app
 }) as CreateAppFunction<Element>
 
+function resolveRootNamespace(container: Element): ElementNamespace {
+  if (container instanceof SVGElement) {
+    return 'svg'
+  }
+  if (
+    typeof MathMLElement === 'function' &&
+    container instanceof MathMLElement
+  ) {
+    return 'mathml'
+  }
+}
+
 function injectNativeTagCheck(app: App) {
   // Inject `isNativeTag`
   // this is used for component name validation (dev only)
   Object.defineProperty(app.config, 'isNativeTag', {
-    value: (tag: string) => isHTMLTag(tag) || isSVGTag(tag),
+    value: (tag: string) => isHTMLTag(tag) || isSVGTag(tag) || isMathMLTag(tag),
     writable: false
   })
 }
diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index daf56fc6f3a..b9595536d00 100644
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -1,6 +1,7 @@
 import { RendererOptions } from '@vue/runtime-core'
 
 export const svgNS = 'http://www.w3.org/2000/svg'
+export const mathmlNS = 'http://www.w3.org/1998/Math/MathML'
 
 const doc = (typeof document !== 'undefined' ? document : null) as Document
 
@@ -18,10 +19,13 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
     }
   },
 
-  createElement: (tag, isSVG, is, props): Element => {
-    const el = isSVG
-      ? doc.createElementNS(svgNS, tag)
-      : doc.createElement(tag, is ? { is } : undefined)
+  createElement: (tag, namespace, is, props): Element => {
+    const el =
+      namespace === 'svg'
+        ? doc.createElementNS(svgNS, tag)
+        : namespace === 'mathml'
+          ? doc.createElementNS(mathmlNS, tag)
+          : doc.createElement(tag, is ? { is } : undefined)
 
     if (tag === 'select' && props && props.multiple != null) {
       ;(el as HTMLSelectElement).setAttribute('multiple', props.multiple)
@@ -56,7 +60,7 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
   // Reason: innerHTML.
   // Static content here can only come from compiled templates.
   // As long as the user only uses trusted templates, this is safe.
-  insertStaticContent(content, parent, anchor, isSVG, start, end) {
+  insertStaticContent(content, parent, anchor, namespace, start, end) {
     // <parent> before | first ... last | anchor </parent>
     const before = anchor ? anchor.previousSibling : parent.lastChild
     // #5308 can only take cached path if:
@@ -70,10 +74,16 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
       }
     } else {
       // fresh insert
-      templateContainer.innerHTML = isSVG ? `<svg>${content}</svg>` : content
+      templateContainer.innerHTML =
+        namespace === 'svg'
+          ? `<svg>${content}</svg>`
+          : namespace === 'mathml'
+            ? `<math>${content}</math>`
+            : content
+
       const template = templateContainer.content
-      if (isSVG) {
-        // remove outer svg wrapper
+      if (namespace === 'svg' || namespace === 'mathml') {
+        // remove outer svg/math wrapper
         const wrapper = template.firstChild!
         while (wrapper.firstChild) {
           template.appendChild(wrapper.firstChild)
diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
index e5883d18fca..d0f6923c5b4 100644
--- a/packages/runtime-dom/src/patchProp.ts
+++ b/packages/runtime-dom/src/patchProp.ts
@@ -20,12 +20,13 @@ export const patchProp: DOMRendererOptions['patchProp'] = (
   key,
   prevValue,
   nextValue,
-  isSVG = false,
+  namespace,
   prevChildren,
   parentComponent,
   parentSuspense,
   unmountChildren
 ) => {
+  const isSVG = namespace === 'svg'
   if (key === 'class') {
     patchClass(el, nextValue, isSVG)
   } else if (key === 'style') {
diff --git a/packages/shared/src/domTagConfig.ts b/packages/shared/src/domTagConfig.ts
index 535aa6be718..4cbb02b5f79 100644
--- a/packages/shared/src/domTagConfig.ts
+++ b/packages/shared/src/domTagConfig.ts
@@ -27,6 +27,13 @@ const SVG_TAGS =
   'polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,' +
   'text,textPath,title,tspan,unknown,use,view'
 
+// https://developer.mozilla.org/en-US/docs/Web/MathML/Element
+const MATH_TAGS =
+  'math,maction,annotation,annotation-xml,menclose,merror,mfenced,mfrac,mi,' +
+  'mmultiscripts,mn,mo,mover,mpadded,mphantom,mprescripts,mroot,mrow,ms,' +
+  'semantics,mspace,msqrt,mstyle,msub,msup,msubsup,mtable,mtd,mtext,mtr,' +
+  'munder,munderover'
+
 const VOID_TAGS =
   'area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr'
 
@@ -40,6 +47,11 @@ export const isHTMLTag = /*#__PURE__*/ makeMap(HTML_TAGS)
  * Do NOT use in runtime code paths unless behind `__DEV__` flag.
  */
 export const isSVGTag = /*#__PURE__*/ makeMap(SVG_TAGS)
+/**
+ * Compiler only.
+ * Do NOT use in runtime code paths unless behind `__DEV__` flag.
+ */
+export const isMathMLTag = /*#__PURE__*/ makeMap(MATH_TAGS)
 /**
  * Compiler only.
  * Do NOT use in runtime code paths unless behind `__DEV__` flag.
diff --git a/packages/vue/__tests__/mathmlNamespace.spec.ts b/packages/vue/__tests__/mathmlNamespace.spec.ts
new file mode 100644
index 00000000000..3fe1221f534
--- /dev/null
+++ b/packages/vue/__tests__/mathmlNamespace.spec.ts
@@ -0,0 +1,80 @@
+// MathML logic is technically dom-specific, but the logic is placed in core
+// because splitting it out of core would lead to unnecessary complexity in both
+// the renderer and compiler implementations.
+// Related files:
+// - runtime-core/src/renderer.ts
+// - compiler-core/src/transforms/transformElement.ts
+
+import { vtcKey } from '../../runtime-dom/src/components/Transition'
+import { render, h, ref, nextTick } from '../src'
+
+describe('MathML support', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('should mount elements with correct html namespace', () => {
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+    const App = {
+      template: `
+      <math display="block" id="e0">
+        <semantics id="e1">
+          <mrow id="e2">
+            <msup>
+              <mi>x</mi>
+              <mn>2</mn>
+            </msup>
+            <mo>+</mo>
+            <mi>y</mi>
+          </mrow>
+
+          <annotation-xml encoding="text/html" id="e3">
+            <div id="e4" />
+            <svg id="e5" />
+          </annotation-xml>
+        </semantics>
+      </math>
+      `
+    }
+    render(h(App), root)
+    const e0 = document.getElementById('e0')!
+    expect(e0.namespaceURI).toMatch('Math')
+    expect(e0.querySelector('#e1')!.namespaceURI).toMatch('Math')
+    expect(e0.querySelector('#e2')!.namespaceURI).toMatch('Math')
+    expect(e0.querySelector('#e3')!.namespaceURI).toMatch('Math')
+    expect(e0.querySelector('#e4')!.namespaceURI).toMatch('xhtml')
+    expect(e0.querySelector('#e5')!.namespaceURI).toMatch('svg')
+  })
+
+  test('should patch elements with correct namespaces', async () => {
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+    const cls = ref('foo')
+    const App = {
+      setup: () => ({ cls }),
+      template: `
+        <div>
+          <math id="f1" :class="cls">
+            <annotation encoding="text/html">
+              <div id="f2" :class="cls"/>
+            </annotation>
+          </math>
+        </div>
+      `
+    }
+    render(h(App), root)
+    const f1 = document.querySelector('#f1')!
+    const f2 = document.querySelector('#f2')!
+    expect(f1.getAttribute('class')).toBe('foo')
+    expect(f2.className).toBe('foo')
+
+    // set a transition class on the <div> - which is only respected on non-svg
+    // patches
+    ;(f2 as any)[vtcKey] = ['baz']
+    cls.value = 'bar'
+    await nextTick()
+    expect(f1.getAttribute('class')).toBe('bar')
+    expect(f2.className).toBe('bar baz')
+  })
+})
diff --git a/packages/vue/__tests__/svgNamespace.spec.ts b/packages/vue/__tests__/svgNamespace.spec.ts
index e944e7d8663..df52bbf60a8 100644
--- a/packages/vue/__tests__/svgNamespace.spec.ts
+++ b/packages/vue/__tests__/svgNamespace.spec.ts
@@ -9,7 +9,11 @@ import { vtcKey } from '../../runtime-dom/src/components/Transition'
 import { render, h, ref, nextTick } from '../src'
 
 describe('SVG support', () => {
-  test('should mount elements with correct namespaces', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('should mount elements with correct html namespace', () => {
     const root = document.createElement('div')
     document.body.appendChild(root)
     const App = {
@@ -18,6 +22,8 @@ describe('SVG support', () => {
           <svg id="e1">
             <foreignObject id="e2">
               <div id="e3"/>
+              <svg id="e4"/>
+              <math id="e5"/>
             </foreignObject>
           </svg>
         </div>
@@ -29,6 +35,8 @@ describe('SVG support', () => {
     expect(e0.querySelector('#e1')!.namespaceURI).toMatch('svg')
     expect(e0.querySelector('#e2')!.namespaceURI).toMatch('svg')
     expect(e0.querySelector('#e3')!.namespaceURI).toMatch('xhtml')
+    expect(e0.querySelector('#e4')!.namespaceURI).toMatch('svg')
+    expect(e0.querySelector('#e5')!.namespaceURI).toMatch('Math')
   })
 
   test('should patch elements with correct namespaces', async () => {
diff --git a/scripts/setupVitest.ts b/scripts/setupVitest.ts
index cd1e672fd28..41df611a267 100644
--- a/scripts/setupVitest.ts
+++ b/scripts/setupVitest.ts
@@ -1,5 +1,7 @@
 import { type SpyInstance } from 'vitest'
 
+vi.stubGlobal('MathMLElement', class MathMLElement {})
+
 expect.extend({
   toHaveBeenWarned(received: string) {
     asserted.add(received)

From 44135dc95fb8fea26b84d1433839d28b8c21f708 Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Fri, 8 Dec 2023 14:17:46 +0000
Subject: [PATCH 42/47] feat(types): expose `PublicProps` type (#2403)

---
 packages/runtime-core/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index f8d21242b83..67ee06fda4e 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -232,7 +232,7 @@ export type {
   ComponentCustomProps,
   AllowedComponentProps
 } from './component'
-export type { DefineComponent } from './apiDefineComponent'
+export type { DefineComponent, PublicProps } from './apiDefineComponent'
 export type {
   ComponentOptions,
   ComponentOptionsMixin,

From bfb856565d3105db4b18991ae9e404e7cc989b25 Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Fri, 8 Dec 2023 14:24:38 +0000
Subject: [PATCH 43/47] feat(types): provide ComponentInstance type (#5408)

---
 .../dts-test/componentInstance.test-d.tsx     | 139 ++++++++++++++++++
 packages/runtime-core/src/component.ts        |  33 +++++
 packages/runtime-core/src/index.ts            |   3 +-
 3 files changed, 174 insertions(+), 1 deletion(-)
 create mode 100644 packages/dts-test/componentInstance.test-d.tsx

diff --git a/packages/dts-test/componentInstance.test-d.tsx b/packages/dts-test/componentInstance.test-d.tsx
new file mode 100644
index 00000000000..2fb20312b2c
--- /dev/null
+++ b/packages/dts-test/componentInstance.test-d.tsx
@@ -0,0 +1,139 @@
+import {
+  defineComponent,
+  FunctionalComponent,
+  ComponentPublicInstance,
+  ComponentInstance,
+  ref
+} from 'vue'
+import { expectType, describe } from './utils'
+
+describe('defineComponent', () => {
+  const CompSetup = defineComponent({
+    props: {
+      test: String
+    },
+    setup() {
+      return {
+        a: 1
+      }
+    }
+  })
+  const compSetup: ComponentInstance<typeof CompSetup> = {} as any
+
+  expectType<string | undefined>(compSetup.test)
+  expectType<number>(compSetup.a)
+  expectType<ComponentPublicInstance>(compSetup)
+})
+describe('functional component', () => {
+  // Functional
+  const CompFunctional: FunctionalComponent<{ test?: string }> = {} as any
+  const compFunctional: ComponentInstance<typeof CompFunctional> = {} as any
+
+  expectType<string | undefined>(compFunctional.test)
+  expectType<ComponentPublicInstance>(compFunctional)
+
+  const CompFunction: (props: { test?: string }) => any = {} as any
+  const compFunction: ComponentInstance<typeof CompFunction> = {} as any
+
+  expectType<string | undefined>(compFunction.test)
+  expectType<ComponentPublicInstance>(compFunction)
+})
+
+describe('options component', () => {
+  // Options
+  const CompOptions = defineComponent({
+    props: {
+      test: String
+    },
+    data() {
+      return {
+        a: 1
+      }
+    },
+    computed: {
+      b() {
+        return 'test'
+      }
+    },
+    methods: {
+      func(a: string) {
+        return true
+      }
+    }
+  })
+  const compOptions: ComponentInstance<typeof CompOptions> = {} as any
+  expectType<string | undefined>(compOptions.test)
+  expectType<number>(compOptions.a)
+  expectType<(a: string) => boolean>(compOptions.func)
+  expectType<ComponentPublicInstance>(compOptions)
+})
+
+describe('object no defineComponent', () => {
+  // object - no defineComponent
+
+  const CompObjectSetup = {
+    props: {
+      test: String
+    },
+    setup() {
+      return {
+        a: 1
+      }
+    }
+  }
+  const compObjectSetup: ComponentInstance<typeof CompObjectSetup> = {} as any
+  expectType<string | undefined>(compObjectSetup.test)
+  expectType<number>(compObjectSetup.a)
+  expectType<ComponentPublicInstance>(compObjectSetup)
+
+  const CompObjectData = {
+    props: {
+      test: String
+    },
+    data() {
+      return {
+        a: 1
+      }
+    }
+  }
+  const compObjectData: ComponentInstance<typeof CompObjectData> = {} as any
+  expectType<string | undefined>(compObjectData.test)
+  expectType<number>(compObjectData.a)
+  expectType<ComponentPublicInstance>(compObjectData)
+
+  const CompObjectNoProps = {
+    data() {
+      return {
+        a: 1
+      }
+    }
+  }
+  const compObjectNoProps: ComponentInstance<typeof CompObjectNoProps> =
+    {} as any
+  expectType<string | undefined>(compObjectNoProps.test)
+  expectType<number>(compObjectNoProps.a)
+  expectType<ComponentPublicInstance>(compObjectNoProps)
+})
+
+describe('Generic component', () => {
+  const Comp = defineComponent(
+    // TODO: babel plugin to auto infer runtime props options from type
+    // similar to defineProps<{...}>()
+    <T extends string | number>(props: { msg: T; list: T[] }) => {
+      // use Composition API here like in <script setup>
+      const count = ref(0)
+
+      return () => (
+        // return a render function (both JSX and h() works)
+        <div>
+          {props.msg} {count.value}
+        </div>
+      )
+    }
+  )
+
+  // defaults to known types since types are resolved on instantiation
+  const comp: ComponentInstance<typeof Comp> = {} as any
+  expectType<string | number>(comp.msg)
+  expectType<Array<string | number>>(comp.list)
+})
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 348228081ff..287e03d6c6d 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -83,6 +83,39 @@ import { LifecycleHooks } from './enums'
 
 export type Data = Record<string, unknown>
 
+/**
+ * Public utility type for extracting the instance type of a component.
+ * Works with all valid component definition types. This is intended to replace
+ * the usage of `InstanceType<typeof Comp>` which only works for
+ * constructor-based component definition types.
+ *
+ * Exmaple:
+ * ```ts
+ * const MyComp = { ... }
+ * declare const instance: ComponentInstance<typeof MyComp>
+ * ```
+ */
+export type ComponentInstance<T> = T extends { new (): ComponentPublicInstance }
+  ? InstanceType<T>
+  : T extends FunctionalComponent<infer Props, infer Emits>
+  ? ComponentPublicInstance<Props, {}, {}, {}, {}, Emits>
+  : T extends Component<
+      infer Props,
+      infer RawBindings,
+      infer D,
+      infer C,
+      infer M
+    >
+  ? // NOTE we override Props/RawBindings/D to make sure is not `unknown`
+    ComponentPublicInstance<
+      unknown extends Props ? {} : Props,
+      unknown extends RawBindings ? {} : RawBindings,
+      unknown extends D ? {} : D,
+      C,
+      M
+    >
+  : never // not a vue Component
+
 /**
  * For extending allowed non-declared props on components in TSX
  */
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 67ee06fda4e..4c36250683e 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -230,7 +230,8 @@ export type {
   ComponentInternalInstance,
   SetupContext,
   ComponentCustomProps,
-  AllowedComponentProps
+  AllowedComponentProps,
+  ComponentInstance
 } from './component'
 export type { DefineComponent, PublicProps } from './apiDefineComponent'
 export type {

From 927ab17cfc645e82d061fdf227c34689491268e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Fri, 8 Dec 2023 22:24:58 +0800
Subject: [PATCH 44/47] feat(types): add emits and slots type to
 `FunctionalComponent` (#8644)

---
 packages/dts-test/component.test-d.ts       | 50 ++++++++++++++++++---
 packages/runtime-core/src/component.ts      | 26 ++++++-----
 packages/runtime-core/src/componentEmits.ts | 10 ++++-
 3 files changed, 69 insertions(+), 17 deletions(-)

diff --git a/packages/dts-test/component.test-d.ts b/packages/dts-test/component.test-d.ts
index 5535419f198..98b3f42097b 100644
--- a/packages/dts-test/component.test-d.ts
+++ b/packages/dts-test/component.test-d.ts
@@ -8,14 +8,22 @@ import {
   FunctionalComponent,
   ComponentPublicInstance,
   toRefs,
-  SetupContext
+  SetupContext,
+  EmitsOptions
 } from 'vue'
 import { describe, expectAssignable, expectType, IsAny } from './utils'
 
-declare function extractComponentOptions<Props, RawBindings>(
-  obj: Component<Props, RawBindings>
+declare function extractComponentOptions<
+  Props,
+  RawBindings,
+  Emits extends EmitsOptions | Record<string, any[]>,
+  Slots extends Record<string, any>
+>(
+  obj: Component<Props, RawBindings, any, any, any, Emits, Slots>
 ): {
   props: Props
+  emits: Emits
+  slots: Slots
   rawBindings: RawBindings
   setup: ShallowUnwrapRef<RawBindings>
 }
@@ -455,11 +463,27 @@ describe('functional', () => {
   })
 
   describe('typed', () => {
-    const MyComponent: FunctionalComponent<{ foo: number }> = (_, _2) => {}
+    type Props = { foo: number }
+    type Emits = { change: [value: string]; inc: [value: number] }
+    type Slots = { default: (scope: { foo: string }) => any }
+
+    const MyComponent: FunctionalComponent<Props, Emits, Slots> = (
+      props,
+      { emit, slots }
+    ) => {
+      expectType<Props>(props)
+      expectType<{
+        (event: 'change', value: string): void
+        (event: 'inc', value: number): void
+      }>(emit)
+      expectType<Slots>(slots)
+    }
 
-    const { props } = extractComponentOptions(MyComponent)
+    const { props, emits, slots } = extractComponentOptions(MyComponent)
 
-    expectType<number>(props.foo)
+    expectType<Props>(props)
+    expectType<Emits>(emits)
+    expectType<Slots>(slots)
   })
 })
 
@@ -481,4 +505,18 @@ describe('SetupContext', () => {
 
     expectAssignable<SetupContext<{ b: () => true }>>(wider)
   })
+
+  describe('short emits', () => {
+    const {
+      emit
+    }: SetupContext<{
+      a: [val: string]
+      b: [val: number]
+    }> = {} as any
+
+    expectType<{
+      (event: 'a', val: string): void
+      (event: 'b', val: number): void
+    }>(emit)
+  })
 })
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 287e03d6c6d..b7bc8afbd6f 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -51,7 +51,8 @@ import {
   EmitFn,
   emit,
   normalizeEmitsOptions,
-  EmitsToProps
+  EmitsToProps,
+  ShortEmitsToObject
 } from './componentEmits'
 import {
   EMPTY_OBJ,
@@ -160,16 +161,17 @@ export interface ComponentInternalOptions {
 
 export interface FunctionalComponent<
   P = {},
-  E extends EmitsOptions = {},
-  S extends Record<string, any> = any
+  E extends EmitsOptions | Record<string, any[]> = {},
+  S extends Record<string, any> = any,
+  EE extends EmitsOptions = ShortEmitsToObject<E>
 > extends ComponentInternalOptions {
   // use of any here is intentional so it can be a valid JSX Element constructor
   (
-    props: P & EmitsToProps<E>,
-    ctx: Omit<SetupContext<E, IfAny<S, {}, SlotsType<S>>>, 'expose'>
+    props: P & EmitsToProps<EE>,
+    ctx: Omit<SetupContext<EE, IfAny<S, {}, SlotsType<S>>>, 'expose'>
   ): any
   props?: ComponentPropsOptions<P>
-  emits?: E | (keyof E)[]
+  emits?: EE | (keyof EE)[]
   slots?: IfAny<S, Slots, SlotsType<S>>
   inheritAttrs?: boolean
   displayName?: string
@@ -192,10 +194,12 @@ export type ConcreteComponent<
   RawBindings = any,
   D = any,
   C extends ComputedOptions = ComputedOptions,
-  M extends MethodOptions = MethodOptions
+  M extends MethodOptions = MethodOptions,
+  E extends EmitsOptions | Record<string, any[]> = {},
+  S extends Record<string, any> = any
 > =
   | ComponentOptions<Props, RawBindings, D, C, M>
-  | FunctionalComponent<Props, any>
+  | FunctionalComponent<Props, E, S>
 
 /**
  * A type used in public APIs where a component type is expected.
@@ -206,9 +210,11 @@ export type Component<
   RawBindings = any,
   D = any,
   C extends ComputedOptions = ComputedOptions,
-  M extends MethodOptions = MethodOptions
+  M extends MethodOptions = MethodOptions,
+  E extends EmitsOptions | Record<string, any[]> = {},
+  S extends Record<string, any> = any
 > =
-  | ConcreteComponent<Props, RawBindings, D, C, M>
+  | ConcreteComponent<Props, RawBindings, D, C, M, E, S>
   | ComponentPublicInstanceConstructor<Props>
 
 export type { ComponentOptions }
diff --git a/packages/runtime-core/src/componentEmits.ts b/packages/runtime-core/src/componentEmits.ts
index f3a30f7c953..893ebeaf3b7 100644
--- a/packages/runtime-core/src/componentEmits.ts
+++ b/packages/runtime-core/src/componentEmits.ts
@@ -55,6 +55,12 @@ export type EmitsToProps<T extends EmitsOptions> = T extends string[]
       }
     : {}
 
+export type ShortEmitsToObject<E> = E extends Record<string, any[]>
+  ? {
+      [K in keyof E]: (...args: E[K]) => any
+    }
+  : E
+
 export type EmitFn<
   Options = ObjectEmitsOptions,
   Event extends keyof Options = keyof Options
@@ -66,7 +72,9 @@ export type EmitFn<
         {
           [key in Event]: Options[key] extends (...args: infer Args) => any
             ? (event: key, ...args: Args) => void
-            : (event: key, ...args: any[]) => void
+            : Options[key] extends any[]
+              ? (event: key, ...args: Options[key]) => void
+              : (event: key, ...args: any[]) => void
         }[Event]
       >
 

From c95ab629363a7968d56b903c93f4cb60137a9d47 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 8 Dec 2023 22:34:47 +0800
Subject: [PATCH 45/47] chore: fix types

---
 packages/runtime-core/src/component.ts | 34 +++++++++++++-------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index b7bc8afbd6f..b0f3bf82ea8 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -99,23 +99,23 @@ export type Data = Record<string, unknown>
 export type ComponentInstance<T> = T extends { new (): ComponentPublicInstance }
   ? InstanceType<T>
   : T extends FunctionalComponent<infer Props, infer Emits>
-  ? ComponentPublicInstance<Props, {}, {}, {}, {}, Emits>
-  : T extends Component<
-      infer Props,
-      infer RawBindings,
-      infer D,
-      infer C,
-      infer M
-    >
-  ? // NOTE we override Props/RawBindings/D to make sure is not `unknown`
-    ComponentPublicInstance<
-      unknown extends Props ? {} : Props,
-      unknown extends RawBindings ? {} : RawBindings,
-      unknown extends D ? {} : D,
-      C,
-      M
-    >
-  : never // not a vue Component
+    ? ComponentPublicInstance<Props, {}, {}, {}, {}, ShortEmitsToObject<Emits>>
+    : T extends Component<
+          infer Props,
+          infer RawBindings,
+          infer D,
+          infer C,
+          infer M
+        >
+      ? // NOTE we override Props/RawBindings/D to make sure is not `unknown`
+        ComponentPublicInstance<
+          unknown extends Props ? {} : Props,
+          unknown extends RawBindings ? {} : RawBindings,
+          unknown extends D ? {} : D,
+          C,
+          M
+        >
+      : never // not a vue Component
 
 /**
  * For extending allowed non-declared props on components in TSX

From 096ba81817b7da15f61bc55fc1a93f72ac9586e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sat, 9 Dec 2023 00:34:28 +0800
Subject: [PATCH 46/47] feat(types): expose `DefineProps` type

---
 packages/runtime-core/src/apiSetupHelpers.ts | 2 +-
 packages/runtime-core/src/index.ts           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 509c280d63b..e3910182509 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -94,7 +94,7 @@ export function defineProps() {
   return null as any
 }
 
-type DefineProps<T, BKeys extends keyof T> = Readonly<T> & {
+export type DefineProps<T, BKeys extends keyof T> = Readonly<T> & {
   readonly [K in BKeys]-?: boolean
 }
 
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 4c36250683e..ab86bfce7dc 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -60,7 +60,7 @@ export { provide, inject, hasInjectionContext } from './apiInject'
 export { nextTick } from './scheduler'
 export { defineComponent } from './apiDefineComponent'
 export { defineAsyncComponent } from './apiAsyncComponent'
-export { useAttrs, useSlots } from './apiSetupHelpers'
+export { useAttrs, useSlots, type DefineProps } from './apiSetupHelpers'
 
 // <script setup> API ----------------------------------------------------------
 

From cf7743533857b6fc07720ae14d876e211d43589e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 11 Dec 2023 10:46:28 +0800
Subject: [PATCH 47/47] refactor(compiler-core): reuse unwrapTS utility
 function (#9795)

---
 packages/compiler-core/src/babelUtils.ts               |  8 ++++++++
 packages/compiler-core/src/utils.ts                    |  5 ++---
 packages/compiler-sfc/src/compileScript.ts             | 10 +++-------
 packages/compiler-sfc/src/script/defineModel.ts        |  5 ++---
 packages/compiler-sfc/src/script/defineOptions.ts      |  3 ++-
 packages/compiler-sfc/src/script/defineProps.ts        |  3 +--
 .../compiler-sfc/src/script/definePropsDestructure.ts  |  5 +++--
 packages/compiler-sfc/src/script/utils.ts              |  9 ---------
 8 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/packages/compiler-core/src/babelUtils.ts b/packages/compiler-core/src/babelUtils.ts
index f3ef5df29db..a9c1ebe9c32 100644
--- a/packages/compiler-core/src/babelUtils.ts
+++ b/packages/compiler-core/src/babelUtils.ts
@@ -441,3 +441,11 @@ export const TS_NODE_TYPES = [
   'TSInstantiationExpression', // foo<string>
   'TSSatisfiesExpression' // foo satisfies T
 ]
+
+export function unwrapTSNode(node: Node): Node {
+  if (TS_NODE_TYPES.includes(node.type)) {
+    return unwrapTSNode((node as any).expression)
+  } else {
+    return node
+  }
+}
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index a159d2eedc7..adc5c19476b 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -40,6 +40,7 @@ import { isString, isObject, NOOP } from '@vue/shared'
 import { PropsExpression } from './transforms/transformElement'
 import { parseExpression } from '@babel/parser'
 import { Expression } from '@babel/types'
+import { unwrapTSNode } from './babelUtils'
 
 export const isStaticExp = (p: JSChildNode): p is SimpleExpressionNode =>
   p.type === NodeTypes.SIMPLE_EXPRESSION && p.isStatic
@@ -158,9 +159,7 @@ export const isMemberExpressionNode = __BROWSER__
         let ret: Expression = parseExpression(path, {
           plugins: context.expressionPlugins
         })
-        if (ret.type === 'TSAsExpression' || ret.type === 'TSTypeAssertion') {
-          ret = ret.expression
-        }
+        ret = unwrapTSNode(ret) as Expression
         return (
           ret.type === 'MemberExpression' ||
           ret.type === 'OptionalMemberExpression' ||
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index b3f5a141486..1783c6db9ee 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -2,7 +2,8 @@ import {
   BindingTypes,
   UNREF,
   isFunctionType,
-  walkIdentifiers
+  walkIdentifiers,
+  unwrapTSNode
 } from '@vue/compiler-dom'
 import { DEFAULT_FILENAME, SFCDescriptor, SFCScriptBlock } from './parse'
 import { ParserPlugin } from '@babel/parser'
@@ -43,12 +44,7 @@ import { DEFINE_EXPOSE, processDefineExpose } from './script/defineExpose'
 import { DEFINE_OPTIONS, processDefineOptions } from './script/defineOptions'
 import { processDefineSlots } from './script/defineSlots'
 import { DEFINE_MODEL, processDefineModel } from './script/defineModel'
-import {
-  isLiteralNode,
-  unwrapTSNode,
-  isCallOf,
-  getImportedName
-} from './script/utils'
+import { isLiteralNode, isCallOf, getImportedName } from './script/utils'
 import { analyzeScriptBindings } from './script/analyzeScriptBindings'
 import { isImportUsed } from './script/importUsageCheck'
 import { processAwait } from './script/topLevelAwait'
diff --git a/packages/compiler-sfc/src/script/defineModel.ts b/packages/compiler-sfc/src/script/defineModel.ts
index 432b8676fbd..c104eb306ae 100644
--- a/packages/compiler-sfc/src/script/defineModel.ts
+++ b/packages/compiler-sfc/src/script/defineModel.ts
@@ -5,10 +5,9 @@ import {
   UNKNOWN_TYPE,
   concatStrings,
   isCallOf,
-  toRuntimeTypeString,
-  unwrapTSNode
+  toRuntimeTypeString
 } from './utils'
-import { BindingTypes } from '@vue/compiler-dom'
+import { BindingTypes, unwrapTSNode } from '@vue/compiler-dom'
 import { warnOnce } from '../warn'
 
 export const DEFINE_MODEL = 'defineModel'
diff --git a/packages/compiler-sfc/src/script/defineOptions.ts b/packages/compiler-sfc/src/script/defineOptions.ts
index 8da3dbc0b4d..4a3551d7551 100644
--- a/packages/compiler-sfc/src/script/defineOptions.ts
+++ b/packages/compiler-sfc/src/script/defineOptions.ts
@@ -1,6 +1,7 @@
 import { Node } from '@babel/types'
+import { unwrapTSNode } from '@vue/compiler-dom'
 import { ScriptCompileContext } from './context'
-import { isCallOf, unwrapTSNode } from './utils'
+import { isCallOf } from './utils'
 import { DEFINE_PROPS } from './defineProps'
 import { DEFINE_EMITS } from './defineEmits'
 import { DEFINE_EXPOSE } from './defineExpose'
diff --git a/packages/compiler-sfc/src/script/defineProps.ts b/packages/compiler-sfc/src/script/defineProps.ts
index ca631895f2b..3df6daea7d6 100644
--- a/packages/compiler-sfc/src/script/defineProps.ts
+++ b/packages/compiler-sfc/src/script/defineProps.ts
@@ -6,7 +6,7 @@ import {
   ObjectExpression,
   Expression
 } from '@babel/types'
-import { BindingTypes, isFunctionType } from '@vue/compiler-dom'
+import { BindingTypes, isFunctionType, unwrapTSNode } from '@vue/compiler-dom'
 import { ScriptCompileContext } from './context'
 import {
   TypeResolveContext,
@@ -19,7 +19,6 @@ import {
   concatStrings,
   isLiteralNode,
   isCallOf,
-  unwrapTSNode,
   toRuntimeTypeString,
   getEscapedPropName
 } from './utils'
diff --git a/packages/compiler-sfc/src/script/definePropsDestructure.ts b/packages/compiler-sfc/src/script/definePropsDestructure.ts
index 5f2a1ef0aa7..c9c4fb5f7b7 100644
--- a/packages/compiler-sfc/src/script/definePropsDestructure.ts
+++ b/packages/compiler-sfc/src/script/definePropsDestructure.ts
@@ -15,10 +15,11 @@ import {
   isInDestructureAssignment,
   isReferencedIdentifier,
   isStaticProperty,
-  walkFunctionParams
+  walkFunctionParams,
+  unwrapTSNode
 } from '@vue/compiler-dom'
 import { genPropsAccessExp } from '@vue/shared'
-import { isCallOf, resolveObjectKey, unwrapTSNode } from './utils'
+import { isCallOf, resolveObjectKey } from './utils'
 import { ScriptCompileContext } from './context'
 import { DEFINE_PROPS } from './defineProps'
 import { warnOnce } from '../warn'
diff --git a/packages/compiler-sfc/src/script/utils.ts b/packages/compiler-sfc/src/script/utils.ts
index bc621d25840..a1124ce81b1 100644
--- a/packages/compiler-sfc/src/script/utils.ts
+++ b/packages/compiler-sfc/src/script/utils.ts
@@ -9,7 +9,6 @@ import {
   StringLiteral
 } from '@babel/types'
 import path from 'path'
-import { TS_NODE_TYPES } from '@vue/compiler-dom'
 
 export const UNKNOWN_TYPE = 'Unknown'
 
@@ -32,14 +31,6 @@ export function isLiteralNode(node: Node) {
   return node.type.endsWith('Literal')
 }
 
-export function unwrapTSNode(node: Node): Node {
-  if (TS_NODE_TYPES.includes(node.type)) {
-    return unwrapTSNode((node as any).expression)
-  } else {
-    return node
-  }
-}
-
 export function isCallOf(
   node: Node | null | undefined,
   test: string | ((id: string) => boolean) | null | undefined